App跳转小程序支付

先放出官方文档：

• App拉起小程序：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Launching_a_Mini_Program.html
• 小程序打开App：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

官方文档已经写的比较清楚了，也有对应的示例，App开发同事直接用就行了。下面主要说小程序的支付：

在微信小程序里面新建一个页面 appWxaPay，在 onLoad 里面获取 options 的支付参数，直接调小程序支付API即可。

小程序支付主要用到API：wx.requestPayment

返回App主要用button组件 open-type="launchApp"：

点击返回商户

重要：第一次做这个，前面对它们这个原理机制没搞清楚，一直纠结在放 onLoad 还是 onShow 里，各种问查没结果。。。然后和App同事沟通再联调验证，app每次跳小程序页会销毁重开，所以写 onLoad 里就行了，App每次跳过来都会触发到 onLoad。

WXML 代码

  
    
      
        支付中..
      
      
        
        支付成功，请返回商户
      
      
        
        您已取消支付
      
      
        
        支付失败，请重新支付
      
    
    
      重新支付
    

    
      点击返回商户
    
    
      点击返回商户
    
  

WXSS 代码

.page {
  position: relative;
  height: 100%;
  background-color: #fff;
}
.content{
  padding: 0 40rpx;
  color: #666;
}
.status-box{
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
  
.pay-button{
  margin-bottom: 30rpx;
}
  
.pay-icon{
  margin-bottom: 30rpx;
}

JS 代码

Page({
  data: {
    isLoading: false,
    isSuccess: false,
    isFail: false,
    isCancel: false,
    timeStamp: '',
    nonceStr: '',
    package: '',
    paySign: '',
    status: 0, // 0: 已取消(未付)，1：已支付，2：支付失败
  },
  
  onLoad: function (options) {
    var that = this;
    that.setData({
      timeStamp: options.timeStamp || '',
      nonceStr: options.nonceStr || '',
      package: options.package || '',
      paySign: options.paySign || ''
    })
    that.toPayApp()
  },
  toPayApp() {
    var that = this
    if (!that.data.timeStamp || !that.data.nonceStr || !that.data.package || !that.data.paySign) {
      wx.showToast({
        title: '无效的支付请求，请返回商户重试',
        icon: 'none'
      })
      return false
    }
    if (that.data.isLoading) {
      return false
    }
    that.setData({ isLoading: true })
    wx.requestPayment({
      timeStamp: that.data.timeStamp,
      nonceStr: that.data.nonceStr,
      package: that.data.package,
      signType: 'MD5',
      paySign: that.data.paySign,
      success: function(res) {
        that.setData({ isLoading: false, isSuccess: true, status: 1 })
        wx.showToast({
          title: '支付成功，请返回商户',
        })
      },
      fail: function(res) {
        if (res.errMsg === "requestPayment:fail cancel") {
          that.setData({ isLoading: false, isCancel: true, status: 0})
          wx.showToast({
            title: '您已取消支付',
          })
        } else {
          that.setData({ isLoading: false, isFail: true, status: 2 })
          wx.showToast({
            title: '支付失败，请重新支付',
            icon: 'none'
          })
        }
      }
    })
  },
  launchAppError (e) {
    console.log(e.detail.errMsg)
  }
});