Weex頁面由<template>,<style>,<script>三個部分構(gòu)成挖帘。
1.<template>: 必須的, 使用類HTML的語法描述頁面結(jié)構(gòu)，內(nèi)容由多個標簽組成恋技，不同的標簽代表不同的組件拇舀。
2.<style>: 可選的, 使用類CSS的語法描述頁面的具體展現(xiàn)形式。
3.<script>: 可選的 , 使用JavaScript描述頁面中的數(shù)據(jù)和頁面的行為蜻底，Weex中的數(shù)據(jù)定義也在<script>中進行骄崩。
<template>
<!-- (required) the structure of page -->
</template>
<style>
/* (optional) stylesheet */
</style>
<script>
/* (optional) the definition of data, methods and life-circle */
</script>
<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 標簽是一個根節(jié)點聘鳞，其下包含描述圖片的 image標簽和描述一段文字的 text 標簽。
和HTML中類似要拂，不同標簽代表的元素/組件有各自的屬性,其中一些組件還能有子組件.
根節(jié)點: 每個 template 標簽中的最頂層標簽抠璃，我們稱為根節(jié)點。下面是目前我們支持的三種不同的根節(jié)點:
1.<container>: 普通根節(jié)點
2.<scroller>: 滾動器根節(jié)點,適用于需要全頁滾動的場景
3.<list>: 列表根節(jié)點,適用于其中包含重復(fù)的子元素的列表場景
目前Weex僅支持以上三種根節(jié)點
內(nèi)置組件列表.
<style>
你能把Weex中的樣式語法理解為CSS的一個子集脱惰，兩者有一些細微的區(qū)別
第一種寫法是搏嗡，你能在標簽上，直接通過內(nèi)聯(lián)style屬性編寫樣式. 第二種寫法拉一，通過標簽中的class屬性與style標簽中定義的樣式建立對應(yīng)關(guān)系采盒，讓style標簽中定義的樣式作用于特定標簽之上.
以下是例子:
<template>
<container>
<text style="font-size: 64;">Alibaba</text>
<text class="large">Weex Team</text>
</container>
</template>
<style>
.large {font-size: 64;}
</style>
上面的兩個text組件都被設(shè)置了同樣的字體大小，但分別用了兩種不同的方式.
Weex公共樣式
注意!
weex 遵循 HTML屬性 命名規(guī)范 , 所以屬性命名時 請不要使用陀峰格式(CamelCase) , 采用以“-”分割的long-name形式.
<script>
<script>中的代碼遵循 JavaScript(ES5)語法. 描述頁面中的數(shù)據(jù)和頁面的行為蔚润。 下面是一個例子:
<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>標簽中進行數(shù)據(jù)綁定的數(shù)據(jù), 當這些數(shù)據(jù)變更時,被進行了數(shù)據(jù)綁定的標簽也會自動更新. 這些數(shù)據(jù)在<script>中的各個方法內(nèi)可以通過this.x讀寫.
