微信小程序支付与授权与文件上传

微信小程序支付与授权

1.先登录

一、页面

<view class="container">

  <button disabled="{{disabled}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号授权</button>

</view>

<button disabled="{{disabled}}" bindtap="getUserProfile">获取用户信息</button>

二、js

1.页面初始化就调用wx.login方法
 

 onLoad() {

    wx.login({

      success: res => {

        let code = res.code;

        this.setData({

          logincode:code

        }) 

      }

    })

2.bindtap方法

getPhoneNumber(e){
      console.log(JSON.stringify(e)); 
      //设置按钮为disable
      this.setData({ disabled:true});
      if(e.detail.errMsg=="getPhoneNumber:fail user deny"){
        wx.showToast({
          title: '你点击了取消按钮',
          icon: "none"
        });
       //恢复按钮为disable：false
        this.setData({ disabled:false});

      }else{
        wx.showLoading({
          title: '登录中...', 
        })
        //手机验证登录之前 就是为了拿到 encryptedData 和 iv
        //页面初始化时候就已经调用了  wx.login   获得到logincode
        wx.request({
          url: app.globalData.requeUrl + '',
          method: "POST",
          data: {
            code: this.data.logincode,
            action: "PhoneOauthLogin",
            encryptedData: e.detail.encryptedData,
            iv: e.detail.iv
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          success: res => {
            wx.hideLoading();
            console.log(res);
             //res.data.code== 1 表示请求成功
             if(res.data.code == 1){
                //openid不为空  就存起来
                if (res.data.openid) {
                  wx.setStorageSync("openid", res.data.openid)
                }
                if(res.data.data.phoneNumber == null){
                  wx.showToast({
                    title: '授权失败，请重试',
                    icon: "none"
                  })
                  this.setData({ disabled:false});
                }else{
                   //手机号不为空 Cookie就存起来
                  wx.setStorageSync('sessionid', res.header['Set-Cookie']);
                  wx.showToast({
                    title: "授权成功",
                    icon: "none"
                  })
                  wx.reLaunch({
                    url: '../zhifu/zhifu',
                  })
                }
             }else {
              wx.showToast({
                title: "授权失败，请重试",
                icon: "none"
              })
            }
          },
        })
      }}

2.支付

一、bindtap方法

<cover-view class="pay-foot clearfix sdgjs">
    <button class="sdgjs" bindtap="payNow" class="fr suborder">确认支付</button>
</cover-view>

二、js代码

payNow(){
   //先获取有没有cookie
    var cookie = wx.getStorageSync("sessionid");
    if(cookie){
         wx.request({
          url: app.globalData.requeUrl + '',
          method: "POST",
          data: {
            action: 'OpeatePayOrder',
            addressid:236, //地址id
            receivetime: 0,  //配送时间
            paytype: 1,     //支付状态
            freight: 0,    
            remark: ''     
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
            'cookie': wx.getStorageSync("sessionid")//读取cookie
          },
          success: res =>{
            console.log(res) 
            if (res.data.code == -1 && res.data.msg == "未登陆无权访问！") {
              this.noCookie();
            }else{
              if (res.data.code >= -1) {
                //这是订单号  我就写死值了
                var out_trade_no ="LK1499967092202103111139222690";
                wx.request({//支付
                  url: app.globalData.requeUrl + '',
                  method: "POST",
                  data: {
                    action: 'topay',
                    orderid: 3153,   //订单id   我这里写的死值  
                    openid: wx.getStorageSync("openid")  //传的授权时候的openid
                  },
                  header: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    'cookie': wx.getStorageSync("sessionid")//读取cookie
                  },
                  success: res => {
                    //请求成功后获得这些数据   通过wx.requestPayment 进行微信的api接口调用
                    console.log(res)
                    wx.requestPayment({
                      timeStamp: res.data.timeStamp,
                      nonceStr: res.data.nonceStr,
                      package: res.data.package,
                      signType: 'MD5',
                      paySign: res.data.paySign,
                      'notify_url':'', //回调地址
                      success (res) { 
                        wx.request({
                          url: app.globalData.requeUrl + '',
                          method: "POST",
                          data: {
                            action: 'PayStatus',
                            out_trade_no: out_trade_no    //订单号
                          },
                          header: {
                            "Content-Type": "application/x-www-form-urlencoded",
                            'cookie': wx.getStorageSync("sessionid")//读取cookie
                          },
                          success: res => {
                            console.log(res)
                            wx.showToast({
                              title: res.data.msg,
                              icon: "none"
                            })
                          }   
                        })
                      },
                      fail (res) { 
                        wx.showToast({
                          title: "已经取消支付",
                          icon: "none"
                        })
                        wx.redirectTo({
                          url: '/pages/car/car',
                        })
                      }
                    })
                  }
              })
            }else{
              wx.showToast({
                title: res.data.msg,
                icon:"none"
              })
            }
            }
          }
         }) 
    }else{
      this.noCookie();
    }
  },
  noCookie(){
    wx.showModal({
      title: '登录状态通知',
      content: '登陆超时，请重新登录',
      showCancel: true,//是否显示取消按钮
      confirmText: "立刻登录",//默认是“确定”
      cancelText: "我先看看",//默认是“取消”
      confirmColor: '#cd0900',//确定文字的颜色
      success: function (res) {
        if (res.cancel) {
        } else { 
          wx.navigateTo({
            url:"/pages/index/index"
          })
        }
      }
    })
  },

3.位置定位

1.页面代码

<button bindtap="getLocation" style='width:100%'>
<input type="text" placeholder="选择收货址" value='{{chooseAddress}}' disabled="true"></input>
<text class="fl van-icon cuIcon-right lg text-gray"></text>
</button>

2.js代码

data: {
    lat:"",
    lng:"",
    chooseAddress:''
  },
  getLocation(){
    var that = this;
    wx.chooseLocation({
      success (res) {
        console.log(res)
        that.setData({
          let:res.latitude,
          lng:res.longitude,
          chooseAddress:res.address
        })
      }
    })
  },

4.授权https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.openSetting.html

wx.authorizeForMiniProgram({
  scope: 'scope.record',
  success () {
    // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
    wx.startRecord()
  }
})

 3.微信小程序图片上传

1.页面编写

<view class="grid col-4 grid-square flex-sub">
	<view class="bg-img" wx:for="{{fileList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{fileList[index]}}">
		<image src='{{imgurl+fileList[index]}}' mode='aspectFill'></image>
		<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
			<text class="cuIcon-close"></text>
		</view>
	</view>
	<view class="solids" bindtap="ChooseImage" wx:if="{{fileList.length<4}}">
		<text class="cuIcon-cameraadd"></text>
	</view>
</view>

 2.js代码

ChooseImage() {
    var that=this;
    wx.chooseImage({
      count: 4, //默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], //从相册选择
      success: (res) => {
        wx.showLoading({
          title: '加载中...',
          mask: true
        }); 
        if (that.data.imgList.length != 0) {
          that.setData({
            imgList: that.data.imgList.concat(res.tempFilePaths)
          })
        } else {
          that.setData({
            imgList: res.tempFilePaths
          })
        } 
        const tempFilePaths = res.tempFilePaths
        console.log(that.data.imgList)
        let url = [];
        for (let i = 0; i < tempFilePaths.length; i++) {
          wx.uploadFile({
            url: app.globalData.requeUrl + '/api/WebUpload/uploadImg', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[i],
            name: 'file',
            formData: {
              'user': 'test'
            },
            success (res){
              wx.hideLoading();
              url.push((JSON.parse(res.data)).picturePath); 
              console.log(url)
              that.setData({
                fileList:url
              })
            },
            fail:function(data){
               wx.hideLoading();
               wx.showToast({
                 title: '上传失败',
                 icon:'none'
               })
            }
          })
        }
      }
    });
  },

3.查看和删除 

  ViewImage(e) {
    wx.previewImage({
      urls: this.data.imgList,
      current: e.currentTarget.dataset.url
    });
  },
  DelImg(e) {
    var that=this;
    let index=e.currentTarget.dataset.index;
    wx.showModal({
      title: '提示信息',
      content: '确定要删除这张照片吗？',
      cancelText: '取消',
      confirmText: '确定',
      success: res => {
        if (res.confirm) {
          wx.request({
            url: app.globalData.requeUrl + '/api/WebUpload/DelImg',
            method: 'get',
            data: {
              fileparth:that.data.fileList[e.currentTarget.dataset.index],
            },
            header: {
              'content-type': 'application/json',
              // 'TokenValue':wx.getStorageSync('Token'),
            },
            success(res) {
              console.log(res)
              if(res.data.success==true){
                that.data.fileList.splice(index, 1);
                that.setData({
                  fileList: that.data.fileList
                })
              }else{
                Dialog.alert({
                  title: '提示信息',
                  message: '删除图片失败,网络开了个小差,请稍后重试！',
                }).then(() => {
                  // on close
                });
              }
            }
          }) 
        }
      }
    })
  },