微信小程序支付后广告组件
npm install fs-wx-ad-component微信小程序支付后广告组件
1. 小程序账号登录微信公众平台
2. 设置 —> 第三方设置 -> 插件管理 —> 添加插件，进入添加插件操作页面
3. 搜索插件名 微信支付券、福利吖 并添加, 提交审核待通过
json
{
"plugins": {
"sendCoupon": { // 微信支付券
"version": "1.4.11",
"provider": "wxf3f436ba9bd4be7b"
},
"hello-plugin": { // 福利吖插件
"version": "1.2.0",
"provider": "wx3d8055f49842f40b"
}
}
}
`
$3
1. 小程序账号登录微信公众平台
2. 开发 —> 开发管理 —> 开发设置 —> 服务器域名
3. 在 中增加如下配置
`text
https://ad-server.51youdian.com
https://event-upload.51youdian.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com
`
4. 在 中增加如下配置
`text
https://ad-server.51youdian.com
`
使用方法
$3
bash
npm install fs-wx-ad-component --save
`
$3
1. 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用 npm 模块
2. 小程序开发者工具 -> 工具 -> 构建 npm
3. 构建成功后小程序代码包中将产出 "miniprogram_npm" 文件夹
$3
#### 方案一：在支付下单页接入组件（推荐）
优点
- 在支付下单页广告数据可以进行预加载，能提升曝光率
注意事项
- 在微信支付成功的回调中调用展示广告的方法，并确保后续没有跳转新页面的动作，否则小程序广告的曝光会有问题。如果有兜底的支付结果页，建议将支付结果页做成页面组件放在支付下单页，广告组件的层级需大于支付结果页组件的层级。
- 如果必传参数openId是异步获取的，请通过wx:if，在获取参数后再进行组件的一个显示，以防提示缺少必传参数
接入步骤
1. 页面的 json 文件中做如下配置
json
{
"usingComponents": {
"fs-wx-ad-component": "fs-wx-ad-component"
}
}
`
2. 页面的 wxml文件
html
haveNavBar="{{true}}"
adLabel="xxx"
openId="xxx"
pageMode="{{1}}"
>
`
3. 页面的 js文件
js
Page({
data: {
showFsAd: false
},
onLoad () {
// 加载广告组件
this.setData({
showFsAd: true,
})
},
/**
* @function 展示广告（在微信支付成功的回调时调用）
* @desc wx.requestPayment的success中调用
*/
handleOpenAd () {
const fsAd = this.selectComponent('#fsAd')
fsAd.showAd() // 展示广告
},
/**
* @function 页面中的支付函数
*/
handleWxPay () {
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) {
// 点击完成按钮
this.handleOpenAd()
},
fail (res) { }
})
}
})
`#### 方案二：在新开的支付结果页接入组件
缺点：
- 由于微信官方的
的限制，这种方式无法直接唤起半屏小程序广告，所以推荐接入方案一。1. 页面的 json 文件中做如下配置
`json
{
"usingComponents": {
"fs-wx-ad-component": "fs-wx-ad-component"
}
}
`2. 页面的 wxml文件
html
adLabel="xxx"
openId="xxx"
pageMode="{{2}}"
>
`3. 页面的 js文件
注意：showFsAd在data中的初始值应设置为false
js
Page({
data: {
showFsAd: false // showFsAd在data中的初始值应设置为false
},
onLoad () {
// 显示广告
this.setData({
showFsAd: true
})
}
})
`` | 变量 | 类型 | 必填 | 说明 |
|:----|:----:|:----:|:----|
| id | String | 是 | 触发广告获取子组件 |
| openId | String | 是 | 用户openId |
| adLabel | String | 是 | 流量位标识，联系运营人员提供 |
| pageMode | Number | 是 | 组件接入的位置：pageMode=1:在支付页放置组件，会先预加载广告信息 2:在新开的支付后的详情页放置组件。 默认值为1 |
| haveNavBar | Boolean | 否 | 是否有微信顶部导航栏，默认为false, 默认没有导航栏 |
| serverUrl | String | 否 | 测试beta地址 (配合调试时配置，默认不传)|
[npm支持]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html