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

5,305 阅读3分钟

一、问题场景

在使用taro框架编译成h5时发现Taro.scanCode()在h5场景下无效,故整理以下方案供参考。

二、解决方案

微信公众号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);
});

注:所有JS接口列表见JDK官方文档:传送门

6、调用微信接口

wx.scanCode({
  success (res) {
    console.log(res)
  }
})

**这里有个坑:**扫描单号返回的res.resultStr格式根据扫描类型不同会不一样,所以取值的时候要提前console.log看下扫描结果;

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

详细用法参加官方文档:传送门

附赠:H5移动端调试工具 vsconsole