经过项目环境的搭建以及项目配置，现在项目已经启动了，然后我们就可以进行项目的开发了。然而在开发的过程中我需要使用微信的功能接口。如：调取扫码功能。这个时候我们就需要使用JS-SDK
官方说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
然而现实是：我们即便看了这个文档，但实际操作上还是会出不少的问题，所以接下来便记录一下当前所遇到过的问题以及自己的使用过程。
第一步：阅读官方JSSDK的使用步骤
-
步骤一解读：所谓的绑定域名就是在测试号中绑定内网映射工具赠送的域名
-
步骤二解读：引入js文件，这里支持使用直接在html文件中使用<script 标签的方式引入，也支持使用npm。 由于我使用的vue脚手架所以使用的npm方式。如下：
npm install weixin-js-sdk --save // 第一种方式： //在组件中引入 var wx = require('weixin-js-sdk') //然后使用即可 wx.xxx({ }) // 第二种方式： // 在main.js中引入并且全局注册在vue原型链上即可
看到步骤三、步骤四、步骤五我就遇到了问题，步骤三的配置数据从哪里来？
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
仔细查看文档后发现，结果内容在最底下的附录1中。
在附录1中记录了js-sdk的权限签名算法，如果你是前后端分离开发的前端人员，那么请把这个任务交给后端，必须让他写接口(因为前端弄的话会出现跨域问题以及每次调用都会进行多次请求与计算严重影响性能)，并且把这个附录1给他看即可。最后的结果就是他会做出一个接口出来，你只需传入一个url(当前网址的前缀部分)，即可获得appId、timestamp、nonceStr、signature这四个内容。
我的前端代码参考如下：(需要给后端人员提供appId和appsecret)
------每一次使用jssdkapi的某个功能都需要走一下这个流程
// 获取jsapi授权签名信息
let myurl = location.href.split("#")[0]; // 传递给后端的url
this.$axios.get("/emergency-bag-sys/api/accessToken/getWxJsapi",{
params: {
url: myurl}})
.then((res) => {
console.log("接口返回的信息", res);
// 调起配置
wx.config({
debug: false, // 关闭调试模式
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名
jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表
});
wx.ready(function () {
//开启扫描功能
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (resson) {
var result = resson.resultStr; // 当needResult 为 1 时，扫码返回的结果
// 拿到结果后做逻辑处理即可
},
});
});
wx.error(function (res2) {
console.log("扫码错误信息", res2);
});
});
最常见的问题就是 63002 无效的签名 这个错误，这个时候一定要后端人员检查接口流程是否正确。
常见错误可见文档附录5-常见错误及解决方法