fs-advertisement-component

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

使用前准备

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

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

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

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

三. 添加 downloadFile 合法域名

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

https://cdn.haowuji123.com
https://wx.qlogo.cn

4. 在 request合法域名 中增加如下配置

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

使用方法

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

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

二. 构建

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

三. 使用

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

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

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

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

• 触发广告

 this.setData({
      showfsad: true,
  })
 const test = this.selectComponent('#fsAd')
 test.getCoupon() // 子组件的方法

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

• app.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，在获取参数后再进行组件的一个显示，以防提示缺少必传参数