Ad-test NPM | npm.io

fs-advertisement-component

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

使用前准备

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

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

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

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

三. 添加 downloadFile 合法域名

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

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

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

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

使用方法

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

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

二. 构建

小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用 npm 模块
小程序开发者工具 -> 工具 -> 构建 npm
构建成功后小程序代码包中将产出 "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	否	是否有顶部导航栏