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即可；

持续更新中…

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