fs-wx-ad-component

微信小程序支付后广告组件

使用前准备

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

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

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

{
  "plugins": {
    "sendCoupon": { // 微信支付券
      "version": "1.4.11",
      "provider": "wxf3f436ba9bd4be7b"
    },
    "hello-plugin": { // 福利吖插件
      "version": "1.2.0",
      "provider": "wx3d8055f49842f40b"
    }
  }
}

三. 添加域名

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

https://ad-server.51youdian.com
https://event-upload.51youdian.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com

4. 在 业务域名 中增加如下配置

https://ad-server.51youdian.com

使用方法

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

npm install fs-wx-ad-component --save

二. 构建

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

三. 使用

方案一：在支付下单页接入组件（推荐）

优点

• 在支付下单页广告数据可以进行预加载，能提升曝光率

注意事项

• 在微信支付成功的回调中调用展示广告的方法，并确保后续没有跳转新页面的动作，否则小程序广告的曝光会有问题。如果有兜底的支付结果页，建议将支付结果页做成页面组件放在支付下单页，广告组件的层级需大于支付结果页组件的层级。
• 如果必传参数openId是异步获取的，请通过wx:if，在获取参数后再进行组件的一个显示，以防提示缺少必传参数

接入步骤

1. 页面的 json 文件中做如下配置

{
  "usingComponents": {
    "fs-wx-ad-component": "fs-wx-ad-component"
  }
}

2. 页面的 wxml文件

<view wx:if="{{showFsAd}}">
  <fs-wx-ad-component
    id="fsAd"
    haveNavBar="{{true}}"
    adLabel="xxx"
    openId="xxx"
    pageMode="{{1}}"
  ></fs-wx-ad-component>
</view>

3. 页面的 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) { }
    })
  }
})

方案二：在新开的支付结果页接入组件

缺点：

• 由于微信官方的wx.openEmbeddedMiniProgram的限制，这种方式无法直接唤起半屏小程序广告，所以推荐接入方案一。

1. 页面的 json 文件中做如下配置

{
  "usingComponents": {
    "fs-wx-ad-component": "fs-wx-ad-component"
  }
}

2. 页面的 wxml文件

<view wx:if="{{showFsAd}}">
  <fs-wx-ad-component
    haveNavBar="{{true}}"
    adLabel="xxx"
    openId="xxx"
    pageMode="{{2}}"
  ></fs-wx-ad-component>
</view>

3. 页面的 js文件

注意：showFsAd在data中的初始值应设置为false

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地址 (配合调试时配置，默认不传)|

Tips

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