微信公众号H5页面调用微信扫一扫功能 您所在的位置:网站首页 公众号扫一扫失败 微信公众号H5页面调用微信扫一扫功能

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

2023-12-23 18:37| 来源: 网络整理| 查看: 265

一、问题场景 在使用taro框架编译成h5时发现Taro.scanCode()在h5场景下无效,故整理以下方案供参考。 二、解决方案 微信公众号H5页面调用微信扫一扫功能需要通过微信JSSDK(调用其他接口也是一样的方法),且需要前后端配合,具体步骤如下: 1、获取appID和AppSecret

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

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

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

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

接口入参:调用微信扫一扫接口的当前页面的url,例如:www.baidu.com/mini-h5/

需要注意是:确认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



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有