近期要做一個安卓端的原生應用程序。情況是這樣的：需求方原先已經實現了網頁，是一個工具類應用，大致作用是連接到他們公司生產的硬件，然后通手機與智能硬件通信來對硬件進行一系列控制。不過呢，這個網頁先前是由工程師完成的，使用方式都是指令式的（比如連接服務器需要輸入link server，發送信號需要send signal）。嗯，這很程序員。這反人性的操作讓使用人員用了不久就深惡痛絕，正好又有需求上的變更，於是他司決定重寫頁面，同時為了方便員工的使用需要以安卓app的形式完成。
然而我只是個JSer啊！不過萬能的JS表示移動端應用了也是小Case。本來我就一直對RN很感興趣，但是現在時間緊迫，React Native的入門成本高，所以先嘗試使用阿里的weex方案，待以后時機合適再學習RN的使用。
計划先過一遍weex的文檔，然后研究weex團隊寫的移動端原生應用weex-hackernews，配合使用weex-pack、Weex Playground、weex-toolkit來開發安卓APP。另外還有weex.help和weex學院這兩個社區供weex開發者交流學習（瀏覽了一些帖子之后感嘆weex的強大，於是堅定了我后期學習RN的決心）。
用weex開發安卓APP需要安裝Android Studio，同時我裝了安卓模擬器來測試。
以下主要我是對weex官方文檔的梳理。
weex文檔學習
weex是跨平台解決方案，可以用JS開發高性能、可擴展的 native 應用。早先weex自身有一套語法規則，與Vue有些相近，現在weex已與Vue合作，使用Vue作為上層框架，同時一些Vue插件如Vue-Router等也可以使用。很好奇weex+vue會碰撞出怎樣的火花。與Web開發的差異
由於weex已與Vue合作，因此寫法上與Vue的單文件組件相同，即``` ```。 weex的解決方案和我起初所想的並不一樣，並不是向原生應用插入一個html頁面。weex中寫JS和在Web中寫JS的區別主要有： - weex環境中沒有DOM（DOM是js操作html的接口，是Web中的概念）。由於原生環境不支持Web API，其他一些Web API，如ELement、Event、File等也無法使用，具體可看MDN上的[Web API列表][list]。 - 雖然不存在DOM對象，但是weex實現了一套[Native DOM API][dom]，這套接口與HTML DOM API非常接近，同時weex中的VUE也是基於此來進行適配的。 - 沒有BOM對象（瀏覽器對象模型）,所以沒有window、screen、document、history、location、navigator等對象。同時像document.getElementById這類選擇元素的方法也就無法使用。 - weex的運行環境以原生應用為主，在Android和iOS環境中渲染出來的是原生的組件，而不是DOM元素。 - weex支持綁定事件，本質上是由原生組件捕獲並觸發的，因此行為和瀏覽器不同，同時只支持有限[幾類事件][event]，也不區分事件的捕獲的冒泡階段（[weex2.0][bubble]已經實現了W3C標准的事件冒泡機制，不過為了兼容舊版本，需要在根元素屬性在加上```bubble="true"```來開啟）。 - 能調用移動設備的原生API，使用方法是通過注冊、調用模塊來實現。其中有一些模塊是 Weex 內置的，如 clipboard、navigator、storage等。CSS的差異
- 為了加強性能，weex不允許使用簡寫屬性。比如```border: 1px solid #ddd```這樣的CSS樣式需要拆分成```border-style```、```border-color```等。 - weex同樣基於盒模型，不過默認```box-sizing```為```border-box```。 - 長度只支持像素值，不支持em、rem這樣的相對單位。 - 選擇器只支持單個class或者id，而不支持后代選擇器、屬性選擇器等。 - weex默認且唯一的布局模型為```flex```，因此是靠```flex-direction```、```align-items```等css屬性來布局。可以看看阮一峰的[flex布局教程][flex]。 - ```position```屬性除了```relative```、```absolute```、```fixed```外，還有```stiky```，意為僅當元素滾動到頁面元素外時，元素會固定在頁面窗口的頂部。 - weex不支持```z-index```，但靠后的元素層級更高，可以通過排列元素出現順序來調整層級。 - Weex 支持四種偽類：```active```, ```focus```, ```disabled```, ```enabled```所有組件都支持 ```active```, 但只有 ```input``` 組件和 ```textarea``` 組件支持```focus```,```enabled```, ```diabled```。 - weex支持漸變，不過現在只支持兩種顏色的漸變。 按weex文檔所說，可以以如下順序規划weex的樣式：- 全局樣式規划：將整個頁面分割成合適的模塊。
- flex 布局：排列和對齊頁面模塊。
- 定位盒子：定位並設置偏移量。
- 細節樣式處理：增加特定的具體樣式。
內建組件
雖然weex可以使用HTML和CSS中的一些標簽，但實際上應該是對原生組件的封裝，而非HTML元素。可用的Web標准包括HTML、CSS、JS等的API可看[這里][standard]。 weex里可用的組件有： - ```
``` 最基本的容器標簽。和HTML中的```
```相似，不過不能在里面直接添加文本，而要用```
```標簽。 推薦自定義一個組件時在外層用一個```