UNI-APP 开发微信公众号(H5)JSSDK的使用、微信扫一扫
自己做了一个h5端调起微信扫一扫的功能,上网一找,没有说得很详细的,依样画葫芦,结果出了很多问题。下面给大家讲一下做的方法,用这个方法亲测有效。 在做之前了解一下 JSSDK使用步骤,这个在 https://developers.weixin.qq.com/doc/ [图片] 如果看完这个,对UNIAPP(H5)JSSDK的使用还是不明白,可以看看下面这种方法 [图片] 这个随便一搜就有。下面开始实现 第一步引入jweixin-module文件,按照自己喜欢的方式途径下载好jweixin-module文件 本人是直接 npm install jweixin-module --save
[图片] [图片] 我们只需要引入文件夹里面的jweixin-module就行 在main.js加载jweixin-module文件 import wx from '@/node_modules/jweixin-module/lib/index' 这里的路径看你文件放在哪,我没有单独把jweixin-module文件提出来,你也可以提出来后放在components里面 接着就是页面中使用了 下面分段说明 [图片] 这里我在页面加载完毕的时候就请求接口了,你也自己封装一个方法,直接引入就行。 通过config接口注入权限设置(拿到签名数据后就是注入权限了) [图片] 最后在需要的地方使用就行啦 [图片] 最后附上我的代码,里面请求接口改成你自己的 <template> <view> <button class="bg-blue" @click="scancode()">扫码</button> </view> </template> <script> export default { data() { return {} }, onLoad() { // #ifdef H5 let redirect_uri = location.href.split('#')[0] this.$http.get('你的接口', { sing_url: redirect_uri }).then(res => { this.wx_co(res.data) }).catch(e => { console.log('错误信息', e); }); // #endif }, methods: { wx_co: function(wx_co) { this.$wx.config({ debug: false, // 开启调试模式 appId: wx_co.appId, // 必填,公众号的唯一标识 timestamp: wx_co.timestamp, // 必填,生成签名的时间戳 nonceStr: wx_co.nonceStr, // 必填,生成签名的随机串 signature: wx_co.signature, // 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); this.$wx.ready(function() { //需在用户可能点击分享按钮前就先调用 this.$wx.checkJsApi({ jsApiList: ['scanQRCode'], // 需要检测的JS接口列表,所有JS接口列表见附录2, success: function(res) { // 以键值对的形式返回,可用的api值true,不可用为false // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); }); this.$wx.error(function(res) { console.log(res, 'this.$wx.error') // config信息验证失败会执行error函数 }); }, scancode: function() { this.$wx.scanQRCode({ needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function(res) { var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 } }); } } } </script> <style lang="scss"> </style> 好了,到这里UNI-APP 开发微信公众号(H5)调用微信扫一扫就实现了,是不是很简单, 最后附上效果 [图片] [图片] 讲得不是很好,但是用这个方法一定可以调起微信扫一扫! 想要代码可以找我拿