在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部分進行預(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鸭轮。
