小程序開發(fā)注意事項(xiàng)
1.不能跨組件傳遞狀態(tài)狀態(tài)傳遞主要是指不管組件間是樹型關(guān)系還是兄弟關(guān)系，組件都不能像Html中的Dom結(jié)構(gòu)一樣使用Id訪問某一節(jié)點(diǎn)的狀態(tài)屬性值，如下面一個(gè)例子：12345678910swiper indicator-dots="{{indicatorDots}} ...
1.不能跨組件傳遞狀態(tài)
狀態(tài)傳遞主要是指不管組件間是樹型關(guān)系還是兄弟關(guān)系，組件都不能像Html中的Dom結(jié)構(gòu)一樣使用Id訪問某一節(jié)點(diǎn)的狀態(tài)屬性值，如下面一個(gè)例子：
|
1
2
3
4
5
6
7
8
9
10
|
<swiper indicator-dots="{{indicatorDots}}" bindchange="onswiperChange"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:key="bid" wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="../logs/logs?index={{swiperindex}}">
<image src="{{item}}" class="slide-image" mode="scaleToFill" />
</navigator>
</swiper-item>
</block>
</swiper>
|
在這個(gè)實(shí)例中如果我想在navigator組件中的url屬性中訪問swiper組件的CurrentIndex屬性是不可能的，只能通過綁定swiper的事件再使用變量的方式進(jìn)行綁定訪問。
2.wx:key的使用
在模板創(chuàng)建使用for生成組件時(shí)，使用wx:key，可以在執(zhí)行setData后刷新界面元素時(shí)不重新創(chuàng)建組件，而僅僅改變狀態(tài)或順序。
|
1
2
3
4
5
6
7
8
9
10
|
data: {
input_data: [
{ id: 1, unique: "unique1" },
{ id: 2, unique: "unique2" },
{ id: 3, unique: "unique3" },
{ id: 4, unique: "unique4" },
]
}
<input value="id:{{item.id}}" wx:for="{input_data}" wx:key="unique"/>
|
有wx:key的情況
添加元素或改變?cè)仨樞驅(qū)е聰?shù)據(jù)改變時(shí)， 會(huì)校正帶有Key的組件（可通過key識(shí)別各組件）， 框架會(huì)根據(jù)“目前數(shù)據(jù)”，重新排序各組件，而不是重新創(chuàng)建， 使組件保持自身的狀態(tài)，列表渲染效率高。
無wx:key的情況
添加元素或改變?cè)仨樞驅(qū)е聰?shù)據(jù)改變時(shí)， 此時(shí)各組件沒有key(無法識(shí)別各組件) 框架會(huì)被迫根據(jù)“目前數(shù)據(jù)”重新創(chuàng)建各組件， 使組件重置初始狀態(tài)（原有狀態(tài)自然被清空），列表渲染效率低。
wx:key=”*this”
表示綁定的是數(shù)據(jù)自身，如數(shù)據(jù)為一個(gè)數(shù)據(jù)數(shù)組或字符串?dāng)?shù)組時(shí)。
3.修改數(shù)據(jù)數(shù)組綁定的界面元素
數(shù)組： http://www.w3school.com.cn/jsref/jsref_obj_array.asp
事件： https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
edit:function (e){
//這個(gè)參數(shù)“e”的具體作用，請(qǐng)參考微信小程序官方提供的說明，地址為
var dataset = e.target.dataset;
//元素節(jié)點(diǎn)的attribute: data-index="{{index}}"傳遞過來的，是為識(shí)別正在編輯修改哪個(gè)數(shù)組。
var Index = dataset.index;
//我們要修改的數(shù)組
this.data.list[Index].name = '修改了內(nèi)容'+new Date().getTime();
//將合拼之后的數(shù)據(jù)，發(fā)送到視圖層，即渲染頁面
//大伙請(qǐng)記錄，修改了數(shù)據(jù)后，一定要再次執(zhí)行`this.setData()`，頁面才會(huì)渲染數(shù)據(jù)的。
this.setData({
list:this.data.list
});
}
|
4.刪除某條綁定的界面元素
|
1
2
3
4
5
6
7
8
9
10
|
remove:function (e){
var dataset = e.target.dataset;
var Index = dataset.index;
//通過`index`識(shí)別要?jiǎng)h除第幾條數(shù)據(jù)，第二個(gè)數(shù)據(jù)為要?jiǎng)h除的項(xiàng)目數(shù)量，通常為1
this.data.list.splice(Index,1);
//渲染數(shù)據(jù)
this.setData({
list:this.data.list
});
}
|
5.嵌套綁定
嵌套時(shí)要善用 wx:for-item
|
1
2
3
4
5
6
7
8
|
<view class="pad10" wx:for="{{twoList}}" wx:key="id">
<view>
{{index+1}}、{{item.name}}
</view>
<view wx:for="{{item.twodata}}" wx:for-item="twodata" wx:key="id">
----{{twodata.name}}---{{item.name}}
</view>
</view>
|
6.布局系統(tǒng)
小程序采用與CSS3和React一樣的布局系統(tǒng)：Flex Flex參考資源：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
http://blog.csdn.net/qq_34281962/article/details/52729215
7.小程序限制問題
（1）數(shù)據(jù)綁定
綁定表達(dá)式不能執(zhí)行方法，只能處理簡(jiǎn)單的運(yùn)算如 “+ -*/”，如果遇到集合數(shù)據(jù)綁定中需要數(shù)據(jù)格式的轉(zhuǎn)換，就需要遍歷list并對(duì)每個(gè)item進(jìn)行格式化，再執(zhí)行setData刷新界面。
（2）頁面跳轉(zhuǎn)
A頁面–>B頁面，B頁面返回A，如何觸發(fā)A的刷新。方案：在A頁面的onshow事件里寫A的初始化數(shù)據(jù)方法。
（3）樣式
本地資源無法通過 css 獲取 可以使用網(wǎng)絡(luò)圖片
（4）緩存
wx.setStorage() 目前每個(gè)小程序限制5M
（5）網(wǎng)絡(luò)請(qǐng)求
Post請(qǐng)求需要加表單提交時(shí)的頭信息 header: ‘content-type’: ‘application/x-www-form-urlencoded’
