小程序框架介绍

小程序框架分为两部分

（1）视图层（View）描述语言：WXML 和 WXSS

（2）逻辑层（App Service）描述语言：JavaScript 框架的核心：一个响应的数据绑定系统框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

WXML的语言特性（1）数据绑定（2）列表渲染（3）条件渲染（4）模板引用

数据绑定

（参见文档—>框架—>数据绑定）

WXML 中的动态数据均来自对应页面js文件中 Page 的 data对象实现方式： data里面配置属性，视图利用 Mustache 语法（双大括号）访问属性变量

小程序框架介绍

除了文本内容外也可以绑定属性

小程序框架介绍

数据绑定

注意：①关键字true/false(需要放在双引号之内) 因为小程序会解析字符串，再去将字符串转化为boolean 值例如：<checkbox checked="{{false}}"> </checkbox> 若直接设置<checkbox checked="false"> </checkbox>小程序会将“false”解析成字符串，该字符串是非空的则转化为boolean为true

③如果data里面的属性是一个对象，那么该对象下的数据则可以通过对象的属性访问

小程序标签的共有属性

属性名	类型	描述	注解
id	String	组件的唯一标识	保持整个页面唯一
class	String	组件的样式类	在对应的wxss中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性
bind/catch	EventHandler	组件的事件

条件渲染（wx:if）

（参见文档—>框架—>条件渲染）在小程序框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块例如： <view wx:if="{{condition}}"> True </view> 如果condition条件为true则该组件显示，若condition条件为false则该组件不渲染说明：如果多分支可以用 wx:elif="{{condition}}" 和 wx:else 来添加一个 else 块注意：wx:if 和 hidden的区别

block标签：它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在block标签上边使用 wx:if 控制属性。

小程序框架介绍

列表渲染（wx:for）

（参见文档—>框架—>列表渲染）在组件上使用wx:for制属性绑定一个数组或对象，可使用数组或对象中各项的数据重复渲染该组件默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 若绑定的是对象则当前项的键（key）变量名默认为 index，当前键对应的值的变量名默认为 item 名字可以通过wx:for-item 和wx:for-index指定也可以利用block标签渲染一个包含多节点的结构块

小程序框架介绍

模板引用（template）

（参见文档—>框架—>模板） WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。第一步：定义模板用template标签定义一个代码片段，使用name属性指定模板的名称第二部：使用模板使用 is 属性，声明需要的使用的模板，利用data属性的扩展运算符向模板传入需要的数据信息。

小程序框架介绍

说明：（1）.wxml文件中可以定义多个模板，只需要通过name来区分（2）模板的数据都是展开之后的属性 data='{{...item}}'是ES6的写法，item是当前项，...是展开运算符，那么在模板中不需要再{{item.name}}而是直接{{name}}即可。注意： is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板