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

頁(yè)面：

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

scrollView組件：

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

輸出結(jié)果：

2.組件沒(méi)有頁(yè)面事件

也就沒(méi)有onload等事件，只支持vue原生事件

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

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

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

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

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

正確加載順序：

created  > onload  > mounted

所以如果你在onload中對(duì)頁(yè)面參數(shù)賦值，正好要將這個(gè)值傳給組件。組件又正好需要onload時(shí)調(diào)用時(shí)，要使用mounted事件。

頁(yè)面代碼：

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)對(duì)背景圖片的描述：

支持 base64 格式圖片。

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

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

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

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

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

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

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

所以有強(qiáng)迫癥的小伙伴可以把變量名寫(xiě)成單獨(dú)的一個(gè)計(jì)算屬性就不會(huì)報(bào)錯(cuò)了，像這樣：

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

4.代理

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

打開(kāi)manifest.json的源碼視圖，添加代碼：

"h5": {
		"devServer": {
			"port": 8000,
			"disableHostCheck": true,
			"proxy": {
				"/WxPalmHal": {
					"target": "http://192.168.1.46:4000/wxapi/WxPalmHal",
					/* 一定要加下面這一句 否則會(huì)原文編譯 */
					"pathRewrite": {"^/WxPalmHal" : ""}
					
				}
			}
		}
	},

5.z-index的問(wèn)題

需要對(duì)z-index的元素添加position: relative屬性

9.8補(bǔ)充： 現(xiàn)在發(fā)現(xiàn)我好傻，z-index本來(lái)不就是只能在定位元素上使用嘛。。

6.trim去除前后空格失效

總結(jié)

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

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

最新評(píng)論