weex語法概述

1、Weex頁面頁面由<template>,<style>,<script>三個部分構成。

• <template>: 必須的, 使用類HTML的語法描述頁面結構，內容由多個標籤組成，不同的標籤代表不同的組件。
• <style>: 可選的,  使用類CSS的語法描述頁面的具體展現形式。
• <script>: 可選的 , 使用JavaScript描述頁面中的數據和頁面的行爲，Weex中的數據定義也在<script>中進行。

<template>
  <!-- (required) the structure of page -->
</template>

<style>
  /* (optional) stylesheet */
</style>

<script>
  /* (optional) the definition of data, methods and life-circle */
</script>

 

   注意：weex 遵循 HTML屬性 命名規範 , 所以屬性命名時 請不要使用陀峯格式(CamelCase)  , 採用以“-”分割的long-name形式.

2、<template> 中的標籤組織類似如下代碼:

<template>
  <container>
    <image style="width: 200; height: 200;" src="http://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image>
    <text>Alibaba Weex Team</text>
  </container>
</template>

container 標籤是一個根節點，其下包含描述圖片的 image標籤和描述一段文字的 text 標籤。

和HTML中類似，不同標籤代表的元素/組件有各自的屬性,其中一些組件還能有子組件.

根節點: 每個 template 標籤中的最頂層標籤，我們稱爲根節點。下面是目前我們支持的三種不同的根節點:

• <container>: 普通根節點
• <scroller>: 滾動器根節點,適用於需要全頁滾動的場景
• <list>: 列表根節點,適用於其中包含重複的子元素的列表場景

目前Weex僅支持以上三種根節點。

 

3、<style>

第一種寫法是，你能在標籤上，直接通過內聯style屬性編寫樣式。

第二種寫法，通過標籤中的class屬性與style標籤中定義的樣式建立對應關係，讓style標籤中定義的樣式作用於標籤之上。

示例：

<template>   <container>     <text style="font-size: 64;">Alibaba</text>     <text class="large">Weex Team</text>   </container> </template>

<style>   .large {font-size: 64;} </style>   

4、<script>

<script>中的代碼遵循 JavaScript(ES5)語法. 描述頁面中的數據和頁面的行爲。

示例：

<template>   <container>     <text>The time is {{datetime}}</text>     <text>{{title}}</text>     <text>{{getTitle()}}</text>   </container> </template>

<script>   module.exports = {     data: {       title: 'Alibaba',       datetime: null     },     methods: {       getTitle: function () {         return 'Weex Team'       }     },     created: function() {       this.datetime = new Date().toLocaleString()     }   } </script>

上面<script>標籤中定義了被賦值給 module.exports 的對象.其作用是讓三個<text>標籤顯示當前時間,'Alibaba' 和 'Weex Team'. <script>中的data存儲可以用於在<template>標籤中進行數據綁定的數據, 當這些數據變更時,被進行了數據綁定的標籤也會自動更新. 這些數據在<script>中的各個方法內可以通過this.x讀寫。