fs-wx-payment-component-uni

付呗-微信小程序支付组件适用于uniapp项目

使用前准备

一. 添加域名

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-uni@latest --save

二. 参考uniapp的小程序自定义组件支持

1. 新增微信小程序自定义组件目录：wxcomponents
2. 将node_modules/fs-wx-payment-component-uni中的所有内容拷贝到wxcomponents/fs-wx-payment-component-uni目录下。
3. pages.json中配置：

{
  "pages":[
    {
      "path":"pages/index/index", // 需要是想用的页面
      "style":{
        "navigationBarTitleText":"uni-app-index",
        "usingComponents":{
          "fs-payment-uni":"/wxcomponents/fs-wx-payment-component-uni/index"
        }
      }
    }
  ]
}

三. 使用

在支付页接入组件

在支付下单页接入组件。

接入步骤

1. 页面.vue文件

<view v-if="{{isShowPayment}}">
  <fs-payment
    id="fsPayment"
    type="payment"
    :appId="appId"
    :openId="openId"
    :vendorSn="vendorSn"
    :secret="secret"
    :qrCodeUrl="qrCodeUrl"
    :goodsTag="goodsTag"
    :themeColor="themeColor"
    @errClick="handleErrBack"
    @cancelPay="cancelPay"
  ></fs-payment>
</view>

3. 页面的 js文件

import Vue from 'vue';

export default Vue.extend({
    data() {
      return {
        appId: '您的小程序appId',
        openId: '用户openId',
        vendorSn: '您的供应商序列号',
        secret: "您的供应商密钥",
        qrCodeUrl: '支付码牌二维码地址',
        goodsTag: "订单优惠标记，代金券或立减优惠功能的参数"
        themeColor: '#32A0FA',
        // 控制组件显示隐藏
        isShowPayment: false
      }
    },
    onLoad() {
      this.isShowPayment = true
      this.openId = new Date().getTime().toString() // 用户唯一标识，这边只是示例
    },
    methods: {
      /**
       * @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.组件事件

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