微信小程序配置支付（附完整代码）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序配置支付（附完整代码）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 微信支付官网配置项

微信小程序配置支付（附完整代码）

初次接入，商户号管理是没有数据的，需要申请接入。
如果是在公司上班，让公司提供相关材料给你就是：
个人开发的小程序，需要注册公司，并且开设对公账户，用于收款。如果怕麻烦，可以挂到别人公司（谨慎处理，涉及到对账什么的）
提交资料，等待审核通过即可（一般1-3天）
如果同一主体下其它小程序有已添加商户，是可以由小程序A接入小程序B的，有关联关系。关联成功如图：
由此，我们会拿到一个唯一的商户号，这个是需要提供给后端的。

2. 代码配置（登录、获取openId、拉起支付等）

a. 完成登录，获取所需参数

  // 小程序加载函数
  onLoad: function (options) {
  	// 获取链接中的参数（非必需，看具体业务）
    this.setData({
      options: options
    })

    // 登录
    wx.login({
      success: res => {
      	// 获取参数
        this.setData({
          code: res.code,  // 微信传过来，做鉴权的
          sign: options.sign // 可选，根据业务来
        })
        if(this.data.options.phone){
          // 如果有电话，获取openId
          this.getOpenId()
        }
      },
      fail: err => {
        console.log(err)
      }
    })
  },

b. 获取openId

  getOpenId(){
    if(this.data.openId) {
    // 调取支付
      this.payFn();
      return
    }
    wx.request({
      method: 'GET',
      header: {
        sign: this.data.sign,
      },
      // 此处的code为上段代码获取到code，用于鉴权，
      // 请求接口，获取openId的时候，必须要带上，不然不知道是哪个用户！！！
      url: app.globalData.baseUrl + 'xxx' + '?jsCode=' + this.data.code,
      success: (res) => {
        console.log(res)
        if(res.data.status != 200) {
          return
        }
        // 存储用户信息 unionid 及 openId 后面支付会用到
        this.setData({
          userInfo: res.data.data
        })
        this.payFn();
      },
      fail: err => {
        console.log(err)
      }
    })
  }

c. 拉起支付

  payFn() {
    let sign = this.data.sign;
 	// 获取订单接口
    wx.request({
      method: 'POST',
      // 非必需的参数
      header: {
        sign: sign,
      },
      url: app.globalData.baseUrl + '/inner-crm/getOrder',
      data: {
        phone: this.data.options.phone,
        clickId: this.data.options.clickId,
        event: this.data.options.event,
        clueId: this.data.options.clueId,
        openId: this.data.userInfo.openid,
        unionid: this.data.userInfo.unionid
      },
      // 上一个接口成功，继而拉起支付（这里的逻辑也不是固定的，看需求来）
      // 因拉起支付接口的入参是从上一个接口来的
      success: (res) => {
        wx.requestPayment({
          timeStamp: res.data.data.timeStamp,  // 时间戳，必填
          nonceStr: res.data.data.nonceStr,    // 随机字符串，必填
          package: res.data.data.packages,    // 统一下单接口返回的 prepay_id 参数值，必填
          signType: "MD5",	// 签名算法 （非必填）
          paySign: res.data.data.paySign, // 签名，必填
          success(res) {
          	// 换成自己的逻辑即可
            wx.reLaunch({
              url: '/pages/xxx/index?sign='+sign,
            })
          },
          fail(err) {
            console.log('err:',err)
          }
        })
      }
    })
  },

3. 云开发示例

如果服务端有使用云开发，可以通过云开发微信支付统一下单接口免鉴权获取以上所需所有参数：

// 云函数代码
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (event, context) => {
  const res = await cloud.cloudPay.unifiedOrder({
    "body" : "小秋TIT店-超市",
    "outTradeNo" : "1217752501201407033233368018",
    "spbillCreateIp" : "127.0.0.1",
    "subMchId" : "1900009231",
    "totalFee" : 1,
    "envId": "test-f0b102",
    "functionName": "pay_cb"
  })
  return res
}

// 小程序代码
wx.cloud.callFunction({
  name: '函数名',
  data: {
    // ...
  },
  success: res => {
    const payment = res.result.payment
    wx.requestPayment({
      ...payment,
      success (res) {
        console.log('pay success', res)
      },
      fail (err) {
        console.error('pay fail', err)
      }
    })
  },
  fail: console.error,
})