免输卡号绑卡的小程序插件

微信免输卡号绑卡小程序插件是微信支付为接入免输卡号的银行提供的前端UI插件。通过使用该插件可直接调用微信侧已开发好的所有前端视觉要素（包括标准版+大字号+无障碍等），进而显著降低接入银行的初次开发和后续迭代的成本，并极大提高视觉走查的通过率。

自2022年8月起，存量银行的迭代和增量银行的接入都建议以组件模式进行开发，从而帮助降低银行的开发成本。

详细介绍请见免输卡号绑卡小程序插件开发文档： https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx1bf7bb903143fa2c&token=1244483084&lang=zh_CN (opens new window)

前端开发阶段，银行可依据以下流程接入免输卡号绑卡的小程序插件：

Step 1. 注册小程序：确认已有以银行为认证主体的小程序，并确认其AppID；如果没有，请到微信公众平台申请注册。

Step 2. 申请插件权限：通过插件开发文档标题下方的「添加」按钮申请插件权限，并联系群里对接的微信同事通过插件权限申请，所有需使用插件的小程序（包括测试环境和生产环境）均需在后台申请。

Step 3. 申请插件白名单：请联系群里对接的微信同事提供开通白名单所需的信息，包括 ① 是否需要在组件中加挂银行协议 ② 所有需要使用插件的小程序AppID（包括测试环境和生产环境的小程序）。

注： 如未开通插件白名单，在开发者工具中调用插件时会报错AppID不在协议列表内

Step 4. 插件配置：每周三为插件白名单配置的窗口期，所以请在每周二晚前依据微信支付同事的指引提供白名单配置所需的信息，否则要等到下周三才能配置生效。一般情况下，每周四即可开始调用插件进行开发。

Step 5. 插件使用：根据插件的开发文档完成免输卡号绑卡的前端开发，并提交走查文件 注：如有在组件中加挂协议的需求，请联系群内微信同事进行记录并发起协议审核流程，在协议审核通过后将由微信侧在插件内配置协议，银行无需另行处理。

提示

重要事项： 因银行小程序调用免输绑卡的小程序插件时会有加载和跳转的动作，请银行务必在「从银行列表页进入小程序并跳转插件」时和「从插件返回小程序并开始前往验短页」时分别加上小程序平台统一的Loading加载态，以避免用户在银行小程序处理数据时在空白页面等待，进而认为系统异常，影响用户体验。

小程序平台的Loading加载态的详细代码可参考插件开发文档的【1.注意事项】，两个加载态将作为视觉走查的重要部分，请银行关注。

前端设计验收

免输卡号绑卡，银行在开发完成，进入联调阶段，需提供相关银行页面（小程序）提供给设计走查，设计走查所需内容如下（可打包后邮件发送，或发到对应的微信群当中）

版本	需提交文件（安卓）	需提交文件（IOS）
标准版	单卡截图	单卡截图
标准版	单卡录屏（体现点击态）	单卡录屏（体现点击态）
标准版	多卡截图	多卡截图
标准版	多卡录屏（体现点击态）	多卡录屏（体现点击态）
标准版	无卡可绑报错截图*2张，一张[体现“知道了”]点击态，一张正常状态	无卡可绑报错截图*2张，一张[体现“知道了”]点击态，一张正常状态
标准版	卡超过一屏录屏（需滑动页面）	卡超过一屏录屏（需滑动页面）
标准版	如果有银行协议需提供协议内页截图	如果有银行协议需提供协议内页截图
大字号	单卡截图	单卡截图
大字号	多卡截图	多卡截图
大字号	无卡可绑报错截图*2张，一张[体现“知道了”]点击态，一张正常状态	无卡可绑报错截图*2张，一张[体现“知道了”]点击态，一张正常状态
大字号	卡超过一屏录屏（需滑动页面）	卡超过一屏录屏（需滑动页面）
无障碍	绑卡列表页全部元素读取录屏	绑卡列表页全部元素读取录屏
无障碍	无卡可绑页全部元素读取录屏	无卡可绑页全部元素读取录屏

注意

• 相应的点击态希望可以在录屏里体现。
• IOS机型需要提供一份iphone11以上版本的截图。
• 小程序插件已开发有大字号与无障碍，无需银行另外开发。走查时，大字号提供的截图和录屏都要以微信客户端最大字体为准；无障碍录屏可以直接先打开卡列表页和报错页，ios通过Siri唤起【旁白】模式，安卓通过语音助手唤起【talk back】模式。
• 走查页面实际上只需要银行提供前端UI规范，不涉及到后端绑卡交互，所以提供录屏的时候不需要完成整个绑卡流程。

备注：由于IOS没有测试包，银行可在本地环境截图IOS相关的页面（PC端或移动端模拟Iphone11以上截图均可）。

实现方式：

1. 以H5模式接入银行：可借鉴IOS开发页面代理，银行可自行搜索具体操作或咨询群内微信同事；
2. 以小程序模式接入银行：可以通过微信公众平台（登录小程序账号），使用真机模拟方式在手机直接打开页面。

以下设计稿及标注为旧规范，如银行已在开发中，可通过该设计稿及标注完成开发并提交走查，走查仍以设计稿内容为准。

注意

UI设计稿尺寸为：414*896px，iphone11的尺寸

详细页面标注可见下方链接（含银行协议样式，提供两份版本以供选择，默认勾选或弹窗确定）。

全部标注链接：界面标注及界面图片素材.zip (opens new window)