前言

畢設(shè)要求寫(xiě)一個(gè)瀏覽器端，一個(gè)APP端，一個(gè)微信端，剛開(kāi)始以為要學(xué)三個(gè)技術(shù)然后寫(xiě)三個(gè)客戶端，后來(lái)知道了uni-app這個(gè)神器，一次編寫(xiě)就可以編譯生成APP、H5以及各種小程序版本的客戶端。然而我比較熟悉的是web的前端開(kāi)發(fā)，而且瀏覽器用于測(cè)試也是唾手可得，所以整個(gè)開(kāi)發(fā)過(guò)程中用瀏覽器測(cè)試的基本上都很順利，展現(xiàn)的效果也很好，然而在編譯小程序端的時(shí)候出了很大的問(wèn)題，整個(gè)頁(yè)面都扭曲了，經(jīng)過(guò)這兩天的查資料與修復(fù)，終于得到了瀏覽器中的效果，正好也記錄一下這些坑。

1.不允許id選擇器

這個(gè)問(wèn)題是最容易發(fā)現(xiàn)的，在h5頁(yè)面中用id標(biāo)記標(biāo)簽很常見(jiàn)，然后在css中用#+id來(lái)設(shè)置標(biāo)簽的style，但是微信小程序中是不能用id選擇器的，從警告內(nèi)容中很容易發(fā)現(xiàn)。

從警告中還可以看出，小程序中標(biāo)簽名、屬性名選擇器都不能用。

2.默認(rèn)豎排

在H5頁(yè)面中，元素默認(rèn)是橫排的，但是在小程序中，元素是默認(rèn)豎排的，因此最好顯式的設(shè)置元素的橫排豎排，這樣就不會(huì)發(fā)生頁(yè)面錯(cuò)亂了。

.row-arrange{
    flex-direction: row;	/*橫排元素*/
}

3.圖片加載不出來(lái)

其實(shí)這個(gè)原因官網(wǎng)的文檔上有寫(xiě)，不過(guò)我沒(méi)仔細(xì)看

而且H5中用相對(duì)路徑可以正常加載，但是在小程序中就不行了，所以最好還是用絕對(duì)路徑吧。

../../../static/xxx.jpg # 相對(duì)路徑
/static/xxx.jpg # 絕對(duì)路徑

4.eval函數(shù)不可用

之前寫(xiě)H5的時(shí)候，總是很習(xí)慣的用eval(字符串)來(lái)得到數(shù)字、JavaScript對(duì)象等，但是在微信小程序端這些轉(zhuǎn)換都會(huì)報(bào)錯(cuò)，因此最好的方式是使用對(duì)應(yīng)的轉(zhuǎn)換API，比如數(shù)字可以用parseInt、JSON對(duì)象可以用JSON.parse等。

5.getStorage異步

在H5頁(yè)面中，這樣寫(xiě)是可以拿到存儲(chǔ)的數(shù)據(jù)的：

var data;
uni.getStorage({
	title : 'xxx',
	success : function(res){
		data = res.data;
	}
})
this.data = data;

但是在小程序中，這段代碼就會(huì)出錯(cuò)，我猜是小程序中讀取存儲(chǔ)數(shù)據(jù)略慢吧，而且我上面的這種寫(xiě)法也不標(biāo)準(zhǔn)，因此嚴(yán)格應(yīng)該這樣寫(xiě)就不會(huì)出錯(cuò)：

var vm = this;
uni.getStorage({
	title : 'xxx',
	success : function(res){
		vm.data = res.data;
	}
})

6.props的中的值不可修改

props : { 
	questions : {
		type : Array,
		default : []
	},
},

如上所示，我一開(kāi)始是直接利用questions中的數(shù)據(jù)通過(guò)v-for來(lái)進(jìn)行動(dòng)態(tài)的頁(yè)面渲染，用這種方式questions的值可以直接從標(biāo)簽的屬性設(shè)置，會(huì)非常方便，即使后面利用this.questions.push(x)給它增加新元素H5頁(yè)面也可以更新。但是在微信小程序端就沒(méi)有反應(yīng)了，不管怎么修改，它都不能動(dòng)態(tài)的進(jìn)行渲染，因此我在data中增加了一個(gè)ques用來(lái)進(jìn)行渲染的數(shù)據(jù)來(lái)源：

data() {
	return {
		ques : [],
	};
},
props : { 
	questions : {
		type : Array,
		default : []
	},
},
created : function(){
	...
	this.ques = this.questions;
},

然后只需要利用ques中的數(shù)據(jù)進(jìn)行渲染即可，如果要添加元素，也是通過(guò)修改ques來(lái)辦到，如this.ques.push(x)

7.wx.uploadFile攜帶字符串參數(shù)

上傳文件時(shí)，按照微信官方的文檔，總是不能成功提交表單格式的字符串參數(shù)，有一種解決方法是把上傳文件和上傳字符串分割成兩個(gè)接口，但由于我的上傳文件包含權(quán)限驗(yàn)證的token，因此必須在上傳文件的同時(shí)攜帶token才行，所以最終用了拼接地址的方法解決了這個(gè)問(wèn)題：

wx.uploadFile({
	url: vm.fileurl + '/file/uploadPic?token=' + tokenJson['token'] + '&userId=' + tokenJson['userId'], //圖片文件上傳接口
	filePath: vm.src,
	name: 'pic',  //
	header: { 
		'Content-Type': 'multipart/form-data',
	},
	formData: {
		method: 'POST'   //請(qǐng)求方式
	},
	success (res){
		...
	}
})

8.picker的multiSelector mode中選擇框出現(xiàn)undefined

展示一下出錯(cuò)的效果圖：

可以看到所有的選項(xiàng)都成了undefined。

這里是因?yàn)槲乙婚_(kāi)始的數(shù)據(jù)使用的都是普通數(shù)組，每一列都是字符串或數(shù)字?jǐn)?shù)組，比如[[1,2,3],[1,2,3,4,5]]這樣，在H5頁(yè)面中這樣做沒(méi)有問(wèn)題，但是在小程序中就會(huì)出現(xiàn)錯(cuò)誤，因此這里每一列都必須采用對(duì)象數(shù)組，例如一個(gè)很簡(jiǎn)單的解決方案：

首先寫(xiě)數(shù)據(jù)的時(shí)候需要用對(duì)象數(shù)組的方式

data() {
    return {
		area : [[{'name':'北京市'},{'name':'河北省'}],[{'name':'邢臺(tái)市'},{'name':'石家莊市'}],[{'name':'不知道縣'}]],
		areaIndex : [1,0,0],
	}
}

然后在標(biāo)簽中用如下的方法：

<picker mode="multiSelector" :value="areaIndex" :range="area" range-key="name" @columnchange="changeColumn" style="width:100%;">
	<view class="row-arrange">
		<text class="little-font-size">{{area[0][areaIndex[0]].name}}</text>
		<text class="little-font-size">{{area[1][areaIndex[1]].name}}</text>
		<text class="little-font-size">{{area[2][areaIndex[2]].name}}</text>
	</view>
</picker>

注意這里的range-key不能帶冒號(hào)，而且里面的值應(yīng)該是對(duì)象數(shù)組中的key

總結(jié)

到此這篇關(guān)于利用uni-app生成微信小程序踩坑的文章就介紹到這了,更多相關(guān)uni-app生成微信小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論