# fs-wx-payment-component

微信小程序支付组件

## 使用前准备

### 一.  添加域名
1. 小程序账号登录[微信公众平台](https://mp.weixin.qq.com/)
2. 开发 —> 开发管理 —> 开发设置 —> 服务器域名
3. 在 `request合法域名` 中增加如下配置
```text
https://shq-api.51fubei.com
https://fubeiminagw.51youdian.com
https://api.51youdian.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com
```

## 使用方法
### 一. npm 安装, 参考 [小程序 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
```bash
npm install fs-wx-payment-component@latest --save
```

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

### 三. 使用
#### 在支付页接入组件

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

**接入步骤**

1. 页面的 json 文件中做如下配置
```json
{
  "usingComponents": {
    "fs-payment": "fs-wx-payment-component"
  }
}
```
2. 页面的 wxml文件
```html
<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文件
```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` | 用户点击取消支付 |