微信小程序纯签约和纯支付的一点总结和遇到的问题

一、微信公众平台微信小程序开通微信支付和绑定公司商户号

二、小程序调起微信纯签约

微信支付-扣费服务开发者文档

小程序纯签约就是从商户小程序（开发者的小程序）跳转到微信的签约小程序，然后签约完成再跳转到商户小程序的一个过程；

小程序场景唤起签约流程API - 保险委托代扣 | 微信支付商户文档中心

其中微信的签约小程序的 appid,path都是写死的，pre_entrustweb_id是后端调用小程序场景预签约接口返回的签约会话ID，当然这些参数可以让后端一并传过来；

appId: 'wxbd687630cd02ce1d', // 预签约返回的redirect_appid
path: 'pages/index/index', // 预签约返回的redirect_path

handleJumpPaySign(query) {
      console.log('paySign-query', query)
      wx.navigateToMiniProgram({
        appId: decodeURIComponent(query.appId), // 预签约返回的redirect_appid
        path: decodeURIComponent(query.path), // 预签约返回的redirect_path
        extraData: {
          pre_entrustweb_id: decodeURIComponent(query.preEntrustwebId), // 预签约返回的pre_entrustweb_id
        },
        // type: 'spx',
        // payResult: query.payResult
        success(res) {
          // 成功跳转到签约小程序 
        },
        fail(res) {
          // 未成功跳转到签约小程序,则重定向到结果页面
          wx.navigateTo({ url: `/pages/commonWebview/commonWebview?url=${query.payResult}` });
        },
      });
    },

注意如果appid，path,pre_entrustweb_id，参数传错误或者缺失就会报如下错误： 

暂无法开通此服务，商家服务异常，请联系商家处理；

如果正常跳转到签约页面是这样的

点击我知道了，调用wx.navigateToMiniProgram跳转到签约小程序

最后一步就是回调处理：

onShow: function (res) {
    // console.log('onLaunch-app')
    console.log('app-js', res, 'res.query', res.query)
    const query = res.query
    if (res.scene === 1038) { // 场景值1038：从被打开的小程序返回
      const { appId, extraData } = res.referrerInfo
      if (appId == 'wxbd687630cd02ce1d') { // appId为wxbd687630cd02ce1d：从签约小程序跳转回来
          if (typeof extraData == 'undefined'){
              // TODO
              // 客户端小程序不确定签约结果，需要向商户侧后台请求确定签约结果
              if(query.type === 'spx') {
                wx.navigateTo({ url: `/pages/commonWebview/commonWebview?url=${query.payResult}` });
              }
              return;
          }
          if(extraData.return_code == 'SUCCESS'){
              console.log('-签约成功-',query)
              // type: 'spx',
              // payResult: query.payResult
              if(query.type === 'spx' && query.payResult) {
                wx.navigateTo({ url: `/pages/commonWebview/commonWebview?url=${query.payResult}` });
              } else {
                wx.navigateBack({
                  delta: 1
                })
              }
              // TODO
              // 客户端小程序签约成功，需要向商户侧后台请求确认签约结果
              // var contract_id = extraData.contract_id
              return;
          } else {
              // TODO
              // 签约失败
              console.log('-签约失败-')
              if(query.type === 'spx' && query.payResult) {
                // 碎片险签约成功失败都会跳转到统一的结果页
                wx.navigateTo({ url: `/pages/commonWebview/commonWebview?url=${query.payResult}` });
              } else {
                wx.navigateBack({
                  delta: 1
                })
              }
              return;
          }
        }
    }
  },

商户小程序页面跳转到签约小程序的时候所携带的参数会在签约小程序跳转回商户小程序的时候原封不动得返回，在app.js的onShow(options)的options.query中可以获取；

例如从下面链接跳转到签约小程序，那么签约完成点击 我知道了之后跳回商户小程序的时候,会把后面的appId,path,type等参数放到query中返回，可以通过options.query.type来判断是从哪个签约场景返回来的；

`/packageA/pages/paySign/paySign?appId=${encodeURIComponent(objPay.redirect_appid)}&path=${encodeURIComponent(objPay.redirect_path)}&preEntrustwebId=${encodeURIComponent(objPay.pre_entrustweb_id)}&payResult=${encodeURIComponent(payResult)}&type=spx`

二、微信纯支付

微信纯支付和纯签约的我这边的使用场景就是保险产片支付方式 一次性缴费和分期缴费，分期缴费使用纯签约，一次性缴费使用纯支付

小程序提供支付页面的路径给到保险产品H5方，H5发起支付的时候跳转回提供的小程序支付页面，并且把支付参数带过来，根据参数判断是走纯签约还是纯支付

微信小程序发起微信纯支付的文档：

wx.requestPayment(Object object) | 微信开放文档

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('pay-进入onload', options)
    this.requestPayment(options)
  },
  requestPayment(obj) {
    var that = this
    let objPay = JSON.parse(decodeURIComponent(obj.payData));
    console.log('objPay',objPay)
    if(objPay.redirect_path) {
      // 纯签约
      const payResult = decodeURIComponent(obj.payResult)
      const url = `/packageA/pages/paySign/paySign?appId=${encodeURIComponent(objPay.redirect_appid)}&path=${encodeURIComponent(objPay.redirect_path)}&preEntrustwebId=${encodeURIComponent(objPay.pre_entrustweb_id)}&payResult=${encodeURIComponent(payResult)}&type=spx`
      wx.navigateTo({
        url: url
      })
    } else {
      // 纯支付
      let paySuccessUrl = decodeURIComponent(obj.payResultSuccess);
      let payFailUrl = decodeURIComponent(obj.payResultFail);
      console.log(paySuccessUrl)
      console.log(payFailUrl)
      wx.requestPayment({
        timeStamp: objPay.timeStamp,
        nonceStr: objPay.nonceStr,
        package: objPay.package,
        signType: objPay.signType,
        paySign: objPay.paySign,
        success(res) {
          console.log('支付成功')
          console.log(`/pages/commonWebview/commonWebview?url=${paySuccessUrl}`)
          wx.navigateTo({ url: `/pages/commonWebview/commonWebview?url=${encodeURIComponent(paySuccessUrl)}` });
        },
        fail(res) {
          console.log('支付失败');
          console.log(`/pages/commonWebview/commonWebview?url=${payFailUrl}`)
          wx.navigateTo({
            url: `/pages/commonWebview/commonWebview?url=${encodeURIComponent(payFailUrl)}`
          })
        },
      })
    }
  },

当然场景分流逻辑还得看你们产品需求设计，代码没有封装成通用的组件，仅仅展示了基本用法和遇到的一些问题，如有不足请指正，有问题可以评论探讨！