微信小程序微信支付

先上实用的相关代码：

<!--index.wxml-->
<button bindtap='pay' >pay</button>

Page({
  	pay: function () {
     console.log('ss')
    var that = this
    wx.request({
       url: '(这里当然是从服务器获取后端的连接了..哈哈)/pay.php',
       method: 'POST',
       header: {
         "Content-Type": "application/x-www-form-urlencoded"
       },
     	data: { 'openid': that.data.openid },
      	success: function (res) {
       	console.log(res.data)
          wx.requestPayment({
           'timeStamp': res.data.timeStamp + '',
           'nonceStr': res.data.nonceStr,
           'package': res.data.package,
           'signType': 'MD5',
           'paySign': res.data.paySign,
           'success': function (res) {
            console.log(res)
            console.log('支付成功~~')
           },
           'fail': function (res) {
             console.log(res)
             console.log('支付失败~~')
           },
          'complete': function (res) { },
         })
       }
     })
   },
  onLoad: function () {
      var that = this
      wx.login({
        success(res) {
        console.log(res.code)
          wx.request({
           url: '(这里也是服务器.....)/openId.php',
           method: 'POST',
           header: {
             "Content-Type": "application/x-www-form-urlencoded"
           },
           data: {
            'code': res.code
           },
           success: function (res) {
             console.log(res.data)
             that.setData({ 'openid': res.data })
           }
         })
       }
     })
   },
})

流程：
1. 登录微信公众平台, 开通微信支付功能
这是准备工作的第一步, 确保小程序对应的支付功能已经开启

2.登录微信商户平台
该步骤需要获取两个参数, 一个是商户号, 一个是支付秘钥, 如下图所示

注意秘钥自己要保护好,相当于支付密码,每次签名都需要该参数, 该参数只能设置的时候看得见,其余的时候是没法看得见.所以要记好了!
3. 准备完毕, 小程序代码
微信小程序发起支付的请求到开发者服务器, 后台预下单返回一个prepay_id, 还有其他乱七八糟的参数.然后微信小程序调用支付方法进行支付, 最后微信服务器会发起回调函数到开发者服务器.
先贴一段微信的测试代码,微信统一下单必须要openId参数:

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  onLoad: function () {
    console.log('onLoad')
    
  },
  //
  payoff: function(e){
    var that = this;
      console.log('zhixingle')
    wx.login({
      success: function(res) {
          wx.getUserInfo({
             
              success: function(re) {
                  that.getAddress(re,res.code);
              },
              fail: function () {
                  console.log('失败了')
              }
          })
      }
      
    });
    
  },
  // 获取用户的收货地址
    getAddress: function (re,code) {
      var that = this;
      wx.chooseAddress({
          success: function (add) {
              that.getOpenId(re, add.userName,add.provinceName,add.cityName,add.countyName,
              add.detailInfo,add.telNumber,code);
          }
      })
  },
  //获取openid
  getOpenId: function(re, userName, provinceName, cityName, countryName, detailInfo, telNumber,code){
    var that = this;
    wx.request({ 
        // 开发者服务器地址
        url: 'http://1d7a111.iok.la:10534/api/getUnionId', 
        method: 'POST',
        header: {
           'content-type': 'application/x-www-form-urlencoded'
        },
        data: { encryptedData: re.encryptedData, iv: re.iv, code: code },
        success: function(res) {
            var openId = res.data.userInfo.openId;
            var unionId = res.data.userInfo.unionId;
            // console.log('res>', openId);
            that.loginPlatform(userName, provinceName, cityName, countryName, detailInfo, telNumber,unionId, openId);
          
        }
    })
  },
 
  // 登录
    loginPlatform: function (userName, provinceName, cityName, countryName, detailInfo, telNumber,unionId, openId) {
        var that = this;
        wx.request({
            url: 'http://1d7a111.iok.la:12534/api/login/platform',
            method: 'POST',
            header: {
                'content-type': 'application/json'
            },
            data: { unionId: unionId, platform: 'WECHAT' },
            success: function(res) {
                console.log('res', res.data.token);
                var token = res.data.token;
                that.xiadan(userName, provinceName, cityName, countryName, detailInfo, telNumber,openId, token);
            }
        })
    },
  //下单
    xiadan: function (userName, provinceName, cityName, countryName, detailInfo, telNumber,openId, token){
    console.log('openId', openId);
    console.log('token', token);
    var that = this;
    wx.request({
        url: 'http://1d7a01111.iok.la:12534/api/v1/weixin/payment', 
        method: 'POST',
        header: {
            'content-type': 'application/json',
            'authorization': 'Bearer ' + token
        },
        data: {
            openId: openId,
            cfId: '5b32f553aff8ca411f839eb4', 
            planId: '5b32f5cbaff8ca111f839eb7',
            quantity: 2,
            orderRemark: '说点啥备注好?',
            name: userName,
            phone: telNumber,
            province: provinceName,
            city: cityName,
            district: countryName,
            address: detailInfo
        },
        success: function(res) {
            console.log('res>>>',res)
            that.requestPayment(res.data.data);
        }
    })
  },
 
  //申请支付
  requestPayment: function(obj){
      console.log('obj>>',obj)
    wx.requestPayment({
      'timeStamp': obj.timeStamp,
      'nonceStr': obj.nonceStr,
      'package': obj.package,
      'signType': obj.signType,
      'paySign': obj.paySign,
      'success':function(res){
      },
      'fail':function(res){
      }
    })
  }  
})

4. 后端统一下单和支付回调接口
接下来是后台代码了

参考博客：
https://blog.youkuaiyun.com/weixin_43500236/article/details/84875350
https://blog.youkuaiyun.com/qq_37105358/article/details/81285779