利用uni-app生成微信小程式的踩坑記錄

2022-04-05 13:00:26

前言

畢設要求寫一個瀏覽器端，一個APP端，一個微信端，剛開始以為要學三個技術然後寫三個使用者端，後來知道了uni-app這個神器，一次編寫就可以編譯生成APP、H5以及各種小程式版本的使用者端。然而我比較熟悉的是web的前端開發，而且瀏覽器用於測試也是唾手可得，所以整個開發過程中用瀏覽器測試的基本上都很順利，展現的效果也很好，然而在編譯小程式端的時候出了很大的問題，整個頁面都扭曲了，經過這兩天的查資料與修復，終於得到了瀏覽器中的效果，正好也記錄一下這些坑。

1.不允許id選擇器

這個問題是最容易發現的，在h5頁面中用id標記標籤很常見，然後在css中用#+id來設定標籤的style，但是微信小程式中是不能用id選擇器的，從警告內容中很容易發現。

從警告中還可以看出，小程式中標籤名、屬性名選擇器都不能用。

2.預設豎排

在H5頁面中，元素預設是橫排的，但是在小程式中，元素是預設豎排的，因此最好顯式的設定元素的橫排豎排，這樣就不會發生頁面錯亂了。

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

3.圖片載入不出來

其實這個原因官網的檔案上有寫，不過我沒仔細看

而且H5中用相對路徑可以正常載入，但是在小程式中就不行了，所以最好還是用絕對路徑吧。

../../../static/xxx.jpg # 相對路徑
/static/xxx.jpg # 絕對路徑

4.eval函數不可用

之前寫H5的時候，總是很習慣的用eval(字串)來得到數位、JavaScript物件等，但是在微信小程式端這些轉換都會報錯，因此最好的方式是使用對應的轉換API，比如數位可以用parseInt、JSON物件可以用JSON.parse等。

5.getStorage非同步

在H5頁面中，這樣寫是可以拿到儲存的資料的：

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

但是在小程式中，這段程式碼就會出錯，我猜是小程式中讀取儲存資料略慢吧，而且我上面的這種寫法也不標準，因此嚴格應該這樣寫就不會出錯：

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

6.props的中的值不可修改

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

如上所示，我一開始是直接利用questions中的資料通過v-for來進行動態的頁面渲染，用這種方式questions的值可以直接從標籤的屬性設定，會非常方便，即使後面利用this.questions.push(x)給它增加新元素H5頁面也可以更新。但是在微信小程式端就沒有反應了，不管怎麼修改，它都不能動態的進行渲染，因此我在data中增加了一個ques用來進行渲染的資料來源：

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

然後只需要利用ques中的資料進行渲染即可，如果要新增元素，也是通過修改ques來辦到，如this.ques.push(x)

7.wx.uploadFile攜帶字串引數

上傳檔案時，按照微信官方的檔案，總是不能成功提交表單格式的字串引數，有一種解決方法是把上傳檔案和上傳字串分割成兩個介面，但由於我的上傳檔案包含許可權驗證的token，因此必須在上傳檔案的同時攜帶token才行，所以最終用了拼接地址的方法解決了這個問題：

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'   //請求方式
	},
	success (res){
		...
	}
})

8.picker的multiSelector mode中選擇框出現undefined

展示一下出錯的效果圖：

可以看到所有的選項都成了undefined。

這裡是因為我一開始的資料使用的都是普通陣列，每一列都是字串或數位陣列，比如[[1,2,3],[1,2,3,4,5]]這樣，在H5頁面中這樣做沒有問題，但是在小程式中就會出現錯誤，因此這裡每一列都必須採用物件陣列，例如一個很簡單的解決方案：

首先寫資料的時候需要用物件陣列的方式

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

然後在標籤中用如下的方法：

<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不能帶冒號，而且裡面的值應該是物件陣列中的key