H5引入微信网页sdk(JSSDK)详细过程

凉_橙
5,300 阅读7分钟

记录一下这次在H5页面中引入微信网页sdk的整个过程及过程中踩的坑。

需求分析

场景

公司的小程序，uniapp开发，转为了H5，里面有一个扫码签到的功能，就是这个链接如果发送在微信聊天中可以打开调用扫一扫，即在H5页面中实现扫一扫的需求。这个需求拿到后，我就找了一下业界的方案，如何在H5中实现扫一扫，大致方案如下：

方案

1.方案一：

使用uniapp中的扫码，uni.scanCode，但是这个方法在H5中无法使用，无法满足实际的使用场景。 image.png

2. 方案二：

使用别人开发好的扫一扫，直接调996315.com/。 里面有使用文档可以直接调用996315.com/api/scan/ 这个接口，会自动调用起扫码，然后后面拼接收扫码的地址就ok了，这个方法非常简单，可以直接使用，但是有个弊端：不是官方提供的方法，是网友提供的一个开放的地址，随时可能不能使用，而且多人扫码还出现报错问题，所以在多人使用的小程序中，为了稳定，这个方案也舍弃了

3.方案三：

使用各大厂商提供的扫码功能，比如阿里的扫一扫，也可以实现扫一扫功能，但是我看了一下文档，上面有要计费，而且还要适配安卓和ios，看着还挺麻烦的，如果有更好的，这个也不推荐使用。

4. 方案四：

也就是我选择的方案，使用微信提供的网页JSSDK来实现扫一扫，一是稳定，有微信官方提供的对网页的支持jssdk包，二是不收费啊，秉承着为公司省钱的心，所以就选择了这个方案。

开发过程记录

下面是我的开发整个过程的记录，以及开发过程中遇到的坑，逐步摸索，然后实现的扫一扫，按照我这个来，肯定是可以的，我这边测试按照我这个方法，实现了三个公司调用微信提供的的扫一扫，我这里用到的技术是nodejs（nestjs）和unapp，实现方法都一样，代码做个参考，下面会贴代码。

前置条件

需要有一个认证的公众号，服务号订阅号都可以。

按照官方文档开发过程需要分为5步。

1.步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”； 虽然官方文档提供文档这里是第一步，但是我在实际开发中，这其实放到了最后一步，这也是很重要的一步，如果你按照我下面四步来，最后再来这里配置一下域名，基本不会有问题。

这一步绑定域名可以放到最后(这一步基本没什么坑，按照官方配置就行)

  1. 登录公众号后台=>设置与开发=>公众号设置=>功能设置=>配置JS接口安全域名
  2. 配置之前需要将弹窗提示的文件上传的域名执行的服务器目录下（如下图）。

686f6772e1426bbc035c3e6349e60fe.jpg

2.步骤二：引入JS文件

这一步就是将jssdk引入到项目中，有好几种引入方式，官方说的是可以使用AMD/CMD的加载方式进行加载，这里引入我也举几个例子。

  1. 在index.html中直接使用脚本的形式引入。
     <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"/>
     <script>  
           window.jWeixin=window.wx;  
           delete window.wx;  
      </script>
  1. 使用代码引入。
    // 创建 script 标签
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
    // 将 script 标签添加到页面中
    document.body.appendChild(script);
    // 定义 script 标签加载完成后的回调函数
    script.onload = () => {
      console.log('jweixin-1.6.0.js loaded successfully', jWeixin);
    };
  1. 使用npm包引入，我使用的是这种方式。
  npm install weixin-js-sdk

3.步骤三：通过config接口注入权限验证配置

我觉得工作量就在这一步，这一步需要进行权限验证 我把这个分为以下几步

  • 首先要提供一个接口，前端要调用这个接口来获取返回的签名，来进行权限认证，首先签名signature和timestamp和nonceStr都是接口返回过来的，这几个返回值全部在BFF层来获取，获取的时候还需要传个url地址参数这个url地址是需要调用jssdk页面的地址。
  • 提供返回值的BFF层，要做几件事情
    • 获取当前时间戳，注意这里是s为单位的10位时间戳
    • 生成随机字符串，这个字符串是随机生成的每次不一样
    • 根据appid和secret获取asccess_token，然后根据token来获取jsapi_ticket，这一步需要注意的是这两个接口都不能频繁请求，需要全局缓存这两个值，可以采用不同方法缓存。
    • 以上三步结束后，就将生成的10位时间戳timestamp，随机字符串nonceStr，生成的jsapi_ticket和前端调用这个接口传过来的url，这几个放一起按照字段名（timestamp，nonceStr，jsapi_ticket,url）的ASCII 码从小到大排序（字典序），排序完毕后使用&符号进行连接。（这一步需要注意的是必须按照这几个字段名，不能使用其他字段名，还有就是按照字段名的排序一定要对，排列好大概是下面示例那种的顺序中间有&符号进行拼接，然后再去执行最后一步）
    • 最后一步根据得到的值进行sha签名
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

这一步权限验证的代码我黏贴在下面

工具函数：

carbon (6).png

调用工具函数：

carbon (7).png

注意

这里需要注意的是这个签名一定要生成对，这个至关重要，我觉得这里是引入jssdk最重要的地方，如果这里弄错了，后面怎么改都成功不了，所以这个签名一定要生成对，下面提供一个方法判断自己的签名是否生成对了。 mp.weixin.qq.com/debug/cgi-b… 就是这个地址，把你上面代码中获得的随机字符串，时间戳，jsapi_ticket，url这几个参数都打印出来，然后将参数填到下面的网址中，生成签名，如果这里生成的签名与你代码中生成的签名（signature）一致，那就恭喜你生成签名就没问题了，如果跟自己代码生成的不一致，那就是我步骤三中的几步哪里出错了。只有这里签名对了才能继续。

image.png

4.步骤四：成功/失败验证

验证成功或者失败，在uniapp中调用上一步提供的接口，然后把接收的appId，timestamp，nonceStr，signature，传入到config里面，我是单独封装了一个文件，代码如下（我是在uniapp中调用接口），在wx.ready中可以进行成功的验证，在wx.error中可以监听到失败的打印：

carbon.png 上一步操作完，就可以使用网页jssdk啦。我使用的是扫一扫功能，我这里也单独封装了一个函数。在需要执行扫一扫的页面中在onshow中调用上张图片的jsSdkSign函数进行页面的权限验证，验证成功后就可以在这个页面中使用扫一扫功能来，我这里面是直接调用自己封装的scanQRCde函数。这里面有个需要注意的点是（我是在wx.ready中调用的jssdk的扫码函数，这个很重要）用以下这个方法就可以了。代码如下：

02.png

总结

上面步骤操作完成后其实引入微信网页jssdk基本结束了，但是如果步骤一中没有配置，没法验证，而且也只能到生产才可以验证，只要按照上面步骤来基本都是没问题的。

最重要的一步就是步骤三，只要步骤三中代码生成的的签名与那个地址生成的签名一致，基本没什么问题。

avatar
文章
阅读
粉丝