微信公众号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是真实结果。
标签：必填,微信,H5,添加,res,wx,data,页面 来源： https://www.cnblogs.com/tt-ff/p/15727393.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。