收款配置-小程序对接

### 小程序对接
![](/media/202408/2024-08-05_172800_5276650.9583247243620383.png)

在收款配置中选择小程序支付产品时，需要业务方进行小程序对接。首先在预览页中获得活动作品链接，并拼接上用户授权code和用户openId。其次需要新建一个支付页面用于唤起微信支付和展示支付成功和失败后的h5链接(h5付费报名链接)。具体步骤如下：

### 作品预览页   --> pages/index/index
#### index.wxml
```javascript
<web-view src="{{workLink}}"/>
// workLink为作品链接
```
#### index.ts
```javascript
Page({
  data: {
    workLink: '',  // 作品链接
  },
  onLoad: async function (options) {
    //作品链接 例：
    let link = "http://www.eqxiu.cn/v/232323?cc=sdasda"
    /** 
	1. 业务方需调取相关接口获得授权code和openId；将openId和授权code作为参数拼接在h5链接中；发起支付wxOpenId为必传，code做授权用。
	*/
    const linkQuery = `&code=${code}&wxOpenId=${openid}`
    this.setData({
      workLink: `${link}${linkQuery || ''}`
    });
	//最终作品链接如下：http://www.eqxiu.cn/v/232323?cc=sdasda&code=${用户授权code}&wxOpenId=${用户openid}
  },
```
### 支付页 pages/eqx-pay/eqx-pay（固定支付页面）
#### eqx-pay.wxml
```javascript
<web-view src="{{h5Link}}"/>
//h5Link为h5付费作品
```
#### eqx-pay.ts
```javascript
Page({
  data: {
    h5Link: '',  // h5付费作品链接
    payParams: {
    }
  },
  onLoad(options) {
    if (options.eqxPayParams && typeof options.eqxPayParams === 'string') {
      let eqxPayParams = this.unBase64Action(options.eqxPayParams);
      // 获取支付要素调用微信支付api发起支付
      this.eqxPayAction(eqxPayParams);
    }
  },
  atob(str) {
    const buff = wx.base64ToArrayBuffer(str);
    let binary = '';
    const bytes = new Uint8Array(buff);
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return binary;
  },
  unBase64Action(base64Data) {
    let unBase64Data = this.atob(base64Data)
    try {
      return JSON.parse(unBase64Data || '');
    } catch (e) {
      let r = unBase64Data
      return r
    }
  },
  eqxPayAction(eqxPayParams) {
    let _this = this;
    let h5Link = eqxPayParams?.linkurl || "";
    wx.requestPayment(
      {
        "timeStamp": eqxPayParams.timeStamp,
        "nonceStr": eqxPayParams.nonceStr,
        "package": eqxPayParams.packageValue,
        "signType": eqxPayParams.singType,
        "paySign": eqxPayParams.paySign,
        "success": function (res) {
          // 支付成功，需要调用 ---跳转支付成功页
          _this.setData({
            h5Link: `${h5Link}&toPageId=${eqxPayParams?.pageIdSuccess}`
          });
        },
        "fail": function (res) {
          // 支付失败，需要调用
          _this.setData({
            h5Link: `${h5Link}&toPageId=${eqxPayParams?.pageIdFail}`
          });
        },
      })
  },
})
```