微信小程序开发相关常用代码

admin 2023-08-22 07:02 224 ℃ 0 条

小程序app.js里面的配置在其他页面读取方法：

const app = getApp()//调用data信息
app.data.xx (xx为对应参数)//调用相关函数
app.function_name() (function_name换成对应的函数)

页面内js调用data里面的参数：

this.data.xx (xx为对应参数)//需要注意，如果是api接口内部调用，则需要先定义全局，再调用var that = this;
wx.request({
	  url: 'xxx', //仅为示例，并非真实的接口地址
	  data: {
	
	  },
	  header: {		'content-type': 'application/x-www-form-urlencoded' 
	  },
	  success (res) {		//调用时
		var abc = that.data.xx

	  }
	})

设置当前页面的data数据：

this.setData({
	
	userinfo:info,
	maskshow:0
	})//同理，api请求内部需要先在请求前面定义全局var that = this;
wx.request({
	  url: 'xxx', //仅为示例，并非真实的接口地址
	  data: {
	
	  },
	  header: {		'content-type': 'application/x-www-form-urlencoded 
	  },
	  success (res) {
		
		if(res.data.code==0){
			that.setData({
				userinfo:userinfo
			})
		}
	  }
	})

设置缓存和读取缓存：

//检查并读取缓存
if(wx.getStorageSync('userinfo')){		
console.log(wx.getStorageSync('userinfo'));		
this.setData({			
userinfo:wx.getStorageSync('userinfo'),			
maskshow:0
})
		
		
}else{
    //无缓存}//设置缓存var userinfo = { };
userinfo['openid'] = 'xxxx';
wx.setStorageSync('userinfo', userinfo);

简单发起http请求：

wx.request({
	  url: 'xxx', //仅为示例，并非真实的接口地址
	  data: {
	
	  },
	  header: {		'content-type': 'application/x-www-form-urlencoded' 
	  },
	  success (res) {		//返回数据必须为json才能被接收
		//返回的res.data才是后端的数据
		if(res.data.code==0){
			
		}
	  }
	})

上传文件接口使用：

//前台wxml   <view class="photo">            <view class="uploading fl">              <image src="../../images/case2.jpg" wx:if="{{showimages==0}}"></image>
               <block wx:for="{{showimages}}" wx:key="*this">
                        <image  src="{{item}}" mode="aspectFill" data-idx="{{index}}" ></image>
                </block>
              <!--上传图片后显示-->
            </view>
            <view class="scinput fr" bindtap="upImage"></view>         </view>
   
   //JS部分    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机      success: res => {
		 var tempFilePaths = res.tempFilePaths;
		 console.log(tempFilePaths);
		wx.uploadFile({
		  url: 'https://xxxx/common/uploads', //仅为示例，非真实的接口地址
		  filePath: tempFilePaths[0],
		  name: 'file',
		  formData:{			'molds':'message'
		  },
		   header: {
            "Content-Type": "multipart/form-data"//记得设置          },
		  success: function(res){
		        //返回信息需要转JSON
			var data = JSON.parse(res.data);
			console.log(data);
			that.setData({
			  showimages: [data.url]
			})
		  }
		})
	
      }
    })

后端PHP接收上传文件：

function uploads(){
	$file = $_POST['filename'];	if(!$file){
		$file = 'file';
	}	if ($_FILES[$file]["error"] > 0){
	  $data['error'] =  "Error: 上传错误！";
	  $data['code'] = 1000;
	}else{
	  // echo "Upload: " . $_FILES["file"]["name"] . "<br />";
	  // echo "Type: " . $_FILES["file"]["type"] . "<br />";
	  // echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
	  // echo "Stored in: " . $_FILES["file"]["tmp_name"];
	  $pix = explode('.',$_FILES[$file]['name']);
	  $pix = end($pix);

		$fileType = ['jpg','png','gif','jpeg'];//后台配置--可删除		if(strpos($fileType,strtolower($pix))===false){
			$data['error'] =  "Error: 文件类型不允许上传！";
			$data['code'] = 1002;
			JsonReturn($data);
		}
		$fileSize = 20000;//单位kb,后台配置--可删除		if($fileSize!=0 && ($_FILES[$file]["size"]/1024)>$fileSize){
			$data['error'] =  "Error: 文件大小超过网站内部限制！";
			$data['code'] = 1003;
			JsonReturn($data);
		}
		
	  
		$filename =  'Public/Home/'.date('Ymd').rand(1000,9999).'.'.$pix;
	  		if(move_uploaded_file($_FILES[$file]['tmp_name'],$filename)){
			$data['url'] = '/'.$filename;
			$data['code'] = 0;
			
			
			
		}else{
			$data['error'] =  "Error: 请检查目录[Public/Home]写入权限";
			$data['code'] = 1001;
			  
		} 

		  
	  
	  }
	  
	  
	  JsonReturn($data,true);
	  exit;
	  
	
	
}

微信用户登录：

//前台 <view class="mask" wx:if="{{maskshow==1}}" >
  <view class="login_info">
    <view class="tit">授权登录</view>
    <view class="des">
      为了更快速的审核，我们需要授权您授权。
    </view>
   
    <view class="obtain">
      <button class="fl btn" bindtap="noShowLogin">暂不授权</button>
      <button class="fr btn blue" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">立即授权</button>
    </view>
    
  </view>
</view>//js部分    bindGetUserInfo(res) {
		console.log(res);		if (res.detail.userInfo) {
		  console.log("点击了同意授权");
		   var that = this;
		  wx.getUserInfo({
			  success: function(res) {				var userInfo = res.userInfo				var nickName = userInfo.nickName				var avatarUrl = userInfo.avatarUrl				var gender = userInfo.gender //性别 0：未知、1：男、2：女
				var province = userInfo.province				var city = userInfo.city				var country = userInfo.country
				 wx.login({
				success: function (res) {
				  if (res.code) {
					wx.request({
					  url: 'xxx.php',//发送给后端获取openid
					  data: {
						code: res.code,
						nickName:nickName,
						avatarUrl:avatarUrl,
						gender:gender,
						province:province,
						city:city,
						country:country
						
					  },
					  header: {						'content-type': 'application/json' // 默认值
					  },
					  success: function (res) {
						  var userinfo = {};
						 console.log(res);
						  userinfo['nickName'] = nickName;
						  userinfo['avatarUrl'] = avatarUrl;
						  userinfo['gender'] = gender;
						  userinfo['province'] = province;
						  userinfo['openid'] = res.data.info.openid;
						    //写入缓存
						  wx.setStorageSync('userinfo', userinfo);
						  that.setData({
							  openid:res.data.info.openid,
							  userinfo:userinfo,
							  maskshow:0
							  
						  })
						
					  }
					})
				  } else {
					console.log("授权失败");
				  }
				},
			  })
				
				
			  }
			})
		 
		  
 
		} else {
		  console.log("点击了拒绝授权");
		  wx.showToast({
			  title: '您拒绝授权不能申请！',
			  icon: 'error',
			  duration: 2500
			})
		 this.setData({
			 maskshow:1
			 
		 })
		  
		}
	},
	  noShowLogin:function(){
	   wx.showToast({
			  title: '您拒绝授权不能使用！',
			  icon: 'error',
			  duration: 2500
			})
	  this.setData({
			 maskshow:1
			 
		 })
		   
  },

PHP登录处理：

 function checklogin(){
		
    	$params=$this->frparam();
    	$appid = $this->webconf['wxappid'];
    	$secret = $this->webconf['wxsecret'];
	    $url="https://api.weixin.qq.com/sns/jscode2session?appid=".$appid."&secret=".$secret."&js_code=".$params['code']."&grant_type=authorization_code";
	    $data=$this->doCurl($url);
		$info['data'] = $data;
		$data = json_decode($data,1);		//注册用户信息
		if($data['openid']){			if(!M('member')->find(['openid'=>$data['openid']])){
				$w['openid'] = $data['openid'];
				$w['litpic'] = $params['avatarUrl'];
				$w['city'] = $params['city'];
				$w['username'] = $params['nickName'];
				$w['province'] = $params['province'];
				M('member')->add($w);
			}
			
			
		}
		
	    $info['openid']=$data['openid'];
	    $info['avatar']=$params['avatarUrl'];
	    $info['province']=$params['province'];
	    $info['city']=$params['city'];
	    $info['nickName']=$params['nickName'];
	    JsonReturn(['status'=>1,'info'=>$info]);
    	
    	
    }
    public function doCurl($url)
	{
	    $curl = curl_init();
	    // 使用curl_setopt()设置要获取的URL地址
	    curl_setopt($curl, CURLOPT_URL, $url);
	    // 设置是否输出header
	    curl_setopt($curl, CURLOPT_HEADER, false);
	    // 设置是否输出结果
	    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	    // 设置是否检查服务器端的证书
	    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	    // 使用curl_exec()将CURL返回的结果转换成正常数据并保存到一个变量
	    $data = curl_exec($curl);
	    // 使用 curl_close() 关闭CURL会话
	    curl_close($curl);
		
	    return $data;
	}

路由跳转相关：

常用第一种：
wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }})
  
 //简单使用
 wx.navigateTo({
  url: 'test?id=1'
  })
 返回上一页
 wx.navigateBack({
  delta: 1,
  success: function() {
	  console.log('成功！')
  }

}) 
  
 常用第二种：
 wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 

wx.redirectTo({
  url: 'test?id=1'
  })

数据循环：

<view wx:for="{{array}}"  wx:key="key">
  {{index}}: {{item.message}}
  {{array[index].message}}
</view>
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

条件判断：

<view wx:if="{{condition}}"> True </view>

条件输出：

{{data?'真':'假'}}  //根据data的真假，使用三元运算符输出

小程序模板：

#独立页面存储
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
#其他页面调用
<template is="msgItem" data="{{data}}"/>
//is决定调用哪个部分，data表示传值

小程序Page页面：

Page({
  data: {
    text: "This is page data."  },
  onLoad: function(options) {
    // Do some initialize when page load.  },
  onShow: function() {
    // Do something when page show.  },
  onReady: function() {
    // Do something when page ready.  },
  onHide: function() {
    // Do something when page hide.  },
  onUnload: function() {
    // Do something when page close.  },
  onPullDownRefresh: function() {
    // Do something when pull down.  },
  onReachBottom: function() {
    // Do something when page reach bottom.  },
  onShareAppMessage: function () {
    // return custom share data when user share.  },
  onPageScroll: function() {
    // Do something when page scroll  },
  onResize: function() {
    // Do something when page resize  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'    }, function() {
      // this is setData callback    })
  },
  customData: {
    hi: 'MINA'  }})
data

本文地址： https://codewithtu.cn/miniprogram/18.html