本文用于个人记录，技术积累，前端小白，希望能对他人也有帮助。

前提：

之前没有接触过公众号的开发，公司需要在当前的公众号中添加售后追踪功能，需要在其中添加扫码获取设备信息功能便于用户填写表单信息。

使用的工具

uniapp进行H5页面开发；使用HBuilder X编写
微信开发者工具—— 公众号网页进行调试；
weixin-js-sdk 获取微信原生功能在公众号页面进行使用；

实现功能：

公众号中用户进入功能菜单后，跳转到H5页面，通过页面中的扫码按钮，进行扫码获取设备信息，完善当前表格信息；

实现方法

1. uniapp中创建项目，搭建相关的前端页面；采用的uView

2. 下载 weixin-js-sdk

HBuilder X中在命令行中打开该项目，进行npm 包下载

    npm install weixin-js-sdk

安装成功后，在需要使用扫码功能的页面进行导入;后续使用 wx.config 进行配置。

    import wx from 'weixin-js-sdk';

3. JSSDK使用步骤

具体信息可看微信官方文档[：](url)https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
前提：公众号设置中已经设置了“JS接口安全域名”
通过config接口注入权限验证配置

wx.config({
  // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，
  // 若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  debug: true, 
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

timestamp、nonceStr、signature 需要后端根据官方文档签名算法获取，前端通过接口获取参数值。我们要实现的是扫码功能，因此 ### 调起微信扫一扫接口

jsApiList: [scanQRCode、checkJsApi]

checkJsApi 作用：用来判断当前客户端版本是否支持指定接口。注：后端在进行签名算法的实现过程中，需要当前网页的URL（当前网页的URL，不包含#及其后面部分），前端在请求接口的时候，传给后端即可。

    let url = window.location.href.split('#')[0]

官方文档中提供了 ready 处理成功验证与 error 处理失败验证。

wx.ready(function(){
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后， 
  // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接
  // 口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，
  // 则可以直接调用，不需要放在 ready 函数中。
  console.log('配置完成，扫码前准备完成')
});

wx.error(function(res){
  // config信息验证失败会执行 error 函数，如签名过期导致验证失败，
  // 具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，
  // 对于 SPA 可以在这里更新签名。
});

完成这几步后，如果微信开发工具-公众号网页项目中，可看到配置完成信息，即代表 weixin-js-sdk 使用成功，获取到了扫码权限

备注：如果想要通过微信开发工具-公众号网页项目中进行调试，需要在 HBuilder X 中将进行发行 发行 =》网站-PC 将打包成功的H5代码发布到服务器下，在开发工具中输入网址进行访问调试。

4. 获取扫码信息

通过前端页面中扫码按钮，调用扫码逻辑；将获取到的 resultStr 渲染到form 表单中。

/**
* 用户进行 设备条形码的扫描
*/
scanCode() {
    wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
	scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
	success: res => {
            this.formMsg.deviceCode = res.resultStr;
	}
    });
},

本次功能实现过程中遇到的问题：

在于后端进行接口调试的过程中一直返回：防伪令牌丢失或失效；
原因：
1、Cookie中存储的 X-XSRF-TOKEN；在web端中使用的 XSRF-TOKEN
2、uniapp中进行网络请求，uni.request 通过 header 进行传递 Cookie；需要配置 withCredentials: true
作用：跨域请求时是否携带凭证（cookies）

uni.request({
    method: ‘GET’,
    url: baseUrl + url,
    data,
    header: header,
    dataType: 'json',
    withCredentials: true,
})

注意：使用 weixin-js-sdk 是面向开发者提供的基于微信内的网页开发工具包；如果用户通过浏览器进行打开该网页，则无法使用微信的扫一扫功能；目前采用的方法：可判断用户当前是否处于微信环境；给用户进行相关的提示。

// 当前是否是微信环境
isWeixin() {
    return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
}

至此，本次功能需求实现完毕，大家有更好的方法或者见解，欢迎提出来，希望在前端的路上不断积累，越走越远。

微信公众号内H5调用扫码

前提：