持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。虽然说是跨平台，但相对于各个平台还是有稍微些不同的适配，在开发过程也容易遇到一些适配问题，本文记录一下在开发微信H5时，有一个ios手机不能弹出扫码界面的问题。

问题起源

首先uni-app h5是不支持微信扫码功能的，所以我们如果需要，就得引入微信官方的sdk. 首先这里是uni-app针对官方sdk做的适配文档uniapp.dcloud.net.cn/api/system/…

可以看到除了H5是不支持的。所以我们得去找到微信的官方sdk文档 developers.weixin.qq.com/doc/offiacc… 官方文档开发前一定要看！！！

开发步骤

先引入官方sdk

npm install jweixin-module --save

接着在我们需要调用扫码的界面引入

 import jweixin from 'jweixin-module'

 //获取h5参数
			   getH5Config(platform){
				   let configUrl=window.location.href.split('#')[0]
			 
			   	console.log('---url--',configUrl)
			   	let params={
			   		url:configUrl
			   	}
			      	h5GetConfigParams(params).then(res=>{
			      		 this.getConfig(res);	
			      	})
			      },

这个方法是把我们当前界面的url传给后台，回调对应的参数给我们初始化，重要的方法在getConfig里面

getConfig(res) {
					let that=this
			       // 配置config信息
			       jweixin.config({
						debug: false,
						appId: res.appId, // 必填，公众号的唯一标识
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名
						jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
			     	});
			       // 通过ready接口处理成功验证
			       jweixin.ready(function () {
						jweixin.checkJsApi({
								jsApiList: ['scanQRCode'],
								success: function (res) {
									console.log('检验成功');
									that.handleScan()
								}
						});
			     	});
			       // 通过error接口处理失败验证
			     	jweixin.error(function (res) {
						console.log('校验失败');
			     	});
			   },

如果验证通过那么就可以调起我们扫码的界面了看 handleScan 方法。

jweixin.scanQRCode({
  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});

正常通过上面的方法就能在微信H5里调用起微信扫一扫界面了。但是在ios手机上出现调用不起来，通过排查是url路径问题。在uni-app上我们跳转一个界面都是通过route api跳转，但是ios手机上这里识别到的路径会有问题吗所以得换种方式。

if(res.platform=='android'){
							uni.$u.route({
								url:"pagesDetail/index/chipList",
								params:{
									seriesName:this.seriesName,
									chipName:this.metaChoose.name,
									contract:this.metaChoose.contract,
								}
							})
						}else{
							let configUrl=  window.location.protocol+"//"+
							window.location.host+"/pagesDetail/index/chipList?seriesName="+this.seriesName
							+'&chipName='+this.metaChoose.name+'&contract='+this.metaChoose.contract
							window.open(configUrl)
						}

这里做了安卓手机和ios手机的判断，如果在安卓手机上，正常路由跳转就行，但是如果是ios 得通过拼凑下一个跳转页面的完整路径，在通过 window.open(configUrl) 来打开新的页面。

总结

这里是开发过程中碰到的一个扫码问题在ios手机的问题，因此记录一下，如果后续有人碰到相关问题，可以有个思路参考。

记一次uni-app上微信H5开发在ios扫码问题的记录

前言

问题起源

开发步骤

总结