h5页面调用扫一扫功能

1,863 阅读2分钟

首先下载微信官网提供的js文件jweixin,然后配置环境
安卓和ios的h5在微信内置浏览器中获取路径不一样,ios跳转页面跳的是路由不是路径,所以在传路径给后台获取证书等配置时传的路径其实是项目第一个页面地址,而不是需要扫码的页面地址,所以在跳转时使用window.location.href=data跳转刷新地址解决,安卓不存在此问题

import { getWxScanSign } from '../api/seller.js'
import wx from '../plugin/jweixin-module'
export const wechatOpt = {
	//环境注入
	wxScanConfig : function(){
		//#ifdef H5
		let sUrl = window.location.href
		//#endif
		let params = {
			'jsUrl' : sUrl
		}
		getWxScanSign(params).then(res=>{
			let code = res.code;
			if(code=='000000'){
				let retData = res.data
				wx.config({
				    debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				    appId: retData.appId, // 必填,公众号的唯一标识
				    timestamp:retData.timestamp, // 必填,生成签名的时间戳
				    nonceStr: retData.nonceStr, // 必填,生成签名的随机串
				    signature: retData.signature,// 必填,签名
				    jsApiList: [
								'checkJsApi',
								'scanQRCode',
								'updateAppMessageShareData',
								'updateTimelineShareData'
				                ] // 必填,需要使用的JS接口列表
				});
			}
		})
	},
	//微信扫一扫jsApi检查
	wxScanCheck : function(callback){
		wx.ready(function(){//检查是否支持扫一扫功能
			wx.checkJsApi({
				jsApiList: [
					'checkJsApi',
					'scanQRCode'
				],
				success: function (res) {
					if(res.checkResult.scanQRCode === true){					
						wx.scanQRCode({//调起微信扫一扫接口
							// 默认为0,扫描结果由微信处理,1则直接返回扫描结果
							needResult : 1,
							scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
							success : function(res) {
								let result = res.resultStr;          // 当needResult 为 1 时,扫码返回的结果(result即为扫码返回的结果)
								callback(result)//调用回调
							}
						});
					}else{
						alert('抱歉,当前客户端版本不支持扫一扫,请升级到最新版')
					}

				},
				fail:function(res){// 检测getNetworkType该功能失败时处理
					alert('fail'+res)
				}
		    });
		})
		 /* 处理失败验证 */
		wx.error(function (res) {
			// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
		   alert('配置验证失败: ' + res.errMsg)
		})
	},

环境配置参数由后台获取,然后根据微信官方文档配置相关参数,包括所需功能api,然后使用wx.ready方法判断设备是否支持此api,成功则调用api执行回调,完成所需业务功能,
一下为所需此功能的页面

scanshow(){
	wechatOpt.wxScanCheck(this.submit);
},

this.submit为调用成功后获取到的参数后执行的相应逻辑的回调函数

submit(sCpnno) {
	let This = this
	let params = {
		sCpnno,//扫码返回的结果
		iVerifyType:4,
					iSeller:JSON.parse(uni.getStorageSync('userInfo')).iSeller,
					iSecondChannel:JSON.parse(uni.getStorageSync('userInfo')).iSecondChannel,
					sPhone:this.phoneValue
		}
				verifyCpn(params).then(res => {
					if(res.code == '000000'){
						This.successShow = true
						This.failShow = false
					}else{
						This.errMessage = res.message
						This.successShow = false
						This.failShow = true
					}
				})
			},