fs-adcomeon-component

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

使用前准备

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

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

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

{
  "plugins": {
    "sendCoupon": { // 微信支付券
      "version": "2.0.1",
      "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" 文件夹

三. 使用

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

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

pageMode传入1，表示在支付页接入组件，在进入页面时就获取广告。

接入步骤

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

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

2. 页面的 wxml文件

<view wx:if="{{attachFsAd}}">
  <fs-ad
    id="fsAd"
    pageMode="{{1}}"
    flowMasterId="xxx"
    openId="xxx"
    extraInfo="{{extraInfo}}"
  ></fs-ad>
</view>

3. 页面的 js文件

Page({
  data: {
    attachFsAd: false,
    extraInfo: {
      // 附加信息
      businessAddress: { // 当前消费地区
        provinceCode: '110000', // 省编码
        cityCode: '110100', // 市编码
        areaCode: '110101', // 区编码
        districtCode: '', // 街道编码
        address: '', // 详细地址
        latitude: '', // 纬度
        longitude: '' // 经度
      },
      storeInfo: { // 商户信息
        storeCategory: 'B0199', // 消费门店行业code
        storeName: '首展（良渚店）' // 消费门店名称
      },
      payTime: 1735660800, // 支付时间
      content: [{
        productCategory: '饮料', // 商品类目
        productName: '可口乐乐' // 商品名称
      }],
      amount: '100.00', // 支付金额
      payWay: 1, // 支付方式 1.微信 2.支付宝 3.云闪付 4.会员 5.其他
      payEnv: 2, // 支付环境 1.微信H5 2.微信小程序 3.支付宝生活号 4.支付宝小程序 5.APP 6.其他
      deviceInfo: { // 设备信息
        brand: 'HUAWEI', // 设备品牌
        model: 'Pura 70 Pro' // 设备型号
      },
      userId: '1234567890', // 用户id（微信就是openId，支付宝就是userid）
      flowMasterId: '1234567890' // 流量主id
    }
  },
  onLoad () {
    // 加载广告组件
    this.setData({
      attachFsAd: 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) { }
    })
  }
})

pageMode传入3，表示在支付页接入组件，必须在点击确认支付按钮时调用getAdData方法获取广告。

接入步骤

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

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

2. 页面的 wxml文件

<button bindtap="handleConfirmPay">确认支付</button>

<view wx:if="{{attachFsAd}}">
  <fs-ad
    id="fsAd"
    pageMode="{{3}}"
    flowMasterId="xxx"
    openId="xxx"
    extraInfo="{{extraInfo}}"
  ></fs-ad>
</view>

3. 页面的 js文件

Page({
  data: {
    attachFsAd: false,
  },
  onLoad () {
    this.setData({
      attachFsAd: true,
    })
  },
  /**
   * @function 获取广告
   */
  getAdData () {
    const fsAd = this.selectComponent('#fsAd')
    fsAd.getAdData()
  },
  /**
   * @function 点击确认支付按钮
   */
  handleConfirmPay () {
    this.getAdData()
  },
  /**
   * @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、flowMasterId参数后再进行组件的一个显示，以防提示缺少必传参数
• pageMode必传

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

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

接入步骤

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 | 是 | 获取广告时机-场景值： 1-预加载-进入页面获取广告 2-支付后新开页面获取广告 3-预加载-点击确认支付获取广告 | | openId | String | 是 | 用户openId | | flowMasterId | String | 是 | 流量主id，联系运营人员提供 | | extraInfo | Obejct | 是 | 附加信息 | | ipAddress | String | 如需跑口令广告必传 | 顾客的真实ip | | ua | String | 如需跑口令广告必传 | 顾客浏览器的UA信息 | | orderId | String | 否 | 订单id，有则提供，没有可以不提供 | | haveNavBar | Boolean | 否 | 是否有微信顶部导航栏，默认为true, 默认有导航栏 | | payAmount | String | 否 | 实际支付金额 |

extraInfo中的参数说明

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | businessAddress | Object | 否 | 当前消费地区 | | storeInfo | Object | 否 | 商户信息 | | payTime | Number | 否 | 支付时间 | | content | Array | 否 | 商品信息 goodsInfo[] | | amount | String | 否 | 支付金额 | | payWay | Number | 是 | 支付方式：1.微信 2.支付宝 3.云闪付 4.会员 5.其他 | | payEnv | Number | 是 | 支付环境：1.微信H5 2.微信小程序 3.支付宝生活号 4.支付宝小程序 5.APP 6.其他 | | deviceInfo | Object | 否 | 设备信息 | | userId | String | 是 | 用户id | | flowMasterId | String | 是 | 流量主id |

businessAddress中的参数说明

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | provinceCode | String | 否 | 省编码 | | cityCode | String | 否 | 市编码 | | areaCode | String | 否 | 区编码 | | districtCode | String | 否 | 街道编码 | | address | String | 否 | 详细地址 | | latitude | String | 否 | 纬度 | | longitude | String | 否 | 经度 |

storeInfo中的参数说明

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | storeCategory | String | 否 | 消费门店行业code | | storeName | String | 否 | 消费门店名称 |

deviceInfo中的参数说明

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | brand | String | 否 | 设备品牌 | | model | String | 否 | 设备型号 |

goodsInfo 中的参数说明

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | productCategory | String | 否 | 商品类目 | | productName | String | 否 | 商品名称 |

五. 组件方法说明

调用组件的getAdData方法获取广告（只在pageMode=3时使用）

const fsAd = this.selectComponent('#fsAd')
fsAd.getAdData() // 获取广告

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

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