send-coupon-vcy v1.3.6

send-coupon-vcy

畅移 - 好物集 发券组件。使用前需申请微信发券插件使用权限。

版本记录

• 当前版本: v1.3.6 广告位和半屏打开不同小程序
• 历史版本: v1.3.5 头部运营区插件下架、载入半屏跳转小程序功能 v1.3.4 新增extendParam参数供第三方使用 v1.3.3 iPhone 机型样式兼容 v1.3.2 头部运营区引入抽奖插件 v1.3.1 全新UI改版、页面头部增加两个运营区 v1.2.9 更新文档有关uni-app框架得接入说明 v1.2.8 修复小程序后台regeneratorRuntime报警 v1.2.7 弹窗点击跳转到小程序链接动态获取 v1.2.5 页面左下角文案动态获取 v1.2.4 列表页UI更新

使用前准备

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

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

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

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

三. 添加downloadFile合法域名

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

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

使用方法

一. npm安装

npm install send-coupon-vcy

二. 构建

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

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

┌─wxcomponents              微信小程序自定义组件存放目录
│   └──send-coupon-vcy      微信小程序自定义组件
│        ├─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": "send-coupon-vcy/send-coupon-vcy,
      "style": {
          "usingComponents": {
              "send-coupon-vcy": "/wxcomponents/send-coupon-vcy/index"
          }
      }
    }
  ]
}

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

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

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

• 小程序原生

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

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

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

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

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

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

四、参数说明

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

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

{
  "stocks":[{"stock_id":"","shop_logo":"","coupon_logo":"","coupon_name":"好物集—2元券","shop_name":"天图pro2","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. ......