AXML Introduction

2021-07-06 11:36

AXML is a set of markup language for Mini Program framework design and used to describe the structure of Mini Program pages. The AXML syntax falls into five parts: data binding, conditional rendering, list rendering, template and file reference.

AXML code sample:

copy

<!-- pages/index/index.axml -->  
<view a:for="{{items}}"> {{item}} </view>  
<view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>  
<view a:elif="{{view == 'APP'}}"> APP </view>  
<view a:else> hello </view>  
<view onTap="add"> {{count}} </view>

.js sample:

copy

// pages/index/index.js
Page({
  data: {
    items: [1, 2, 3, 4, 5, 6, 7],
    view: 'hello',
    count: 1,
  },
  add(e) {
    this.setData({
      count: this.data.count + 1,
    });
  },
});

.css sample:

copy

/* pages/index/index.acss */
view {
  padding-left: 10px;
}

Display result:

AXML Introduction