1.不(bu)能跨組(zu)件(jian)傳(chuan)遞(di)狀(zhuang)態(tai)(tai)狀(zhuang)態(tai)(tai)傳(chuan)遞(di)主要是(shi)指不(bu)管組(zu)件(jian)間(jian)是(shi)樹型關系還(huan)是(shi)兄弟(di)關系，組(zu)件(jian)都不(bu)能像Html中的Dom結構一樣(yang)使用Id訪(fang)問某一節點的狀(zhuang)態(tai)(tai)屬性(xing)值，如(ru)下面一個(ge)例子：12345678910swiper indicator-dots="{{indicatorDots}} ...
狀態(tai)傳(chuan)遞主(zhu)要是(shi)指不管組(zu)件(jian)間是(shi)樹型關系還(huan)是(shi)兄弟關系，組(zu)件(jian)都不能像Html中的Dom結構一樣使用(yong)Id訪問某一節點的狀態(tai)屬(shu)性(xing)值，如下面一個例子：
|
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>
|
在這個實例中(zhong)如果我想在navigator組(zu)件中(zhong)的url屬性中(zhong)訪(fang)問swiper組(zu)件的CurrentIndex屬性是不(bu)可能(neng)的，只(zhi)能(neng)通過綁定swiper的事件再使用(yong)變量的方式(shi)進行(xing)綁定訪(fang)問。
在模板創建使用for生成組件時，使用wx:key，可以在執行setData后(hou)刷新界(jie)面元素時不重新創建組(zu)件，而僅僅改變狀態或順序。
|
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"/>
|
添加元素(su)或改變元素(su)順(shun)序導(dao)致數(shu)據(ju)改變時， 會校正帶有Key的組件（可通過key識別各組件）， 框(kuang)架會根據(ju)“目前數(shu)據(ju)”，重新排序各組件，而不是重新創建， 使(shi)組件保持自身的狀態，列表渲染效率高。
添加元素或(huo)改變(bian)元素順序導致數據(ju)改變(bian)時(shi)， 此時(shi)各組(zu)件(jian)沒有key(無法識別各組(zu)件(jian)) 框架會被迫根據(ju)“目(mu)前數據(ju)”重(zhong)(zhong)新創建各組(zu)件(jian)， 使組(zu)件(jian)重(zhong)(zhong)置初始狀態(tai)（原有狀態(tai)自然被清空），列(lie)表渲染效率低(di)。
表(biao)示綁定的是數據(ju)(ju)自身，如數據(ju)(ju)為一個數據(ju)(ju)數組或字符串數組時。
數組(zu)： //www.w3school.com.cn/jsref/jsref_obj_array.asp
事(shi)件： //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){
//這個(ge)參數“e”的(de)具體作用，請(qing)參考微信小程(cheng)序官(guan)方提供的(de)說明，地址(zhi)為
var dataset = e.target.dataset;
//元素(su)節點(dian)的attribute: data-index="{{index}}"傳遞過來的，是為識(shi)別正在(zai)編輯修改(gai)哪個數組。
var Index = dataset.index;
//我們要(yao)修改的數組(zu)
this.data.list[Index].name = '修改了(le)內容(rong)'+new Date().getTime();
//將(jiang)合(he)拼(pin)之后的(de)數據，發送到視(shi)圖(tu)層(ceng)，即渲染頁(ye)面
//大伙請記錄，修改了數據(ju)后(hou)，一定要再次執行`this.setData()`，頁面(mian)才會渲染數據(ju)的。
this.setData({
list:this.data.list
});
}
|
|
1
2
3
4
5
6
7
8
9
10
|
remove:function (e){
var dataset = e.target.dataset;
var Index = dataset.index;
//通(tong)(tong)過`index`識別要(yao)刪(shan)除(chu)第幾條數(shu)據，第二個(ge)數(shu)據為(wei)要(yao)刪(shan)除(chu)的項目數(shu)量，通(tong)(tong)常為(wei)1
this.data.list.splice(Index,1);
//渲染數據
this.setData({
list:this.data.list
});
}
|
嵌套時要善用 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>
|
小程序采用與CSS3和React一樣(yang)的(de)布局系(xi)統(tong)：Flex Flex參考資源：
//www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
//blog.csdn.net/qq_34281962/article/details/52729215
綁定表達式(shi)不能執行(xing)(xing)方法，只能處理簡(jian)單的運算如(ru) “+ -*/”，如(ru)果遇到集合數據(ju)綁定中需要數據(ju)格(ge)式(shi)的轉(zhuan)換，就需要遍歷(li)list并對每個item進行(xing)(xing)格(ge)式(shi)化，再執行(xing)(xing)setData刷新界面(mian)。
A頁面–>B頁面，B頁面返回A，如何觸發A的(de)刷新。方(fang)案：在A頁面的(de)onshow事件里寫A的(de)初始化數據(ju)方(fang)法。
本(ben)地資源無法通過 css 獲取 可以使用網絡圖片
wx.setStorage() 目前每個小(xiao)程序限制5M
Post請求(qiu)需要加表單(dan)提交時(shi)的頭信息 header: ‘content-type’: ‘application/x-www-form-urlencoded’
