小程序“添加会员卡”插件

更新时间：2023.11.28

在商家小程序内以弹窗的形式询问用户是否将商家的会员卡（需事先已创建2.0会员卡）添加至卡包；若用户卡包中已存放该会员卡，需询问用户是否要前去查看会员卡详情。

# 用户端流程示例

情况一：若用户卡包没有商家会员卡

情况二：若用户卡包中已存有商家会员卡

# 小程序接入插件操作

插件版本号： 1.0.3（更新时间 2020/11/26）

版本号将用在小程序配置app.json文件配置中，“version“：”1.0.3”。

1.0.3版本更新内容：对于使用常规view+image实现的自定义tabBar样式兼容，增加了插件的展示层级z-index。开发时需注意：

插件基于WebView层小程序组件实现，遮罩层不支持覆盖小程序中层级更高的原生组件（例如cover-view，cover-image等）；
建议将插卡插件放在页面WXML标签结构较顶层的位置，若使用外层元素包裹插件的WXML结构，插件的z-index有被外层元素影响的可能。

# 1、添加插件配置（引入插件包）

在小程序配置app.json 文件中加入如下配置：

示例代码

1{
2{
3  "plugins": {
4    "myPlugin": {
5      "version": "1.0.3",
6      "provider": "wx1e59a8aff6c76f2f"
7
8    }
9  }
10} 
11}

# 2、在小程序页面中引入插卡插件

注意

插件本身不带任何样式，只用于发起请求，支持插入子节点，子节点供商户任意定义样式和内容。

1）在小程序页面配置文件中加入如下配置，引入get-card组件：

示例代码

1{
2  "usingComponents": {
3    "get-card": "plugin://myPlugin/get-card"
4  }
5}

2）在小程序页面的WXML模板中加入如下代码，并填入相关字段，字段说明参见[小程序插卡插件字段说明表](#_ 小程序插卡插件字段说明表)

1<get-card> 
2    bindquerycardevent="queryHandler" 
3    bindinsertcardevent="insertHandler" 
4    bindjumpdetailevent="jumpHandler" 
5    auto_show="{{true}}" 
6    open_id="{{open_id}}" 
7    card_id="{{card_id}}" 
8    out_request_no="{{out_request_no}}" 
9    outer_str="{{outer_str}}" 
10
11    <!-- 内部为自定义代码，按钮点击部分的代码写在这里 --> 
12      
13    <!-- [S] 实例按钮 --> 
14    <button>点击插卡</button> 
15    <!-- [E] 实例按钮 --> 
16  </get-card>

# 小程序插卡插件字段说明表

bindquerycardevent 选填 string(24)

【查询卡片事件(自定义事件)】 拉起插件前，会进行用户会员卡信息的查询，查询完成后触发此事件，bindquerycardevent说明参考《自定义组件文档》

bindinsertcardevent 选填 string(24)

【插卡事件(自定义事件)】 点击“添加”按钮，调用插卡接口完成后触发此事件，bindinsertcardevent说明参考《自定义组件文档》

bindjumpdetailevent 选填 string(16)

【跳转卡详情事件(自定义事件)】 点击“详情”按钮，跳转到卡详情时触发此事件，bindjumpdetailevent说明参考《自定义组件文档》

auto_show 选填 boolean

【是否自动拉起插件】 为true时，用户进入使用插件的页面，插件会在初始化完成后自动拉起

open_id 必填 string(128)

【用户标识】 用户的open_id

card_id 必填 string(32)

【会员卡ID】 商户创建微信会员卡模板成功后系统返回的会员卡模板ID

out_request_no 必填 string(128)

【商户请求幂等串】 商户凭据号。商户自定义，注意保持唯一性，仅供参考的格式：商户ID+日期+流水号。可包含英文字母，数字，｜，_，*，-等内容，不允许出现其他不合法符号。

outer_str 选填 string(128)

【会员卡领取渠道标识】 会员卡领取渠道标识。商户自定义

# 3、在小程序页面对应的JS逻辑中，获取插件实例并执行初始化操作

1// 获得返回值示例
2Page({
3  queryHandler(resData) {
4    console.log("[query handler] got data:", resData);
5  },
6  insertHandler(resData) {
7    console.log("[insert handler] got data:", resData);
8  },
9  jumpHandler(resData) {
10    console.log("[jump handler] got data:", resData);
11  },
12});

如果事件绑定正确，在对应的时机（拉起插件前查卡、点击按钮插卡、点击按钮跳转），会触发响应的事件，在回调函数中可以拿到对应结果

# 返回处理

从回调函数参数detail中，获取参数。

errcode 必填 string(128)

【外层错误码】 返回整体错误码

msg 必填 string(256)

【错误信息】 返回整体错误信息

# 返回示例

1// 获得返回值示例
2Page({
3  queryHandler(resData) {
4    console.log(resData);
5    console.log(resData.detail);
6  },
7});

# 错误码

# Detail中errcode返回错误码

错误码	描述	解决方案
OK	成功	接口调用成功
SYSTEM_ERROR	系统错误	系统异常，请使用相同参数稍后重新调用
USER_NOT_EXISTS	登录态获取失效	引导用户重试
USER_GET_FAILED	登录态获取失败	报错，提示用户稍后操作
API_HANDLE_ERROR	API调用发生错误	报错，提示用户稍后操作
JUMP_DETAIL_ERROR	跳转卡详情失败	报错，提示用户稍后操作
CODE_MODE_UNSUPPORTED	不支持的code模式	提示用户插卡失败，同时需要注意：插卡插件暂不支持实时模式的卡
CARDID_NOT_EXISTS	会员卡ID不存在	提示用户插卡失败，请开发者检查卡片的code模式是否支持使用插件插卡
CARDID_INVALID	卡ID无效	提示用户插卡失败，请开发者检查card_id传值是否正确
INVALID_OUT_REQUEST_NO	商户请求单号格式有误	提示用户插卡失败，请开发者检查card_id传值是否正确
PARAM_ERROR	参数错误	参数错误，请开发者查看msg中具体的错误信息并进行修复处理
SIGN_ERROR	签名错误	请开发者检查签名正确性
FREQUENCY_LIMITED	调用API频率过高	提示报错，引导用户稍后操作。例如“活动太过火爆，请稍后再领取”
CARDID_APPID_NOT_MATCH	卡和AppID不匹配	提示报错，请开发者检查AppID或者card_id参数是否正确，且card_id由该AppID对应的商户生成

文档是否有帮助

商户文档

商户文档中心

更多支持

开发者社区微信开放平台微信公众平台腾讯客服