weex入門

近期要作一個安卓端的原生應用程序。狀況是這樣的：需求方原先已經實現了網頁，是一個工具類應用，大體做用是鏈接到他們公司生產的硬件，而後通手機與智能硬件通訊來對硬件進行一系列控制。不過呢，這個網頁先前是由工程師完成的，使用方式都是指令式的（好比鏈接服務器須要輸入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的單文件組件相同，即<template> </template> <script></script> <style></style>。
weex的解決方案和我起初所想的並不同，並非向原生應用插入一個html頁面。weex中寫JS和在Web中寫JS的區別主要有：

• weex環境中沒有DOM（DOM是js操做html的接口，是Web中的概念）。因爲原生環境不支持Web API，其餘一些Web API，如ELement、Event、File等也沒法使用，具體可看MDN上的Web API列表。
• 雖然不存在DOM對象，可是weex實現了一套Native DOM API，這套接口與HTML DOM API很是接近，同時weex中的VUE也是基於此來進行適配的。
• 沒有BOM對象（瀏覽器對象模型）,因此沒有window、screen、document、history、location、navigator等對象。同時像document.getElementById這類選擇元素的方法也就沒法使用。
• weex的運行環境以原生應用爲主，在Android和iOS環境中渲染出來的是原生的組件，而不是DOM元素。
• weex支持綁定事件，本質上是由原生組件捕獲並觸發的，所以行爲和瀏覽器不一樣，同時只支持有限幾類事件，也不區分事件的捕獲的冒泡階段（weex2.0已經實現了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佈局教程。
• position屬性除了relative、absolute、fixed外，還有stiky，意爲僅當元素滾動到頁面元素外時，元素會固定在頁面窗口的頂部。
• weex不支持z-index，但靠後的元素層級更高，能夠經過排列元素出現順序來調整層級。
• Weex 支持四種僞類：active, focus, disabled, enabled全部組件都支持 active, 但只有 input 組件和 textarea 組件支持focus,enabled, diabled。
• weex支持漸變，不過如今只支持兩種顏色的漸變。
  按weex文檔所說，能夠以以下順序規劃weex的樣式：

1. 全局樣式規劃：將整個頁面分割成合適的模塊。
2. flex 佈局：排列和對齊頁面模塊。
3. 定位盒子：定位並設置偏移量。
4. 細節樣式處理：增長特定的具體樣式。

內建組件

雖然weex可使用HTML和CSS中的一些標籤，但實際上應該是對原生組件的封裝，而非HTML元素。可用的Web標準包括HTML、CSS、JS等的API可看這裏。
weex裏可用的組件有：

• <div> 最基本的容器標籤。和HTML中的<div>類似，不過不能在裏面直接添加文本，而要用<text>標籤。 推薦自定義一個組件時在外層用一個<div>做爲根容器。
• <a> 組件定義了指向某個頁面的超鏈接。它和HTML中的<a>標籤相似，區別是不能直接在裏面添加文本，而是要再嵌套一層<text>。同時它還支持全部通用樣式包括flexbox、position等，這與HTML中的<a>標籤徹底不一樣。
• <text> 用於渲染文本，能夠用{{}}來插入變量值。 能夠用line="3"來指定文本爲三行。
• <textarea> 能夠看成是容許多行的<input>標籤。用row=3來設置高數限制。
• <video>和<image>用來插入媒體。
• <web>用於在weex頁面中嵌入一張網頁內容，和HTML中的<iframe>做用相似。
• <switch> 相似iPhone中飛行模式的按鈕。
• <input>
• <list>垂直列表功能的組件，<cell>爲其子組件。
• <scroll> 內部子組件可滾動的容器。
• <slider>輪播圖，<indicator>爲指示器。
• <loading>上拉加載功能。<refresh>下拉刷新功能。不過都須要是<scroll>和<list>的子組件才能被正確渲染。

內建模塊

weex裏的模塊應該也是對原生開發語言的一些方法或是庫的引用或封裝。好比若是要引用dom模塊，須要用const dom=weex.requireModule('dom')的方式加載。可用的模塊有：

• animation動畫效果。使用方法爲animation.transition(el,options,callback)。el爲對元素的引用，不過須要經過vue中的this.refs.element來引用。option是過渡效果的時間、樣式變化等的配置項，callback爲回調函數。
• picker用於數據選擇、日期選擇、日間選擇等。pick(options,callback)。
• WebSocket
• clipboard模塊用getString(callback)、setString(callback)來從系統的粘貼板中獲取內容或者是設置內容。
• dom。目前來講除了scrollToElement(node,options)沒有其餘用處。
• modal用於展現消息框如toast、alert、confirm、prompt等。
• navigator用於切換頁面，同時能夠指定動畫效果。
• storage與前端的數據存儲相似，不過沒有大小的限制。
• stream用於實現網絡請求。使用爲fetch(options, callback[,progressCallback])。
• webview模塊，用於配合<view>組件使用的。
• globalEvent爲全局事件模塊，不過就算原生JS中Event事件對象我也不多用到。

其餘

固然weex還有其餘一些重要接口，不過沒有移動應用開發經驗的我不是很理解。JS Service是很是強大也很危險的功能，須要有必定的移動開發的經驗。若是開發者水平足夠的話，還能夠擴展JS framework。爲了方便調試還能夠把Devtools集成到Android應用中。
——————————————
2017-10-10 上個月完成了一個釘釘微應用，是用weex寫的原生應用，功能較簡單，不過這番體驗着實有趣~