小程序开发注意事项

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.修改数据数组绑定的界面元素

数组：

事件：

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参考资源：

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’