微信公众号H5页面调用微信扫一扫功能

2023-11-13 17:33:34

微信公众号H5页面调用微信扫一扫功能需要通过微信JSSDK（调用其他接口也是一样的方法），且需要前后端配合，具体步骤如下：

1、获取appID和AppSecret

从微信公众号--开发--基本配置中获取**”开发者ID(AppID)“和”开发者密码(AppSecret)“**。开发者密码启用注意马上复制保存，这样以后再用的时候无须再次启用。

2、获取微信签名、随机串、时间戳

后端拿到appID和AppSecret后去获取微信公众号的签名、随机串、时间戳。官方文档中有后端示例代码：传送门

后端需写接口将拿到数据返回前端使用：

需要注意是：确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。

接口出参：

    appId: "xxxxxxxx"

    nonceStr: "xxxxxxxx"

    signature: "xxxxxxxx"

    timestamp: xxxxxxxx

    url: "https://www.baidu.com/mini-h5/"(举例)

3、添加IP白名单、添加安全域名

在微信公众号--开发–基本配置中将项目各种环境的IP地址添加为白名单（开发、测试、演示、正式环境）。

在微信公众号--设置–功能设置中添加项目各种环境的域名（不用带http:// 或https://）。添加域名前需按照域名添加要求将上面的txt文件放入项目根目录，并确保可以访问，可以访问域名才能添加成功。

4、在项目文件中安装jssdk的依赖并引入该依赖

安装依赖：yarn add weixin-js-jdk 或者 npm intall weixin-js-jdk

引入依赖：import wx from 'weixin-js-jdk'

5、在需要使用微信接口的页面配置wx.config

从后端拿到签名、时间戳、随机串的data后配置到文件中

    wx.config({

        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来

        appId: data.appid, // 必填，公众号的唯一标识

        timestamp: data.timestamp, // 必填，生成签名的时间戳

        nonceStr: data.noncestr, // 必填，生成签名的随机串

        signature: data.signature,// 必填，签名，见附录1

        jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，

    });

    /**wx.error可以返回微信config配置是否成功*/

        wx.error(function (res) {

          console.log('res',res);

    });

6、调用微信接口

    wx.scanCode({

          success (res) {

                console.log(res)

          }

    })

扫描单号返回的res.resultStr格式根据扫描类型不同会不一样，所以取值的时候要提前console.log看下扫描结果；

比如：条形码res.resultStr是“CODE_128,1680200805313265”，二维码是“1680200805313265”，其中1680200805313265是真实结果。

码农公寓