小程序開發注意事項
1.不能跨組件傳遞狀態狀態傳遞主要是指不管組件間是樹型關系還是兄弟關系，組件都不能像Html中的Dom結構一樣使用Id訪問某一節點的狀態屬性值，如下面一個例子：12345678910swiper indicator-dots="{{indicatorDots}} ...
1.不能跨組件傳遞狀態
狀態傳遞主要是指不管組件間是樹型關系還是兄弟關系，組件都不能像Html中的Dom結構一樣使用Id訪問某一節點的狀態屬性值，如下面一個例子：
|
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>
|
在這個實例中如果我想在navigator組件中的url屬性中訪問swiper組件的CurrentIndex屬性是不可能的，只能通過綁定swiper的事件再使用變量的方式進行綁定訪問。
2.wx:key的使用
在模板創建使用for生成組件時，使用wx:key，可以在執行setData后刷新界面元素時不重新創建組件，而僅僅改變狀態或順序。
|
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的情況
添加元素或改變元素順序導致數據改變時， 會校正帶有Key的組件（可通過key識別各組件）， 框架會根據“目前數據”，重新排序各組件，而不是重新創建， 使組件保持自身的狀態，列表渲染效率高。
無wx:key的情況
添加元素或改變元素順序導致數據改變時， 此時各組件沒有key(無法識別各組件) 框架會被迫根據“目前數據”重新創建各組件， 使組件重置初始狀態（原有狀態自然被清空），列表渲染效率低。
wx:key=”*this”
表示綁定的是數據自身，如數據為一個數據數組或字符串數組時。
3.修改數據數組綁定的界面元素
數組： 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){
//這個參數“e”的具體作用，請參考微信小程序官方提供的說明，地址為
var dataset = e.target.dataset;
//元素節點的attribute: data-index="{{index}}"傳遞過來的，是為識別正在編輯修改哪個數組。
var Index = dataset.index;
//我們要修改的數組
this.data.list[Index].name = '修改了內容'+new Date().getTime();
//將合拼之后的數據，發送到視圖層，即渲染頁面
//大伙請記錄，修改了數據后，一定要再次執行`this.setData()`，頁面才會渲染數據的。
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`識別要刪除第幾條數據，第二個數據為要刪除的項目數量，通常為1
this.data.list.splice(Index,1);
//渲染數據
this.setData({
list:this.data.list
});
}
|
5.嵌套綁定
嵌套時要善用 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.布局系統
小程序采用與CSS3和React一樣的布局系統：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）數據綁定
綁定表達式不能執行方法，只能處理簡單的運算如 “+ -*/”，如果遇到集合數據綁定中需要數據格式的轉換，就需要遍歷list并對每個item進行格式化，再執行setData刷新界面。
（2）頁面跳轉
A頁面–>B頁面，B頁面返回A，如何觸發A的刷新。方案：在A頁面的onshow事件里寫A的初始化數據方法。
（3）樣式
本地資源無法通過 css 獲取 可以使用網絡圖片
（4）緩存
wx.setStorage() 目前每個小程序限制5M
（5）網絡請求
Post請求需要加表單提交時的頭信息 header: ‘content-type’: ‘application/x-www-form-urlencoded’
