小程序开发注意事项
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’
