+
95
-

微信h5页面如何通过js调用微信扫码接口?

请问微信h5页面如何通过js调用微信扫码接口?

网友回复

+
15
-

在微信 H5 页面中调用微信扫码接口,需要使用微信 JS-SDK 提供的 wx.scanQRCode API。

步骤如下:

1. 绑定域名:

在微信公众平台后台的 "设置" -> "公众号设置" -> "功能设置" 中配置 "JS 接口安全域名"。 你需要将你的 H5 页面所在域名添加到该列表中,并且需要下载校验文件放到对应目录下。

2. 引入 JS 文件:

在你的 H5 页面中引入微信 JS-SDK 文件,可以使用如下代码:

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

(请注意版本号,可能会有更新)

3. 通过 wx.config 接口注入权限验证配置:

   wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
       appId: '', // 必填,公众号的唯一标识
       timestamp: , // 必填,生成签名的时间戳
       nonceStr: '', // 必填,生成签名的随机串
       signature: '',// 必填,签名,见附录1
       jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
   });

其中:

debug:调试模式,建议开发时开启,发布时关闭。appId,timestamp,nonceStr,signature 这几个参数需要通过调用你的服务器端接口来获取,用于验证你的网页授权。 signature 的计算方法可以参考微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#6 jsApiList: 表示你要调用的接口列表,这里需要包含 scanQRCode。

4. 处理 wx.ready 和 wx.error 事件:

   wx.ready(function(){
       // co...

点击查看剩余70%

我知道答案,我要回答