通过微信公众号H5开发（js-SDK）实现扫一扫

背景： 在使用uniapp开发H5的过程中，有用到定位，扫码等功能。开发过程中发现，uniapp提供的uni.scanCode扫码api不支持H5，uniapp提供的uni.getLocation(OBJECT)也不能正常使用。此时就需要通过微信公众号提供的js-sdk来实现这些功能。

JS-SDK官方文档 ：developers.weixin.qq.com/doc/offiacc…

先看再用！！！

1. 这里的扫码通过依赖微信公众号开发完成，如果是小白，干活前问问老大，确定这个项目是否有对应的公众号，如果没有，此方法不通
2. 这个方式需要后端配合完成，通过后端给的接口完成注册（代码在有体现）

以扫码为例，定位使用方式与扫码基本相似，其他均为使用到，后期用到在做补充

下载weixin-js-sdk

npm i weixin-js-sdk --save

使用weixin-js-sdk

引入需要扫码的页面

import wx from 'weixin-js-sdk'

从后端获取connfig信息,也就是注册 （这一步需要后端协助完成）

签名算法见文末的附录1，所有JS接口列表见文末的附录2

//getWxConfigs是我封装的接口，用来请求后端的config数据
const getWxConfig = async () => {
  //获取当前页面url
	let url = window.location.href.split("#")[0]
	const { timestamp, noncestr, signature, appId } = await getWxConfigs({url})
  // 注册微信sdk
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId, // 必填，公众号的唯一标识
    timestamp, // 必填，生成签名的时间戳
    nonceStr: noncestr, // 必填，生成签名的随机串
    signature,// 必填，签名
    jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
  });
}
// 扫码
const scanCode = ()=>{
  wx.scanQRCode({
		desc: 'scanQRCode desc',
		needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
		scanType: ['barCode'], // 可以指定扫二维码还是一维码，默认二者都有
		success: function(res) {
			console.log(res.resultStr)
		}
	});
}