微信公众号H5页面调用微信扫一扫功能需要通过微信JSSDK（调用其他接口也是一样的方法），且需要前后端配合，具体步骤如下：
1、获取appID和AppSecret
从微信公众号--开发--基本配置中获取**”开发者ID(AppID)“和”开发者密码(AppSecret)“**。开发者密码启用注意马上复制保存，这样以后再用的时候无须再次启用。
2、获取微信签名、随机串、时间戳
后端拿到appID和AppSecret后去获取微信公众号的签名、随机串、时间戳。官方文档中有后端示例代码：传送门
后端需写接口将拿到数据返回前端使用：
需要注意是：确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
接口出参：
appId: "xxxxxxxx"
nonceStr: "xxxxxxxx"
signature: "xxxxxxxx"
timestamp: xxxxxxxx
url: "https://www.baidu.com/mini-h5/"(举例)
3、添加IP白名单、添加安全域名
在微信公众号--开发–基本配置中将项目各种环境的IP地址添加为白名单（开发、测试、演示、正式环境）。
在微信公众号--设置–功能设置中添加项目各种环境的域名（不用带http:// 或https://）。添加域名前需按照域名添加要求将上面的txt文件放入项目根目录，并确保可以访问，可以访问域名才能添加成功。
4、在项目文件中安装jssdk的依赖并引入该依赖
安装依赖：yarn add weixin-js-jdk 或者 npm intall weixin-js-jdk
引入依赖：import wx from 'weixin-js-jdk'
5、在需要使用微信接口的页面配置wx.config
从后端拿到签名、时间戳、随机串的data后配置到文件中
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: data.appid, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.noncestr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名，见附录1
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，
});
/**wx.error可以返回微信config配置是否成功*/
wx.error(function (res) {
console.log('res',res);
});
6、调用微信接口
wx.scanCode({
success (res) {
console.log(res)
}
})
扫描单号返回的res.resultStr格式根据扫描类型不同会不一样，所以取值的时候要提前console.log看下扫描结果；
比如：条形码res.resultStr是“CODE_128,1680200805313265”，二维码是“1680200805313265”， 其中1680200805313265是真实结果。
