uniapp App(Android、iOS)适配建议

uniapp功能强大,但是难免会存在一些适配的坑,此文记录一些适配的经验,会持续更新,希望能帮助到正在适配app中你,如你有新的适配经验,欢迎留言、评论。

当新功能开发完毕后需真机运行适配App,避免再让其他人专门花时间适配app

下面总结是一些适配的经验:

判断条件

在组件上判断时,判断条件不宜过多(或者是字典的名字不要太长),条件过多app判断不过来,最好不要超过3个判断条件,超过之后建议将判断条件抽取为方法。

地图组件

使用到地图的页面,由于地图图层是原生组件,如需在地图上显示组件时,需用原生组件,如原生组件不能满足业务时,可将地图组件的高度设置为0来实现显示自定义组件;也可通过uni.showActionSheet实现自定义选择(如满足需求)。

背景色

当页面存在背景色时,如果将页面的高度设置为100%或者100vh,如果页面不滑动,不存在任何问题,但是涉及到滑动的时候就会出现白色区域,此时需要使用min-height=100%来实现,该样式已抽取至App.vue中,页面只需要将根布局的class设置为container即可。

图表统计(关于eCharts的使用)

涉及到图表统计请使用官方推荐的体积更小、性能更优、体验更佳、已适配App的uCharts;eCharts不适合在App端使用,适配性不好(app端图表错位)。

字段未定义直接作为判断条件时app异常问题

当某个对象的字段未在data中定义,直接使用该字段时,app出现异常(代码不往下执行、不抛出异常);

比如data中只定义了对象名称,未定义该对象的字段

data() {
		return {
			addForm:null
		}
	}

此时直接使用addForm的第三层字段addForm.user.sex,H5没有什么问题,App端,如果你打日志会发现,只会执行到使用该第三层的地方,之后的代码都不执行,并且不会抛出任何异常。


//错误使用
if(addForm.user.sex===1){
	//处理逻辑
}

//正确使用
if(this.addForm&&this.addForm.user&&addForm.user.sex&&addForm.user.sex===1){//如果该对象是多层级的,需要从最外层开始逐层判断,不能直接使用最内层判断。
	//判断完成再处理逻辑
}

解决办法:

  • 1、在data中定义该字段;

  • 2、在使用字段前加非空判断,如果该对象是多层级的,需要从最外层开始逐层判断,不能直接使用最内层判断。

递归组件勿使用组件的name

递归组件直接使用组件的name,H5无任何问题,但是App端因为打包规则的原因,不能直接使用name;

解决办法:导入自身作为组件即可。

eg:流程表单组件,涉及到递归组件,不能直接使用TaskForm,需要导入自身作为组件

task-form组件:

//为了适配App端,需要导入自身作为组件
import TaskForm from '@/components/main/task-v1/task-form'; 

export default {
	...
	components: {
		TaskForm,
		...
	},
	...

--------------------------------2020.6.2更新-------------------------------

Android6.0及以下的get请求异常

//android6.0及以下的手机,发起get请求时,参数中有空格不会自动编码,空格之后的数据会被截掉,导致接口请求异常,解决办法:将空格替换为下划线,eg:
if (key === 'name' && node[key]) {
	//空格替换为下划线
	node[key] = node[key].replace(/\s+| /gi, '_');
}

--------------------------------2020.7.17更新-------------------------------

循环中使用return出现的异常

eg:

	initMenu() {
		//省略代码1
		for (let i = 0; i < this.filterData.length; i++) {
			let tmpitem = this.filterData[i];
			if (!tmpitem) {
				return;
			}
		}
		//省略代码2
	}

以上代码如果某一个tmpitem为空,在H5中运行,“省略代码2”会执行,但是在App端就不会执行了,因为App端在for循环的时候用return的话是直接结束整个方法,而不是跳出循环

  • 解决办法:for循环中不要使用return,改用break即可;

持续更新中…

如果本教程帮助到你,请在评论区告诉我

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值