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

更新时间:2024.10.29

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

用户端流程示例

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

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

小程序接入插件操作

插件版本号: 1.0.3(更新时间 2020/11/26)

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

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

  1. 插件基于WebView层小程序组件实现,遮罩层不支持覆盖小程序中层级更高的原生组件(例如cover-view,cover-image等);

  2. 建议将插卡插件放在页面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}

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    <!-- [S] 实例按钮 --> 
13    <button>点击插卡</button> 
14    <!-- [E] 实例按钮 --> 
15  </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对应的商户生成