1. props傳值變量名不要使用id

頁面：

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

scrollView組件：

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

輸出結(jié)果：

2.組件沒有頁面事件

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

那么created、mounted與onload 的先后順序是怎么樣的呢

參考uni-app官網(wǎng)文檔：https://uniapp.dcloud.io/collocation/frame/lifetime

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

mounted是在模板渲染之后，onload是在頁面渲染之后，那么具體哪個先呢。測試結(jié)果如下：

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

正確加載順序：

created  > onload  > mounted

所以如果你在onload中對頁面參數(shù)賦值，正好要將這個值傳給組件。組件又正好需要onload時調(diào)用時，要使用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)
}

結(jié)果：

3.關(guān)于背景圖片

首先引入一下uni-app官網(wǎng)對背景圖片的描述：

支持 base64 格式圖片。

支持網(wǎng)絡(luò)路徑圖片。

使用本地路徑背景圖片需注意：

• 圖片小于 40kb，uni-app 會自動將其轉(zhuǎn)化為 base64 格式；
• 圖片大于等于 40kb， 需開發(fā)者自己將其轉(zhuǎn)換為base64格式使用，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用。
• 本地背景圖片的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）。

如果是要做微信小程序的話，不分包整個應(yīng)用大小得在2MB以下，所以最好將圖片存放在服務(wù)器上面。如果要放在本地切記壓縮后，通過<img> 去設(shè)置背景圖樣式。使用background-img 在小程序下是無效的。

當(dāng)你通過變量+字符串的形式去設(shè)置img 地址時，系統(tǒng)會給你報500錯誤。像這樣：

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

但是圖片照樣顯示出來了，并不影響效果。樓主網(wǎng)上查了一下意思大致是由于頁面剛加載的時候沒有讀取變量，所以報錯，后續(xù)又加載上了所以讀取到了文件地址。（如有不對請指正）

所以有強(qiáng)迫癥的小伙伴可以把變量名寫成單獨(dú)的一個計算屬性就不會報錯了，像這樣：

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

4.代理

根據(jù)官網(wǎng)說明，uni-app的devServer就是webpack下的devServer，具有相同的配置屬性，但是屬性值暫時不支持以函數(shù)為形式的值。

打開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補(bǔ)充： 現(xiàn)在發(fā)現(xiàn)我好傻，z-index本來不就是只能在定位元素上使用嘛。。

6.trim去除前后空格失效

總結(jié)

就先這樣吧， 后續(xù)有問題將會持續(xù)記錄

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論