视图文件的后缀名是axml，定义了页面的标签结构。
下面通过一些简单的例子看看axml具有的能力。
（1）数据绑定
{{message}}//page.jsPage({data:{message:'Helloalipay!'}})（2）列表渲染
{{item}}//page.jsPage({data:{items:[1,2,3,4,5,6,7]}})（3）条件渲染
WEBVIEWAPPalipay//page.jsPage({data:{view:'alipay'}})（4）模板
FirstName:{{firstName}},LastName:{{lastName}}//page.js//HatsofftotheWechatMiniProgramengineers.Page({data:{staffA:{firstName:'san',lastName:'zhang'},staffB:{firstName:'si',lastName:'li'},staffC:{firstName:'wu',lastName:'wang'},},})（5）事件
（1）简单绑定
数据绑定使用Mustache语法（双大括号）将变量包起来，可以作用于各种场合。
作用于内容的例子：
{{message}}Page({data:{message:'Helloalipay!'}})作用于组件属性的例子（需要在双引号之内）：
Page({data:{id:0}})作用于控制属性的例子（需要在双引号之内）：
Page({data:{condition:true}})作用于关键字的例子（需要在双引号之内）。
注意：不要直接写checked="false"，其计算结果是一个字符串，转成布尔值类型后代表真值。
可以在{{}}内进行简单的运算，支持的有如下几种方式：
三元运算的例子。
Hidden算数运算的例子。
{{a+b}}+{{c}}+dPage({data:{a:1,b:2,c:3}})View中的内容为3+3+d。
逻辑判断的例子。
5}}">字符串运算的例子。
{{"hello"+name}}Page({data:{name:'alipay'}})数据路径运算的例子。
{{object.key}}{{array[0]}}Page({data:{object:{key:'Hello'},array:['alipay']}})也可以在Mustache内直接进行组合，构成新的对象或者数组。
数组的例子。
{{item}}Page({data:{zero:0}})最终组合成数组[0,1,2,3,4]。
对象的例子。
Page({data:{a:1,b:2}})最终组合成的对象是{foo:1,bar:2}
也可以用扩展运算符...来将一个对象展开。
Page({data:{obj1:{a:1,b:2},obj2:{c:3,d:4}}})最终组合成的对象是{a:1,b:2,c:3,d:4,e:5}。
如果对象的key和value相同，也可以间接地表达。
Page({data:{foo:'my-foo',bar:'my-bar'}})最终组合成的对象是{foo:'my-foo',bar:'my-bar'}。
注意：上面的方式可以随意组合，但是如有存在变量名相同的情况，后边的变量会覆盖前面变量。
lt;templateis="objectCombine"data="{{...obj1,...obj2,a,c:6}}"&Page({data:{obj1:{a:1,b:2},obj2:{b:3,c:4},a:5}})最终组合成的对象是{a:5,b:3,c:6}。
（1）a:if
在框架中，我们用a:if="{{condition}}"来判断是否需要渲染该代码块。
True也可以用a:elif和a:else来添加一个else块。
5}}">12}}">23（2）blocka:if
因为a:if是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个标签将多个组件包装起来，并在上边使用a:if控制属性。
view1view2注意：并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
（1）a:for
在组件上使用a:for属性可以绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
{{index}}:{{item.message}}Page({data:{array:[{message:'foo',},{message:'bar'}]}})使用a:for-item可以指定数组当前元素的变量名。
使用a:for-index可以指定数组当前下标的变量名。
{{idx}}:{{itemName.message}}a:for也可以嵌套，下边是一个九九乘法表。
{{i}}*{{j}}={{i*j}}（2）blocka:for
类似blocka:if，也可以将a:for用在标签上，以渲染一个包含多节点的结构块。
{{index}}:{{item}}（3）a:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如中的输入内容，的选中状态），需要使用a:key来指定列表中项目的唯一的标识符。
a:key的值以两种形式提供。
下面是示例代码。
{{item}}:clicktobringtofrontPage({data:{list:['1','2','3','4'],},bringToFront(e){const{value}=e.target.dataset;constlist=this.data.list.concat();constindex=list.indexOf(value);if(index!==-1){list.splice(index,1);list.unshift(value);this.setData({list});}}});（4）key
key是比a:key更通用的写法，里面可以填充任意表达式和字符串。
下面是示例代码：
{{item}}:clicktobringtofrontPage({data:{list:['1','2','3','4'],},bringToFront(e){const{value}=e.target.dataset;constlist=this.data.list.concat();constindex=list.indexOf(value);if(index!==-1){list.splice(index,1);list.unshift(value);this.setData({list});}}});同时可以利用key来防止组件的复用，例如，如果允许用户输入不同类型的数据：
那么当你输入name然后切换到email时，当前输入值会保留，如果不想保留，可以加key
（1）import
import可以加载已经定义好的template。
比如，在item.axml中定义了一个叫item的template。
{{text}}然后，在index.axml中引用item.axml，就可以使用item模板。
import有作用域的概念，即只会import目标文件中定义的template。比如，CimportB，BimportA，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
AtemplateBtemplate注意template的子节点只能是一个而不是多个，例如允许
而不允许
（2）include
include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置
下面是一个例子。
（1）定义模板
使用name属性，作为模板的名字。然后在内定义代码片段。
{{index}}:{{msg}}Time:{{time}}（2）使用模板
Page({data:{item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板。
oddeven注意：模板拥有自己的作用域，只能用data传入的数据，但可以通过onXX绑定页面的逻辑处理函数
推荐用template方式来引入模版片段，因为template会指定自己的作用域，只使用data传入的数据，因此小程序会对此进行优化。如果改template的data没有改变，该片段UI并不会重新渲染。
引入路径支持从node_modules目录载入第三方模块，例如page.axml: