# fs-advertisement-component

业务方发券组件。使用前需申请微信发券插件使用权限。

## 使用前准备

### 一. 申请发券插件使用权限

1. 小程序账号登录[微信公众平台][01]
2. 设置 —> 第三方服务 —> 添加插件 进入添加插件操作页面
3. 搜索插件名 `微信支付券` 并添加, 提交审核待通过

### 二. 在小程序 app.json 文件中加入配置

```json
// app.json
{
  "plugins": {
    "sendCoupon": {
      "version": "1.1.5",
      "provider": "wxf3f436ba9bd4be7b"
    }
  }
}
```

### 三. 添加 downloadFile 合法域名

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

```text
https://cdn.haowuji123.com
https://wx.qlogo.cn
```
4. 在 `request合法域名` 中增加如下配置

```text
https://ad-server.51fubei.com
https://event-upload.51fubei.com
```

## 使用方法

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

```bash
npm install fs-advertisement-component
npm install fshows-logger  
```

### 二. 构建

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

### 三. 使用

- 支付页添加组件
- 页面的 json 文件中做如下配置

```json
// index.json
{
  "usingComponents": {
    "fs-advertisement-component": "fs-advertisement-component"
  },
}
```

- 在页面 wxml 文件中引使用该组件(隐藏组件，支付完成后显示组件)

```html
<!-- index.wxml -->
<fs-advertisement-component  wx:if="{{showfsad}}"  id="fsAd" token="token" openid="openid" locName="loc_name">
</fs-advertisement-component>
```

- 触发广告
~~~js
 this.setData({
      showfsad: true,
  })
 const test = this.selectComponent('#fsAd')
 test.getCoupon() // 子组件的方法
~~~

注：该方法应当写在  wx.requestPayment 的success函数中，否则无法唤起广告小程序

- app.json 新增修改

~~~~json
 "embeddedAppIdList": [
    "wx....",
    "wx...."
  ]
~~~~

此项为半屏打开广告小程序的appId，官方见https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/openEmbeddedMiniProgram.html

- 参数说明  

  | 变量 | 类型 | 必填? | 说明 |
  |:----|:----:|:----:|:----|
  | token | String | 是 | 用户 token， 业务方提供的字段 |
  | openid | String | 是 | 用户 openid |
  | locName | String | 是 | 流量位标识， 业务方提供的字段 |
  | extendParam | String | 是 | json字符串，扩展参数 {'adId': 业务方提供的字段, 'scene': 1000} |
  | isShowAdPop | Boolean | 是 | 是否显示业务方广告弹窗 |
  | haveNavBar | Boolean | 否 | 是否有顶部导航栏 |

### Tips

1. 如果你的必传参数中，有异步获取的，请通过wx:if，在获取参数后再进行组件的一个显示，以防提示缺少必传参数

---

[01]: https://mp.weixin.qq.com/
[npm支持]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html