在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中踩過的坑有哪些及如何解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。