kuliang-coupon

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

使用前准备

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

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

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

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

三. 添加downloadFile合法域名

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

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

使用方法

一. npm安装

npm install kuliang-coupon

二. 构建

• uni-app框架：参考小程序自定义组件支持

1. 在根目录新建wxcomponents文件夹
2. 打开node_modules/kuliang-coupon文件，copy目录中整个src文件到wxcomponents目录下，按需重命名使用
3. 目录结构

┌─wxcomponents              微信小程序自定义组件存放目录
│   └──kuliang-coupon      微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─pages
├─main.js
├─App.vue
├─manifest.json
└─pages.json

• 小程序原生：参考小程序npm支持

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

三. 使用

• uni-app框架：参考小程序自定义组件支持

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

//pages.json
{
  "pages": [
    {
      "path": "kuliang-coupon/kuliang-coupon,
      "style": {
          "usingComponents": {
              "kuliang-coupon": "/wxcomponents/kuliang-coupon/index"
          }
      }
    }
  ]
}

3. 在页面中引入该组件（页面中不能有其他元素，只能有该组件）,并配置分享

//kuliang-coupon.vue
<template>
  <kuliang-coupon 
    token="token" 
    openid="openid" 
    locName="loc_name"
    serverUrl="serverUrl"
    extendParam="extendParam"
  >
  </kuliang-coupon>
</template>

<script>
  export default {
    onShareAppMessage(res) {
      title:'你的好友@你，发现这里有好多隐藏的微信支付商家代金券~',
      path:'当前页面所在路径'
    }
  }
</script>

• 小程序原生

1. 新建页面pages
2. 页面的json文件中做如下配置

// index.json
{
    "usingComponents": {
        "kuliang-coupon": "kuliang-coupon"
    },
    "navigationStyle": "custom",
    "navigationBarBackgroundColor": "#25AB52",
    "navigationBarTextStyle": "white",
    "disableScroll":true
}

3. 在页面wxml文件中引使用该组件（页面中不能有其他元素，只能有该组件）

// index.wxml
<kuliang-coupon
  token="token" 
  openid="openid" 
  locName="loc_name"
  serverUrl="serverUrl"
  extendParam="extendParam"
>
</kuliang-coupon>

4. 在页面js文件中配置分享参数

// index.js
onShareAppMessage(){
  return {
    title:'你的好友@你，发现这里有好多隐藏的微信支付商家代金券~',
    path:'当前新建得pages路径'
  }
}

四、参数说明

| 变量 | 类型 | 必填? | 说明 |
|:----|:----:|:----:|:----|
| token | String | 是 | 用户token-由对接者提供 |
| openid | String | 是 | 用户openid-由对接者提供 |
| loc_name | String | 是 | 流量位标识 |
| serverUrl | String | 是 | 前端请求数据的服务器地址-由对接者提供 |
| extendParam | Object, Array, Number, String, Boolean | 否 | 无特别说明请忽略不传 |

五. 券签名相关说明(非第三方签名请忽略该部分)

• 在获取弹窗券的api接口中（/pay_ad/v2/ad_im）返回数据中增加 sign、merchant两个参数

{
  "stocks":[{"stock_id":"","shop_logo":"","coupon_logo":"","coupon_name":"2元券","shop_name":"test","coupon_value":2000,"transaction_minimum":3000,"total":1000,"send_num":0,"appid":"","app_path":"","tag":"店铺专用","ustatus":0}],
  "sign":"stocks列表中券的签名（批量）",
  "merchant":"商户号"
}

• 新增返回参数说明 | 变量 | 类型 | 必填? | 说明 |
  |:----|:----:|:----:|:----|
  | sign | String | 是 | 批量券签名 |
  | merchant | String | 是 | 商户号 |

• 在获页面券的api接口中（pay_ad/v2/ad_busifavor）返回数据的data中的stocks中增加 sign、merchant、coupon_code三个参数

{
  "total":0,"appid":"","jump_path":"",
  "data":[{"category_name":"品牌精选",
    "stocks":[
      {
        "stock_id":"","shop_logo":"","coupon_logo":"","coupon_name":"满10-9.9券","shop_name":"天图pro","coupon_value":1000,"transaction_minimum":1990,"total":1000,"send_num":3,"appid":"","app_path":"","tag":"线上使用","ustatus":0,
        "sign":"当前券签名（单张）",
        "merchant":"商户号",
        "coupon_code":"微信领券插件返回的coupon_code"
      }
    ]
  }]
}

• 新增返回参数说明 | 变量 | 类型 | 必填? | 说明 |
  |:----|:----:|:----:|:----|
  | sign | String | 是 | 批量券签名 |
  | merchant | String | 是 | 商户号 |
  | coupon_code | String | 是 | 微信领券插件返回的coupon_code，通过领券上报接口（pay_ad/v2/ad_busifavor_ping）传到服务端，服务端保存，并且在该接口返回，ps:该参数将在点击页面立即使用按钮，获取打开微信券详情参数的接口（pay_ad/v2/ad_open_card）跳转到微信券详情页面时调用 |

Tips

1. ......