bangzhu-test

v1.0.0

Published

2 years ago

测试

Downloads

0High
0Medium
0Low

amu_joe

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更新

使用前准备

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

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

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

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

三. 添加downloadFile合法域名

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

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

使用方法

一. npm安装

npm install send-coupon-vcy

二. 构建

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

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

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

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

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

三. 使用

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

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

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

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

//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>

小程序原生

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

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

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

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

在页面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":"天图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

......