uni-app开发微信公众号(H5)时，实现扫码功能

在uni-app官网上发现uni-app不支持H5扫码功能。

但是下面的提示说明可以通过微信的JS-SDK实现扫码功能
JS-SDK说明文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

步骤一：引入sdk

这里有两种引入方式：
1.按照文档的方法，下载js文件，直接引入到项目里
2.通过npm安装

npm install jweixin-module --save
// 按需引入
import jweixin from 'jweixin-module'

步骤二：配置config信息

// 最好是在onLoad中调用
async onLoad() {
    await this.getJsApiConfig();
},

methods: {
    // 调用接口获取config信息
    async getJsApiConfig() {
        /*
        	确认location.href.split('#')[0]获取到的url是当前页面的域名，而不是完整url
        	
        	例如：
        	地址为https://www.baidu.com/pages/searchList
        	确认location.href.split('#')[0]获取到的url为：
        	https://www.baidu.com
        	若不是则自己用其他方法截取
        */
        const url = location.href.split('#')[0];
        await uni.request({
			url: '/api/user/wx/getJsApiConfig2', // 此处找后端要接口
            methods: 'GET',
			data: {
				url: apiUrl // 当前页面的域名
			},
			success: (resopnse) => {
                const res = response.data;
                if (res.success) {
                    this.getConfig(res.data);
                }
            }
		});
    },
    getConfig(res) {
        // 配置config信息
        jweixin.config({
        	debug: false,
        	appId: res.appId, // 必填，公众号的唯一标识
        	timestamp: res.timestamp, // 必填，生成签名的时间戳
        	nonceStr: res.noncestr, // 必填，生成签名的随机串
        	signature: res.signature, // 必填，签名
        	jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
      	});
        // 通过ready接口处理成功验证
        jweixin.ready(function () {
        	jweixin.checkJsApi({
          		jsApiList: ['scanQRCode'],
          		success: function (res) {
            		console.log('检验成功');
          		}
        	});
      	});
        // 通过error接口处理失败验证
      	jweixin.error(function (res) {
        	console.log('校验失败');
      	});
    }
}

步骤三：触发事件实现扫码功能

// 触发事件
handleScan() {
    jweixin.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: (res) => {
          // 当needResult 为 1 时，扫码返回的结果
          console.log('扫码成功', res);
        }
     });
}

在校验config配置时常见错误(具体的在js-sdk说明文档的附录5，请自行查看)
最常见的错误就是invalid signature签名错误

注意事项

在调用后端接口获取config信息的时候
1.传给后端的url参数，记得一定是网页域名！！！（图上的第三小点是个坑！！！）
2.最好让后端把jsapi_ticket的值也返回，便于在自行使用工具校验签名算法的时候输入。
3.记得让后端把timestamp把后三位数去掉，因为签名校验中的timestamp最多只能输入10位。

以上均为个人工作记录，小白仍需努力！