全部产品

视图层

更新时间:2019-09-09 15:12:24

简介

视图文件的后缀名是 axml,定义了页面的标签结构。

下面通过一些例子展示 axml 具有的能力。

  • 数据绑定

    1. <view> {{message}} </view>
    1. // page.js
    2. Page({
    3. data: {
    4. message: 'Hello alipay!'
    5. }
    6. })
  • 列表渲染

    1. <view a:for="{{items}}"> {{item}} </view>
    1. // page.js
    2. Page({
    3. data: {
    4. items: [1, 2, 3, 4, 5, 6, 7]
    5. }
    6. })
  • 条件渲染

    1. <view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
    2. <view a:elif="{{view == 'APP'}}"> APP </view>
    3. <view a:else="{{view == 'alipay'}}"> alipay </view>
    1. // page.js
    2. Page({
    3. data: {
    4. view: 'alipay'
    5. }
    6. })
  • 模板

    1. <template name="staffName">
    2. <view>
    3. FirstName: {{firstName}}, LastName: {{lastName}}
    4. </view>
    5. </template>
    6. <template is="staffName" data="{{...staffA}}"></template>
    7. <template is="staffName" data="{{...staffB}}"></template>
    8. <template is="staffName" data="{{...staffC}}"></template>
    1. // page.js
    2. // Hats off to the Wechat Mini Program engineers.
    3. Page({
    4. data: {
    5. staffA: {firstName: 'san', lastName: 'zhang'},
    6. staffB: {firstName: 'si', lastName: 'li'},
    7. staffC: {firstName: 'wu', lastName: 'wang'},
    8. },
    9. })
  • 事件

    1. <view onTap="add"> {{count}} </view>
    1. Page({
    2. data: {
    3. count: 1
    4. },
    5. add(e) {
    6. this.setData({
    7. count: this.data.count + 1
    8. })
    9. }
    10. })

数据绑定

axml 中的动态数据均来自对应 Page 的 data

简单绑定

数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于各种场合。

  • 作用于内容,例如:

    1. <view> {{ message }} </view>
    1. Page({
    2. data: {
    3. message: 'Hello alipay!'
    4. }
    5. })
  • 作用于组件属性(需要在双引号之内),例如:

    1. <view id="item-{{id}}"> </view>
    1. Page({
    2. data: {
    3. id: 0
    4. }
    5. })
  • 作用于控制属性(需要在双引号之内),例如:

    1. <view a:if="{{condition}}"> </view>
    1. Page({
    2. data: {
    3. condition: true
    4. }
    5. })
  • 作用于关键字(需要在双引号之内),例如:

    1. <checkbox checked="{{false}}"> </checkbox>
    • true:boolean 类型的 true,代表真值。
    • false: boolean 类型的 false,代表假值。

      注意:不要直接写 checked="false",计算结果是一个字符串,转成布尔值类型后代表 true。

可以在 {{}} 内进行简单的运算,支持的有如下几种方式:

  • 三元运算:

    1. <view hidden="{{flag ? true : false}}"> Hidden </view>
  • 算数运算:

    1. <view> {{a + b}} + {{c}} + d </view>
    1. Page({
    2. data: {
    3. a: 1,
    4. b: 2,
    5. c: 3
    6. }
    7. })

    View 中的内容为3 + 3 + d

  • 逻辑判断:

    1. <view a:if="{{length > 5}}"> </view>
  • 字符串运算:

    1. <view>{{"hello" + name}}</view>
    1. Page({
    2. data:{
    3. name: 'alipay'
    4. }
    5. })
  • 数据路径运算:

    1. <view>{{object.key}} {{array[0]}}</view>
    1. Page({
    2. data: {
    3. object: {
    4. key: 'Hello '
    5. },
    6. array: ['alipay']
    7. }
    8. })

也可以在 Mustache 内直接进行组合,构成新的数组或者对象。

  • 数组:

    1. <view a:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
    1. Page({
    2. data: {
    3. zero: 0
    4. }
    5. })

    最终组合成数组 [0, 1, 2, 3, 4]。

  • 对象:

    1. <template is="objectCombine" data="{{foo: a, bar: b}}"></template>
    1. Page({
    2. data: {
    3. a: 1,
    4. b: 2
    5. }
    6. })

    最终组合成的对象是 {foo: 1, bar: 2}。

    也可以用扩展运算符...来将一个对象展开。

    1. <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
    1. Page({
    2. data: {
    3. obj1: {
    4. a: 1,
    5. b: 2
    6. },
    7. obj2: {
    8. c: 3,
    9. d: 4
    10. }
    11. }
    12. })

    最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

    如果对象的 key 和 value 相同,也可以间接地表达。

    1. <template is="objectCombine" data="{{foo, bar}}"></template>
    1. Page({
    2. data: {
    3. foo: 'my-foo',
    4. bar: 'my-bar'
    5. }
    6. })

    最终组合成的对象是 {foo: ‘my-foo’, bar:’my-bar’}。

    说明:上面的方式可以随意组合,但是如有存在变量名相同的情况,后边的变量会覆盖前面变量。

    1. <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
    1. Page({
    2. data: {
    3. obj1: {
    4. a: 1,
    5. b: 2
    6. },
    7. obj2: {
    8. b: 3,
    9. c: 4
    10. },
    11. a: 5
    12. }
    13. })

    最终组合成的对象是 {a: 5, b: 3, c: 6}。

条件渲染

a:if

在框架中,您可以使用 a:if="{{condition}}" 来判断是否需要渲染该代码块。

  1. <view a:if="{{condition}}"> True </view>

也可以使用 a:elifa:else 来添加一个 else 块。

  1. <view a:if="{{length > 5}}"> 1 </view>
  2. <view a:elif="{{length > 2}}"> 2 </view>
  3. <view a:else> 3 </view>

block a:if

因为 a:if 是一个控制属性,需要将它添加到一个标签上。如果想一次性判断多个组件标签,您可以使用一个 <block/> 标签将多个组件包装起来,并在它的上边使用 a:if 来控制属性。

  1. <block a:if="{{true}}">
  2. <view> view1 </view>
  3. <view> view2 </view>
  4. </block>

说明<block/> 并不是一个组件,仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

列表渲染

a:for

在组件上使用 a:for 属性可以绑定一个数组,然后就可以使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

  1. <view a:for="{{array}}">
  2. {{index}}: {{item.message}}
  3. </view>
  1. Page({
  2. data: {
  3. array: [{
  4. message: 'foo',
  5. }, {
  6. message: 'bar'
  7. }]
  8. }
  9. })

使用 a:for-item 可以指定数组当前元素的变量名。

使用 a:for-index 可以指定数组当前下标的变量名。

  1. <view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
  2. {{idx}}: {{itemName.message}}
  3. </view>

a:for 也可以嵌套,下方是九九乘法表的代码示例:

  1. <view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="i">
  2. <view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="j">
  3. <view a:if="{{i <= j}}">
  4. {{i}} * {{j}} = {{i * j}}
  5. </view>
  6. </view>
  7. </view>

block a:for

类似 block a:if,您也可以将 a:for 用在 <block/> 标签上,以渲染一个包含多节点的结构块。

  1. <block a:for="{{[1, 2, 3]}}">
  2. <view> {{index}}: </view>
  3. <view> {{item}} </view>
  4. </block>

a:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,同时希望列表中的项目保持自己的特征和状态(比如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 a:key 来指定列表中项目的唯一的标识符。

a:key 的值以两种形式来提供:

  • 字符串,代表在 for 循环的 arrayitem 的某个属性。该属性的值需要是列表中唯一的字符串或数字,并且不能动态的改变。
  • 保留关键字 *this,代表在 for 循环中的 item 本身,表示需要 item 本身是唯一的字符串或者数字。比如当数据改变触发渲染层重新执行渲染的时候,会校正带有 key 的组件,框架会确保他们重新被排序,而不是重新创建,确保使组件保持自身的状态,并且提高列表渲染时的效率。

如果明确知道列表是静态,或者不关注其顺序,则可以选择忽略。

代码示例如下:

  1. <view class="container">
  2. <view a:for="{{list}}" a:key="*this">
  3. <view onTap="bringToFront" data-value="{{item}}">
  4. {{item}}: click to bring to front
  5. </view>
  6. </view>
  7. </view>
  1. Page({
  2. data:{
  3. list:['1', '2', '3', '4'],
  4. },
  5. bringToFront(e) {
  6. const { value } = e.target.dataset;
  7. const list = this.data.list.concat();
  8. const index = list.indexOf(value);
  9. if (index !== -1) {
  10. list.splice(index, 1);
  11. list.unshift(value);
  12. this.setData({ list });
  13. }
  14. }
  15. });

key

key 是比 a:key 更通用的写法,里面可以填充任意表达式和字符串。

代码示例如下:

  1. <view class="container">
  2. <view a:for="{{list}}" key="{{item}}">
  3. <view onTap="bringToFront" data-value="{{item}}">
  4. {{item}}: click to bring to front
  5. </view>
  6. </view>
  7. </view>
  1. Page({
  2. data:{
  3. list:['1', '2', '3', '4'],
  4. },
  5. bringToFront(e) {
  6. const { value } = e.target.dataset;
  7. const list = this.data.list.concat();
  8. const index = list.indexOf(value);
  9. if (index !== -1) {
  10. list.splice(index, 1);
  11. list.unshift(value);
  12. this.setData({ list });
  13. }
  14. }
  15. });

同时可以利用 key 来防止组件的复用。例如,如果允许用户输入不同类型的数据:

  1. <input a:if="{{name}}" placeholder="Enter your username">
  2. <input a:else placeholder="Enter your email address">

那么当你输入 name 然后切换到 email 时,当前输入值会保留,如果不想保留,可以加 key

  1. <input key="name" a:if="{{name}}" placeholder="Enter your username">
  2. <input key="email" a:else placeholder="Enter your email address">

引用

axml 提供两种文件引用方式, importinclude

import

import 可以加载已经定义好的 template

比如,在 item.axml 中定义了一个叫 itemtemplate

  1. <!-- item.axml -->
  2. <template name="item">
  3. <text>{{text}}</text>
  4. </template>

index.axml 中引用 item.axml,就可以使用 item 模板。

  1. <import src="./item.axml"/>
  2. <template is="item" data="{{text: 'forbar'}}"/>

import 有作用域的概念,只会 import 目标文件中定义的 template。比如,C import B,B import A,在 C 中可以使用 B 定义的 template,在 B 中可以使用 A 定义的 template,但是 C 不能使用 A 中定义的 template

  1. <!-- A.axml -->
  2. <template name="A">
  3. <text> A template </text>
  4. </template>
  1. <!-- B.axml -->
  2. <import src="./a.axml"/>
  3. <template name="B">
  4. <text> B template </text>
  5. </template>
  1. <!-- C.axml -->
  2. <import src="./b.axml"/>
  3. <template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
  4. <template is="B"/>

注意 template 的子节点只能是一个而不是多个,例如:

  • 允许
    1. <template name="x">
    2. <view />
    3. </template>
  • 而不允许
    1. <template name="x">
    2. <view />
    3. <view />
    4. </template>

include

include 可以将目标文件除了 <template/> 的整个代码引入,相当于是拷贝到 include 位置。

代码示例如下:

  1. <!-- index.axml -->
  2. <include src="./header.axml"/>
  3. <view> body </view>
  4. <include src="./footer.axml"/>
  1. <!-- header.axml -->
  2. <view> header </view>
  1. <!-- footer.axml -->
  2. <view> footer </view>

模板

axml 提供模板(template),可以在模板中定义代码片段,在不同的地方调用。

定义模板

使用 name 属性,作为模板的名字,然后在 <template/> 内定义代码片段。

  1. <!--
  2. index: int
  3. msg: string
  4. time: string
  5. -->
  6. <template name="msgItem">
  7. <view>
  8. <text> {{index}}: {{msg}} </text>
  9. <text> Time: {{time}} </text>
  10. </view>
  11. </template>

使用模板

使用 is 属性,声明需要的使用的模板,然后将该模板所需要的 data 传入,比如:

  1. <template is="msgItem" data="{{...item}}"/>
  1. Page({
  2. data: {
  3. item: {
  4. index: 0,
  5. msg: 'this is a template',
  6. time: '2016-09-15'
  7. }
  8. }
  9. })

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板。

  1. <template name="odd">
  2. <view> odd </view>
  3. </template>
  4. <template name="even">
  5. <view> even </view>
  6. </template>
  7. <block a:for="{{[1, 2, 3, 4, 5]}}">
  8. <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
  9. </block>

说明:模板拥有自己的作用域,只能用 data 传入的数据,但可以通过 onXX 绑定页面的逻辑处理函数。

推荐用 template 方式来引入模版片段,因为 template 会指定自己的作用域,只使用 data 传入的数据,因此小程序会对此进行优化。如果该 template 的 data 没有改变,该片段 UI 并不会重新渲染。

引入路径支持从 node_modules 目录载入第三方模块,例如 page.axml:

  1. <import src="./a.axml"/> <!-- 相对路径 -->
  2. <import src="/a.axml"/> <!-- 项目绝对路径 -->
  3. <import src="third-party/x.axml"/> <!-- 第三方 npm 包路径 -->