uniapp开发微信公众号使用扫一扫的两种方法（JSSDK和识别图片二维码）

前言:
公司业务需要在微信公众号里使用微信扫一扫，想着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
},



复制代码