需求说明：在vue项目中，调用微信扫一扫接口完成扫一扫功能

H5调用微信的扫码能力的前提是在微信应用内打开页面（或者说通过微信内置浏览器打开页面）。这个过程本质上就是通过微信提供的JS接口调用微信APP的原生能力。

通过微信JSAPI调用微信扫一扫需要的资源：

1.公众号AppID,AppSecret用来获取access_token,jsapi_ticket来完成签名。商城后端对应主机IP要加入IP白名单。

2.公众号配置的JS接口安全域名，也就是权益商城页面访问的域名。域名需要已备案。

3.在公众号配置的JS接口安全域名界面，微信提供下载的类似MP_verify_L7D722ljKNHzxrVM.txt这样的txt文件。需要放到我们商城后端主机，能让微信访问到。

签名生成的具体过程请阅读官方文档的“附录1-JS-SDK使用权限签名算法”:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#67

功能调用过程流程图

结合商家核销场景示意：

img

接入准备

整个接入过程准备分如下几步，按照要求做就可以了。如果配置不符合要求会有相应的提示。

获得开发者账号

  1. 登录微信公众平台：https://mp.weixin.qq.com/ 进行账号注册。

img

获得微信JSAPI需要的接入参数

接入微信JSAPI需要参数有两个：AppID, AppSecret

  1. 通过左侧菜单进入 *开发》基本配置* 功能

img

img

  1. 获取开发者ID（AppID）

img

  1. 设置并获取开发者密码（AppSecret）

img

  1. 配置IP白名单

白名单的配置决定了是否有权限调用微信接口获取签名所需的access_token和jsapi_ticket

img

img

JS接口安全域名设置

出于安全考虑等，微信会对发起调用页面的URL域名进行接入控制，页面的ＵＲＬ会参与到签名当中，微信在鉴别的时候所比对的域名就是这里要设置的安全域名。所设置的域名必须是经过ICP备案的。服务器还需要放置一个微信提供的txt格式文件。

此设置很关键，如果配置不符合要求，会导致前端注入config配置时失败，提示invalid url domain错误。

  1. 通过左侧菜单进入 设置》公众号设置 功能

img

  1. 在公共号设置功能里选择功能设置标签

img

  1. 填写保存域名

可设置三个域名，一个月内只可修改３次。微信提供了一个txt格式的文件也必须按要求放到服务器上。

img

接口调用权限

通过左侧菜单进入开发=》接口权限可查看所有接口调用权限，调用限制次数等信息。特殊注意类似access_token, jsapi_ticket的获取需要自己适当做缓存处理，防止达到调用上限导致功能无法使用。

img