fs-adcomeon-component

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

使用前准备

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

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

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

{
  "plugins": {
    "sendCoupon": { // 微信支付券
      "version": "1.4.11",
      "provider": "wxf3f436ba9bd4be7b"
    }
  }
}

三. 添加域名

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

https://advertising.adcomeon.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com

使用方法

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

npm install fs-adcomeon-component --save

二. 构建

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

三. 使用

方案一：在支付页接入组件

使用场景：支付页和支付结果页在同一页面下。 组件引入位置：支付页。 优势：对接在支付页，在支付页中加载组件时，广告进行预加载，能提升曝光率。

接入步骤

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

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

2. 页面的 wxml文件

pageMode传入1，表示在支付页接入组件。

<view wx:if="{{showFsAd}}">
  <fs-ad
    id="fsAd"
    pageMode="{{1}}"
    flowMasterId="xxx"
    openId="xxx"
  ></fs-ad>
</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) { }
    })
  }
})

注意事项

• 如果必传参数openId是异步获取的，请通过wx:if，确保在获取openId参数后再进行组件的一个显示，以防提示缺少必传参数

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

使用场景：支付页和支付结果页是两个不同的页面。 组件引入位置：支付结果页。 劣势：对接在支付结果页即进入支付结果页的同时加载广告组件，无法提前渲染组件，流失率会比「方案一」高。

接入步骤

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

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

2. 页面的 wxml文件

pageMode传入2，表示在新开页接入组件。

<view wx:if="{{showFsAd}}">
  <fs-ad
    pageMode="{{2}}"
    flowMasterId="xxx"
    openId="xxx"
  ></fs-ad>
</view>

3. 页面的 js文件

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

Page({
  data: {
    showFsAd: false // showFsAd在data中的初始值应设置为false
  },
  onLoad () {
    // 显示广告
    this.setData({
      showFsAd: true
    })
  }
})

四. 组件参数说明

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | pageMode | Number | 是 | 组件接入的位置：pageMode=1:在支付页接入组件，会先预加载广告数据 pageMode=2:在新开页放置组件。 默认值为1 | | openId | String | 是 | 用户openId | | flowMasterId | String | 是 | 流量主id，联系运营人员提供 | | ipAddress | String | 如需跑口令广告必传 | 顾客的真实ip | | ua | String | 如需跑口令广告必传 | 顾客浏览器的UA信息 | | orderId | String | 否 | 订单id，有则提供，没有可以不提供 | | haveNavBar | Boolean | 否 | 是否有微信顶部导航栏，默认为true, 默认有导航栏 | | payAmount | String | 否 | 实际支付金额 |

五. 组件方法说明

调用组件的showAd方法展示广告

const fsAd = this.selectComponent('#fsAd')
fsAd.showAd() // 展示广告