在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

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" :class="lazy" data-src="IMG_URL +'home-bg-bottom.png'">

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

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

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

4.代理

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

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

"h5": {
		"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去除前后空格失效

总结

就先这样吧， 后续有问题将会持续记录

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。