fs-wx-payment-component

微信小程序支付组件

使用前准备

一. 添加域名

1. 小程序账号登录微信公众平台
2. 开发 —> 开发管理 —> 开发设置 —> 服务器域名
3. 在 request合法域名 中增加如下配置

https://shq-api.51fubei.com
https://fubeiminagw.51youdian.com
https://api.51youdian.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com

使用方法

一. npm 安装, 参考 小程序 npm 支持

npm install fs-wx-payment-component@latest --save

二. 构建

1. 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用 npm 模块
2. 小程序开发者工具 -> 工具 -> 构建 npm
3. 构建成功后小程序代码包中将产出 "miniprogram_npm" 文件夹

三. 使用

在支付页接入组件

使用场景：支付页和支付结果页在同一页面下。 组件引入位置：支付页。

接入步骤

1. 页面的 json 文件中做如下配置

{
  "usingComponents": {
    "fs-payment": "fs-wx-payment-component"
  }
}

2. 页面的 wxml文件

<view wx:if="{{isShowPayment}}">
  <fs-payment
    id="fsPayment"
    type="payment"
    appId="您的小程序appId"
    openId="用户openId"
    vendorSn="您的供应商序列号"
    secret="您的供应商密钥"
    qrCodeUrl="支付码牌二维码地址"
    goodsTag="订单优惠标记，代金券或立减优惠功能的参数"
    themeColor="页面主题色"
    bind:errClick="handleErrBack"
    bind:cancelPay="cancelPay"
  ></fs-payment>
</view>

3. 页面的 js文件

Page({
  data: {
    appId: '您的小程序appId',
    openId: '用户openId',
    vendorSn: '您的供应商序列号',
    secret: '您的供应商密钥',
    qrCode: '支付码牌二维码地址',
    goodsTag: "订单优惠标记，代金券或立减优惠功能的参数"
    themeColor: '#32A0FA',
    // 控制组件显示隐藏
    isShowPayment: false
  },
  onLoad () {
    // 加载组件
    this.setData({
      isShowPayment: true,
    })
  },
  /**
   * @function 支付组件错误页-点击返回
   * @param {event} e
   */
  handleErrBack (e) {
    console.log('支付组件错误页点击了返回，我要在这里执行路由返回操作哦~', e)
  },
  /**
   * @function 用户取消支付
   * @param {event} e
   */
  cancelPay (e) {
    console.log('用户取消支付~', e)
  }
})

注意事项

• 如果必传参数openId是异步获取的，请通过wx:if，确保在获取openId参数后再进行组件的一个显示，以防提示缺少必传参数

四. 组件参数说明

1.组件属性

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | type | String | 是 | 组件类型： 支付组件为 payment | | appId | String | 是 | 应用appId | | openId | String | 是 | 用户openId | | vendorSn | String | 是 | 供应商序列号 | | secret | String | 是 | 供应商序秘钥 | | qrCodeUrl | String | 是 | 支付码牌二维码地址 | | goodsTag | String | 否 | 订单优惠标记，代金券或立减优惠功能的参数 | | themeColor | String | 否 | 页面主题色： 默认值为#32A0FA | | extentInfo | Object | 否 | 额外字段（对象内字段以下划线命名：demo_info） |

2.组件事件

| 事件名 | 类型 | 说明 | |:----|:----:|:----:| | bind:errClick | click | 组件错误页点击返回按钮事件（开发者需在页面预留回调函数，进行相应的路由回退操作） | | bind:cancelPay | click | 用户点击取消支付 |