App跳转小程序支付

Dear 丶 2022-12-05 12:09 223阅读 0赞

先放出官方文档：

App拉起小程序：[https://developers.weixin.qq.com/doc/oplatform/Mobile\_App/Launching\_a\_Mini\_Program/Launching\_a\_Mini\_Program.html][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][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_launchApp.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70][]

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

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

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

**返回App主要用button组件open-type="launchApp"：<button type="primary" open-type="launchApp" app-parameter="\{ \{status\}\}" binderror="launchAppError">点击返回商户</button>**

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

<view class="page container">
      <view class="content">
        <view class="status-box">
          <block wx:if="{
       {isLoading}}">
            <view>支付中..</view>
          </block>
          <block wx:if="{
       {isSuccess}}">
            <icon type="success" size="50" class="pay-icon"></icon>
            <view>支付成功，请返回商户</view>
          </block>
          <block wx:if="{
       {isCancel}}">
            <icon type="warn" size="50" class="pay-icon" color="#C9C9C9"></icon>
            <view>您已取消支付</view>
          </block>
          <block wx:if="{
       {isFail}}">
            <icon type="cancel" size="50" class="pay-icon"></icon>
            <view>支付失败，请重新支付</view>
          </block>
        </view>
        <block wx:if="{
       {isFail || isCancel}}">
          <button type="primary" class="pay-button" bindtap="toPayApp">重新支付</button>
        </block>
        <block wx:if="{
       {isLoading}}">
          <button type="primary" disabled="true">点击返回商户</button>
        </block>
        <block wx:else>
          <button type="primary" open-type="launchApp" app-parameter="{
       {status}}" binderror="launchAppError">点击返回商户</button>
        </block>
      </view>
    </view>

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)
      }
    });

.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;
    }

[https_developers.weixin.qq.com_doc_oplatform_Mobile_App_Launching_a_Mini_Program_Launching_a_Mini_Program.html]: https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Launching_a_Mini_Program.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_launchApp.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70]: /images/20221123/ea1a8833c83d4dc689ed4efbf728fce2.png