在uni-app中踩过的坑有哪些及如何解决

今天小编给大家分享一下在uni-app中踩过的坑有哪些及如何解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

1. props传值变量名不要使用id

页面：

<scrollView :dataInfo.sync='questions' myId='333' id='444'>

scrollView组件：

created() {
	console.log(this.myId)
	console.log(this.id)
}

输出结果：

2.组件没有页面事件

也就没有onload等事件，只支持vue原生事件

那么created、mounted与onload 的先后顺序是怎么样的呢

参考uni-app官网文档：https://uniapp.dcloud.io/collocation/frame/lifetime

参考vue官方文档：https://cn.vuejs.org/v2/guide/instance.html

created 是在模板渲染前，也就是在onload之前。

mounted是在模板渲染之后，onload是在页面渲染之后，那么具体哪个先呢。测试结果如下：

mounted 是在onload之后，具体原因日后有空楼主去研究一下。

正确加载顺序：

created  > onload  > mounted

所以如果你在onload中对页面参数赋值，正好要将这个值传给组件。组件又正好需要onload时调用时，要使用mounted事件。

页面代码：

onLoad(obj) {
			console.log('onLoad:')
			console.log(obj)
			this.myId=obj.id

再把myId传给组件

组件代码：

created() {
	console.log('created:')
	console.log('myId:'+this.myId)
		},
mounted() {
	console.log('mounted:')
	console.log('myId:'+this.myId)
}

结果：

3.关于背景图片

首先引入一下uni-app官网对背景图片的描述：

支持 base64 格式图片。

支持网络路径图片。

使用本地路径背景图片需注意：

• 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；

• 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。

• 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

如果是要做微信小程序的话，不分包整个应用大小得在2MB以下，所以最好将图片存放在服务器上面。如果要放在本地切记压缩后，通过<img> 去设置背景图样式。使用background-img 在小程序下是无效的。

当你通过变量+字符串的形式去设置img 地址时，系统会给你报500错误。像这样：

 <img class="img-bom" :src="IMG_URL +'home-bg-bottom.png'">

但是图片照样显示出来了，并不影响效果。楼主网上查了一下意思大致是由于页面刚加载的时候没有读取变量，所以报错，后续又加载上了所以读取到了文件地址。（如有不对请指正）

所以有强迫症的小伙伴可以把变量名写成单独的一个计算属性就不会报错了，像这样：

<img class="img-top" :src="topImg">
 
topImg(){
	return this.IMG_URL +'home-bg-top.png'
}

4.代理

根据官网说明，uni-app的devServer就是webpack下的devServer，具有相同的配置属性，但是属性值暂时不支持以函数为形式的值。

打开manifest.json的源码视图，添加代码：

"h6": {
		"devServer": {
			"port": 8000,
			"disableHostCheck": true,
			"proxy": {
				"/WxPalmHal": {
					"target": "http://192.168.1.46:4000/wxapi/WxPalmHal",
					/* 一定要加下面这一句 否则会原文编译 */
					"pathRewrite": {"^/WxPalmHal" : ""}
					
				}
			}
		}
	},

5.z-index的问题

需要对z-index的元素添加position: relative属性

9.8补充： 现在发现我好傻，z-index本来不就是只能在定位元素上使用嘛。。

6.trim去除前后空格失效

以上就是“在uni-app中踩过的坑有哪些及如何解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。