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){
var dataset = e.target.dataset;
var Index = dataset.index;
this.data.list[Index].name = '修改了内容'+new Date().getTime();
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;
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’
