支付寶小程序框架 AXML·介紹

2020-09-18 10:19 更新

AXML 是小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言,用于描述小程序頁(yè)面的結(jié)構(gòu)。 AXML 語(yǔ)法可分為五個(gè)部分:數(shù)據(jù)綁定、條件渲染、列表渲染模板、引用。

AXML 代碼示例:

<!-- 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> alipay </view>
<view onTap="add"> {{count}} </view>

對(duì)應(yīng)的 .js 文件示例:

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

對(duì)應(yīng)的 .acss 文件示例:

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

效果示例AXML示例圖.png

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)