自己做了一个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)调用微信扫一扫就实现了,是不是很简单,
最后附上效果
讲得不是很好,但是用这个方法一定可以调起微信扫一扫!
想要代码可以找我拿
必须要配合公众号使用吗??
您好,楼主这个方法在iOS上测试过吗?谢谢。
您好,请问可以加下联系方式?想向你讨教下uniapp微信扫码功能
楼主,我现在Android手机能正常使用扫码功能,但iOS会提示签名错误,我加你QQ了,可以向您求教一下嘛?
求个代码呀谢谢楼主,QQ已经加你啦
errmsg:config:invalid url domain
报这种错一般是什么问题?
HXD,我加你QQ了,问几个问题。求解答
方便给一下完整的代码?谢谢
我用了您的方法,但是依然在手机端就是有时候能调到,有时候调不到
您好,想跟您交流下关于uinapp H5开发微信扫码的功能,请问怎么联系您?