WeCard 码组件

简介

此组件用于集成 wecard 码相关的能力，包括但不限于展示二维码、签约、补缴等。

如何使用

申请组件

小程序开发者可以在"小程序管理后台-设置-第三方服务-插件管理"中查找插件，并进行申请。在发起申请24小时内，微卡会根据应用的资质进行审核。

引入插件

1. 在app.json中声明需要使用的插件

{
   "plugins": {
    "wecard-code-plugin": {
      "version": "0.0.7",
      "provider": "wx15949dc6d9b035d2"
    }
  },
}

需指插件的version（当前版本号：0.0.7）和provider（插件提供方：wx15949dc6d9b035d2）

2. 在使用的页面的json文件（如index.json）中引用自定义组件

{
  "usingComponents": {
    "wecard-code": "plugin://wecard-code-plugin/wecard-code"
  }
}

使用插件

1. 安装 wecard-code-sdk

npm install wecard-code-sdk

2. 在页面的 js 文件中引入 sdk

引用后在 onLoad 中进行注册

import { wecardInit } from "wecard-code-sdk";

Page({
  data: {
    userinfo: {},
    wecardInitData: false
  },

  onLoad: function () {
    this.wecardInit();
  },

  wecardInit(e){
    wecardInit(this,e);
  },

  onShow(){
    this.getUserInfo();
  },

  getUserInfo(){
    // 获取 userinfo 的接口，并且 setData
  }
}

3. 在页面上使用组件

<wecard-code 
    userInfo="{{userinfo}}" 
    initData="{{wecardInitData}}"
    bindInit="wecardInit"
    bindLoginStatusExpired="getUserInfo"
>
</wecard-code>

参数	type	必填	说明
userInfo	Object	是	用户信息
initData	Object	是	插件初始化信息（直接填写 wecardInitData 即可）
bindInit	fun(e)	是	直接写 wecardInit 即可，wecard 插件初始化函数
bindLoginStatusExpired	fun(e)	是	身份过期后会触发，请重新获取 userinfo 并且 setData 新的 userinfo
showOpenPayTip	boolean	否	是否展示开通支付功能的提示，默认为 true
isCaptureScreenEnabled	boolean	否	是否开启截屏功能，默认为 true （表示开启截屏风控，安全性高）。 警告：如果设置为 false，表示关闭截屏风控，安全性大幅降低，建议保持此设置为 true

其他

签约组件

另外提供一个发起签约的按钮组件，使用方式如下：

使用前请先在页面上使用 wecard-code-sdk 进行 init 操作，方法同上

在页面级别 json 声明使用签约按钮组件

{
  "usingComponents": {
    "sign-button": "plugin://wecard-code-plugin/sign-button"
  }
}

页面 wxml 声明:

<sign-button
  userInfo="{{userinfo}}"
  initData="{{wecardInitData}}"
  bindInit="wecardInit"
  bindSignBack="signBack"
  buttonText="开通支付功能"
/>

其中参数如下:

参数	type	必填	说明
userInfo	Object	是	用户信息
initData	Object	是	插件初始化信息（直接填写 wecardInitData 即可）
bindInit	fun(e)	是	直接写 wecardInit 即可，wecard 插件初始化函数
bindSignBack	fun(e)	是	获取签约结果
buttonText	string	否	按钮文案，默认为“前往开通支付功能”

在 js 中绑定 function 获取前端签约结果(如果需要保存签约状态，请以服务端为准，不建议保存，微校来维持此状态)

signBack(e){
    console.log("[signBack]", e.detail);

    // return_code === SUCCESS 为成功
    // 更加详细的信息，请查看： https://pay.weixin.qq.com/wiki/doc/api/pap.php?chapter=18_14&index=3
    const { return_code, return_msg, contract_id } = e.detail;
  }

小钱包功能页面

功能简介

小钱包功能页，可用于用户的福利券、余额、优惠券的展示。

使用方式

通过wx.navigateTo方法跳转，并通过该方法的内置的events进行事件通信。 事件通信类型：

• 宿主 -> 插件
  • updateUserInfo： 传递用户信息
• 插件 -> 宿主
  • loginStatusExpired ： 登录态过期，通知宿主重新获取身份态

代码示例如下，完整代码可见（pages/wallet/index）：

     
    wx.navigateTo({
      url: 'plugin://wecard-code-plugin/wallet',
      events: {
        loginStatusExpired: (data) => {
          this.fetchData();
        }
      },
      success: (res) => {
        this.walletEventChannel = res.eventChannel;
        res.eventChannel.emit('updateUserInfo', this.data.userinfo)
      }
    })

request 安全域名添加

若使用了支付功能，请向微卡开发人员咨询需要添加的 request 安全域名

• https://api.unipay.qq.com
• https://midas.weixiao.qq.com