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