前言:
公司业务需要在微信公众号里使用微信扫一扫,想着uniapp有uni.scanCode也不难,但查看uniapp文档后发现不支持h5端;了解到是因为浏览器权限问题,瞬间感觉事情麻烦了起来。
网上找了一段时间发现有两种方法可以实现:
第一种是使用微信的JSSDK调用微信提供的扫一扫。
第二种是把二维码以图片的形式上传,然后再解析图片中的二维码。
使用微信JSSDK调用扫一扫
这种方法会麻烦一点,需要后端写接口配合。如果公司业务对这块没有严格规定的话可以使用第二种方式。
下载weixin-js-sdk
npm i weixin-js-sdk --save
我这里下载的是1.6.0版本,不同版本可能会有代码不通用的情况,具体的可以查看官方文档。
使用weixin-js-sdk
在需要使用到扫一扫的页面引入weixin-js-sdk
import wx from 'weixin-js-sdk'
从后端获取connfig信息
//获取当前页面url
let url = window.location.href.split("#")[0]
//getWxConfigs是我封装的接口,用来请求后端的config数据
getWxConfigs({
url
}, res => {
let _data = res.data
//调用微信的js sdk
wx.config({
debug: false, //如果是true会在真机上有alert的调试信息提示
appId: _data.appId,
timestamp: _data.timestamp,
nonceStr: _data.nonce_str,
signature: _data.signature,
jsApiList: ['scanQRCode']
});
//调用扫一扫
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ['barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
console.log(res.resultStr)
}
});
})
注意:
1、获取当前的url需要是动态的。
2、要看后端的接口是什么类型的请求;如果是get,就需要对当前url用encodeURIComponent解码,如果是post就不需要。
3、wx.config这一步传入的_data参数记得改成你那边后端返回的字段名。
4、如果要跳转页面,不要使用uni.navgationTo,因为ios会报错。
二维码以图片形式上传
引入reqrcode.js
reqrcode.js用来解析图片中的二维码。
下载地址: reqrcode.js
在需要使用的页面里引入
import Qrcode from '../utils/reqrcode.js'
qrCode() {
let _this = this
uni.chooseImage({
count: 1, //默认9 上传数量
sourceType: ['camera', 'album'],
success: res => {
Qrcode.qrcode.decode(this.getObjectURL(res.tempFiles[0]))
Qrcode.qrcode.callback = function(res) {
console.log(res)
if (res.indexOf('error') >= 0) {
//失败
} else {
//成功
}
}
}
})
},
getObjectURL(file) {
var url = null
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file)
} else if (window.URL !== undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file)
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file)
}
return url
},