在iOS中，weex可以類似理解為“放大版”的JSBrdige，weex代碼的三部分構(gòu)成：template(模版)、style(樣式)、script(腳本)，本章重點了解weex的三要素與通用樣式。
weex三要素
在使用weex的init創(chuàng)建weex項目時，會默認(rèn)生成foo.vue文件，從上圖看出，主要有template、style、script三部分，weex主要是基于MVVM。
1. template
主要是組件的引用，大體頁面布局
style
主要是組件的CSS樣式引用
script
主要就是js的調(diào)用，weex的聲明周期在此實現(xiàn)
'''
<script>
module.exports = {
data: {},
methods: {},
init: function () {
console.log('在初始化內(nèi)部變量，并且添加了事件功能后被觸發(fā)');
},
created: function () {
console.log('完成數(shù)據(jù)綁定之后，模板編譯之前被觸發(fā)');
},
ready: function () {
console.log('模板已經(jīng)編譯并且生成了 Virtual DOM 之后被觸發(fā)');
},
destroyed: function () {
console.log('在頁面被銷毀時調(diào)用');
}
}
</script>
'''
其中：
- data屬于綁定的數(shù)據(jù)，init、created、ready是Weex的生命周期方法。
- methods中存放用戶定義的一些js事件。
- computed中主要是對綁定數(shù)據(jù)data部分進(jìn)行預(yù)處理。
- init內(nèi)一般用于初始化一些內(nèi)部變量，綁定一些自定義事件，這時還沒有數(shù)據(jù)綁定，沒有創(chuàng)建vdom，所以不能通過this獲取到data和methods，也不能獲取vdom的節(jié)點
- created 完成了數(shù)據(jù)綁定 ，但還未開始編譯模板，可以通過this獲取data和methods，但不能獲取vdom的節(jié)點
- ready表示渲染完成 ，從子組件往上觸發(fā)
- destroyed 組件銷毀，比如頁面跳轉(zhuǎn)，從子組件開始往上觸發(fā)
weex樣式
(盒模型)[https://www.w3.org/TR/css3-box/]
軟件開發(fā)，在討論設(shè)計或布局時，會提到「盒模型」這個概念，盒模型描述了一個元素所占用的空間。每一個盒子有四條邊界：外邊距邊界 margin edge, 邊框邊界 border edge, 內(nèi)邊距邊界 padding edge 與內(nèi)容邊界 content edge（如下圖）。這四層邊界，形成一層層的盒子包裹起來，這就是盒模型大體上的含義。
所有Weex 組件都支持盒模型，而Weex盒模型是基于CSS盒模型，即CSS Flexbox，每個 Weex 元素都可視作一個盒子。
Weex盒模型
- width {length}：總寬度
- height {length}：總高度
- padding {length}：內(nèi)邊距，內(nèi)容和邊框之間的距離，具體為padding-left {length}，padding-right {length}，padding-top {length}，padding-bottom {length}
- margin {length}：外邊距，元素和元素之間的空白距離，具體為margin-left {length}，margin-right {length}，margin-top {length}，margin-bottom {length}
- border {length}：設(shè)定邊框，具體有border-style（border-left-style {string}、border-top-style {string}、border-right-style {string}、border-bottom-style {string}），border-width（border-left-width {length}、border-top-width {length}、border-right-width {length}、border-bottom-width {length}）、border-color （border-left-color {color}、border-top-color {color}、border-right-color {color}、border-bottom-color {color}），border-radius（border-bottom-left-radius {length}、border-bottom-right-radius {length}、border-top-left-radius {length}、border-top-right-radius {length}）
示例
'''
<template>
<div>
<image style="width: 400px; height: 200px; margin-left: 20px;" src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"></image>
</div>
</template>
'''
注意
- Weex 對于長度值目前只支持像素值，不支持相對單位（em、rem）。
- Weex 盒模型的 box-sizing 默認(rèn)為 border-box，即盒子的寬高包含內(nèi)容、內(nèi)邊距和邊框的寬度，不包含外邊距的寬度。
- 目前在 <image> 組件上尚無法只定義一個或幾個角的 border-radius。比如你無法在這兩個組件上使用 border-top-left-radius。該約束只對 iOS 生效，Android 并不受此限制。
(Flexbox)[https://www.w3.org/TR/css-flexbox-1/]
在 Weex 中，F(xiàn)lexbox 是默認(rèn)且唯一的布局模型，所以你不需要手動為元素添加 display: flex; 屬性。
Flex 容器
如果一個 Weex 元素可以容納其他元素，那么它就成為 flex 容器。
Flex 成員項
position 定位
Weex 支持 position 定位，用法與 CSS position 類似。為元素設(shè)置 position 后，可通過 top、right、bottom、left 四個屬性設(shè)置元素坐標(biāo)。
- position {string},設(shè)置定位類型。可選值為 relative | absolute | fixed | sticky，默認(rèn)值為 relative。
- relative 是默認(rèn)值，指的是相對定位；
- absolute 是絕對定位，以元素的容器作為參考系；
- fixed 保證元素在頁面窗口中的對應(yīng)位置顯示；
- sticky 指的是僅當(dāng)元素滾動到頁面之外時，元素會固定在頁面窗口的頂部。
- top {number}：距離上方的偏移量，默認(rèn)為 0。
- bottom {number}：距離下方的偏移量，默認(rèn)為 0。
- left {number}：距離左方的偏移量，默認(rèn)為 0。
- right {number}：距離右方的偏移量，默認(rèn)為 0。
