小程序WebView调用JSSDK(使用扫一扫功能)采坑记录

小程序WebView调用JSSDK(使用扫一扫功能)

      • 如何使用JSSDK
          • 一: 我开发的是小程序,哪里来的公众号设置?
          • 二: 引入的JS文件(http://res.wx.qq.com/open/js/jwexin-1.4.0.js)报错? ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190731190417577.png)
          • 三: 获得签名(权限验证)?

最近项目仲需要在小程序中的webview网页中调出扫一扫功能。
目前想到的思路有两种

  • 利用JSSDK
  • 跳到小程序页面进行扫码,再将结果携带返回(比较曲折)

这里只实践了第一种,这里记录过程中需要记录的点。

如何使用JSSDK

这里是微信的官方API地址

总的来说准备要5个步骤:

  • 步骤一:绑定域名
  • 步骤二:引入JS文件
  • 步骤三:通过config接口注入权限验证配置
  • 步骤四:通过ready接口处理成功验证
  • 步骤五:通过error接口处理失败验证

其中有几个地方需要注意的有:::

一: 我开发的是小程序,哪里来的公众号设置?

小程序WebView调用JSSDK(使用扫一扫功能)采坑记录_第1张图片
这里确实需要你要有一个公众号,并且将你程序的域名按照上面说的设置好。到这里你可能不知道这个公众号用来干嘛的,之后会讲到。

二: 引入的JS文件(http://res.wx.qq.com/open/js/jwexin-1.4.0.js)报错? 小程序WebView调用JSSDK(使用扫一扫功能)采坑记录_第2张图片

比较粗心,没有注意到原来程序没有正常加载该js,又没有什么提示。我看到程序没有按我的预期执行代码的时候,卡了一段时间在找原因。最后才发现是因为这段js没有正常加载。原因可能是你的http/https环境问题,如果是https的环境可以把那个js文件的地址也改成https,例如:
https://res.wx.qq.com/open/js/jwexin-1.4.0.js
我记得有个写发好像是不需要http前缀的,这样就会自适应环境,我还没专门验证过:
: //res.wx.qq.com/open/js/jwexin-1.4.0.js(冒号跟斜杠号有空格记得去掉)

三: 获得签名(权限验证)?

小程序WebView调用JSSDK(使用扫一扫功能)采坑记录_第3张图片
这边是后台的工作,需要注意的是url的地址,要在公众号中设置成为JS接口安全域名,并且APPID是返回公众号的APPID,而不是小程序的(问题一的答案:公众号的作用)。

PS:::如果你的程序发现签名正确缺发现提示无效路径(Invalid URL)的话就要注意了,很可能是你的APPID不是公众号,或者是公众号但是还没设置成JS接口安全域名
这里附上一个签名校验工具:签名校验工具

如果过程中出现错误,要记得去微信的文档中找到该种错误的信息,能够帮你尽快找到原因。

你可能感兴趣的:(小程序)