wxgo-coupon

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

使用前准备

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

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

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

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

三. 添加合法域名

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

https://wxgo.cdn.adwke.com

4. 在request合法域名中增加

https://wxgo.adwke.com/

使用方法

一. npm安装

npm install wxgo-coupon

二. 构建

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

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

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

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

<template>
  <wxgo-coupon 
    sercet="sercet" 
    openid="openid" 
    serverUrl="serverUrl"
    extendParam="extendParam"
  >
  </wxgo-coupon>
</template>

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

• 小程序原生

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

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

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

// index.wxml
<wxgo-coupon
     sercet="sercet" 
    openid="openid" 
    serverUrl="serverUrl"
    extendParam="extendParam"
>
</wxgo-coupon>

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

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

四、参数说明

| 变量 | 类型 | 必填? | 说明 | | - | - | - | - | | sercet| String | 是 | 联系运营获取 | | openid | String | 是 | 用户openid | | serverUrl | String | 是 | 取值：https://wxgo.adwke.com/ |