今天刚刚接触了小程序，分享一些学到的知识吧：
小程序常用标签
-
视图容器
view相当于html的div，开发小程序的页面 -
可滚动视图区域
scroll-view使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。 -
图标
icon -
文本
text -
按钮
button -
多选项目
checkbox -
表单
form将组件内的用户输入的switch input checkbox slider radio picker提交。 当点击form表单中form-type为submit的button组件时，会将表单组件中的value值进行提交，需要在表单组件中加上name来作为key。 -
输入框
input -
开关
switch -
页面链接
navigator
小程序的循环
- 在组件上使用
wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item事例如下：
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
可以使用wx:for-item指定数组当前元素的变量名
可以使用wx:for-index指定数组当前下标的变量名
- wx:for用在标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1,2,3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
小程序数据渲染方式
- 上面的
wx:for是一种列表渲染 - 条件渲染
wx:if在框架中，使用wx:if=""来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
wx:if vs hidden
因为wx:if之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
