【weex實戰】項目開發經驗

前言

本人近期加入了公司開發的一款應用i7，此款應用前端選用的weex開發語言，就weex下面我來說解一下本身的經驗總結，可能不全，但願有些地方可以幫助到你們。

正文

1. 什麼是weex？

介紹這裏，我參照的官網，建議同窗們仍是去官網看一遍，下面有網址。

Weex是使用同一套代碼來構建 Android、iOS 和 Web 應用（一次編寫，到處運行）。具體來說，在集成了 WeexSDK 以後，你可使用 JavaScript 和現代流行的前端框架來開發移動應用。

Weex 在 iOS 和 Android 上都實現了一個渲染引擎，並提供了一套基礎的內置組件。基於這些組件，你能夠用 js 封裝更多的上層組件。

儘管 Weex 中的組件看起來很像 HTML 標籤，但你沒法使用全部 HTML 標籤，只能使用內置組件和自定義組件。

在框架內部，Weex 使用的是原生系統提供的 Widget 來渲染的。儘管 Weex 強調每一個跨平臺的一致性，但咱們仍然接受平臺自己的行爲和 UI 差別。 例如switch 組件

除了內置組件之外，Weex 也支持你擴展更多原生組件，可是你須要在每一個平臺上實現它們，並保持其行爲一致。最實用的方法是將現有的本地組件集成到 Weex 平臺中。

在 Android 和 iOS 上看起來是不一樣的（在 Web 端的外觀模擬了 iOS）。

具體解釋請參考weex官網：weex.apache.org/cn/guide/

蘋果手機上weex最低支持到iOS7.0

2. weex的安裝

針對用過weex的同窗能夠直接跳過這一步。

（簡單的步驟：首先安裝nodejs，裏面自帶npm包管理，而後安裝weex-toolkit，npm install weex-toolkit -g，這條命令會向你命令行環境中註冊一個weex命令。安裝完成後命令行輸入weex，查看是否有命令幫助內容，若是提示沒有weex命令，表示weex沒有安裝好，檢查一下本身的安裝環境。）

之前簡單講過，可是考慮到有些同窗可能沒有用過，下面我詳細講解一下。

初始化

Node.js官網nodejs.org/en/ 點進去直接下載安裝，下載後會自帶npm包管理工具

在命令行中輸入如下命令，查看是否安裝成功：

node -v

npm -v

若是要安裝淘寶鏡像，輸入如下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看是否安裝成功：

cnpm -v

請確保你已經安裝了 Node.js，而後全局安裝 weex-toolkit。

npm install weex-toolkit -g

你能夠用weex create命令來建立一個空的模版項目。

weex create awesome-app

這樣，你就擁有了一個weex工程了，能夠簡單的作些demo試一下。

3. weex的優缺點

優勢：weex可以完美兼顧性能與動態性，讓移動開發者經過簡捷的前端語法寫出Native級別的性能體驗，並支持三端統一。

缺點：控件太少，基本只能實現最基本的效果；上手難度大，若是是前端和移動端都比較懂上手很快；隨着項目變大，編譯速度會指數型上升。

好了，基礎的就不講了，下面咱們進入到項目中講解。

4. 項目開發中，weex經常須要注意的地方

（這裏是我開發的經驗，若是有認爲錯誤的地方，能夠在留言中指出）

1）頁面與網關的聯調問題（說些業務上的bug點）

    a) 注意接口拿到的第一個狀態值success是網關的接口狀態，第二個纔是後端接口的狀態

    b) 注意後端傳空的值，網關是否會自動過濾掉

2）weex頁面內判斷的問題

weex沒有dom的概念，在頁面渲染中，若是要進行頁面元素的判斷，記住最好用true和false。

例如判斷一個元素若是接口返回值爲1就顯示，不爲1就不顯示，最好這樣寫：

a) 先在js代碼中定義一個變量

data(()=>{ 

   showFlag:false

})

b) 而後在方法中判斷若是返回值爲1，狀態爲true

if(data == 1){

   this.showFlag = true

}else{

   this.showFlag = false

}

c) 在template中<div v-if="showFlag">demo</div>這麼調用

d) v-show 和display不起做用，能夠用v-if來代替

e) 在組件內判斷null==null和null!=null，結果都爲true，因此判斷並無意義。

f) Weex 目前不支持 z-index 設置元素層級關係，但靠後的元素層級更高，所以，對於層級高的元素，可將其排列在後面。

g) 在 Weex 中，Flexbox 是默認且惟一的佈局模型，因此你不須要手動爲元素添加 display: flex; 屬性

h) 目前在 <image> 組件上尚沒法只定義一個或幾個角的 border-radius

i) Weex 對於長度值目前只支持像素值，不支持相對單位（em、rem）

j) 不要用float定位，用flexbox佈局，能夠用position，Weex 佈局模型基於 CSS Flexbox，以便全部頁面元素的排版可以一致可預測，同時頁面佈局能適應各類設備或者屏幕尺寸

k) 若是定位元素超過容器邊界，在 Android 下，超出部分將不可見，緣由在於 Android 端元素 overflow 默認值爲 hidden，但目前 Android 暫不支持設置 overflow: visible。

l）weex內置組件一共17個，你們能夠按照html標籤同樣理解，除了這些內置組件，其餘標籤不支持。

<a>  <div>  <image> <indicator>  <input>  <list>  <cell>  <recycle-list>  <loading>  <refresh>  <scroller>  <slider>  <text>  <textarea>  <video>  <waterfall>  <web>

m）weex內置模塊一共有12個，weex的動畫和數據交互都以這12個模塊爲基礎進行開發：

animation  clipboard  dom  globalEvent  meta  modal  navigator  picker  storage  stream  webSocket  webview

n）Weex 支持四種僞類：active, focus, disabled, enabled

全部組件都支持 active, 但只有 input 組件和 textarea 組件支持 focus, enabled, disabled

o） background-image 優先級高於 background-color，這意味着同時設置 background-image 和 background-color，background-color 被覆蓋，不要使用 background 簡寫。

p） <recycle-list> 是一個新的列表容器，只能使用 <cell-slot> 做爲其直接子節點，使用其餘節點無效。

q）navigator 實現前進後退功能。

r）<web> 回退、前進和從新加載用。

5. 組件化

在weex項目中，建議進行單頁面應用開發，這樣能夠進行單頁面的獨立打包，進行上線替換。

頁面編寫上儘可能趨向於組件化編程，一次編寫，屢次引用。

咱們開發的時候是本身建了一個組件庫，將組件開發完成後，發佈到npm中。

在開發過程當中，由於有些功能不可能有改動就發佈到npm上，因此咱們大多數用的方法是npm link的方式，在組件項目中，輸入命令行 npm  link，會輸入一個地址，而後在本身應用的項目中，輸入命令行「npm link 地址」，下面給你們貼圖說明一下作法，就是紅框內的內容

配置完成後，本地的應用項目就能夠引用本地的組件庫了，組件庫一旦更改，應用項目就會自動編譯更新。引用組件的方法和引用npm時同樣，不用變。更貼近於業務的組件，若是別的項目，基本不會用到，能夠放到應用項目中，單獨創建一個頁面，進行調用。

下面我簡單舉個頁面例子：

這段代碼，一共引用了5個組件，不知道你有沒有看出來，這樣編寫，可讓頁面結構和佈局更簡潔明瞭，這只是一個開發建議，你們開發仍是要看本身的習慣。

這段代碼最後有一句話，是引入列表頁模塊，下面咱們就來講一下單頁面應用中，多個頁面內若是進行數據傳遞。

6. 頁面數據的交互

• 首先說一下代碼結構，每一個單頁面應用有個文件夾，有個package.json，有個README.md，還有一個或多個頁面，例如：
  

awesome-page-demo

      index.js

      index.vue

      package.json

      README.md

      second.vue (而後咱們加一個頁面，說下怎麼傳輸數據)

我這裏的使用方法就是把每一個頁面的下一個頁面，做爲一個模塊引入進來，相似於a引入b，b引入c的形式。路由單獨提到下面去講。

a) 在頁面index.vue中設置變量data，而後在second.vue中設置

props:{

   data:{

     type:Object

   }

}

在頁面second.vue中，data裏的值就能夠隨意使用了

• 而後說下路由怎麼傳值：

脫離我上面講的那個頁面結構，先說下頁面如何跳轉： this.$router.push('/a')；

頁面回退：this.$router.back();

加上參數：this.$router.push({path:'/a',query:param});

得到路由請求的參數：

let routerparams = this.$router.currentRoute.query;

7. weex 日曆控件的使用

說幾個坑，你們注意下。

我目前知道的weex日曆控件有三個，若是有更好的，你們能夠告訴我下，互相學習嘛～

a) weex內置組件<input type="date"/> iphoneX iphone8不支持，日曆組件彈都彈不出來

b) weex-ui的WxcPageCalendar組件，這個組件手機上都能成功調用，缺點就是有點影響性能，不過這個組件支持往返日期的選擇，若是你的功能須要這樣的交互，也是個不錯的選擇

c) weex的picker內置模塊，這個相對於前兩個，性能更好，並且兼容iphoneX。測試時發如今不一樣型號手機上，樣式和交互方式是不同的。若是想要樣式和交互一致，建議用weex-ui的日曆組件。

上次測試發現了一個問題，我在這裏描述下，你們知道一下。手機360N4上，例如當前日期是2018-06-30，默認選中。當你翻到其它年份的6月30日時，它也是選中狀態。目前我沒有提供解決方案，功能是不影響使用，在其它手機上沒有發現這個問題。若是有好的解決方法，請給我留言。

8. weex的渲染問題

說一個我遇到的問題，若是你也遇到這種問題，但願對你有幫助。

一個頁面中多個按鈕，點擊後能夠切換面板，若是面板中有可編輯區域的內容，例如input和textarea，面板切換走，在切換回來，你會發現，剛纔你編輯的內容不見了，那麼這個問題怎麼解決。

說下個人思路，先定義一個變量inputTxt:""，inputFlag:false，編輯的時候，獲取blur或者change方法內的值，也就是你編輯的值，將變量this.inputTxt = event.value;

this.inputFlag=true;(這個變量的意思就是你編輯過)

而後切換回來的時候判斷：

if(this.inputFlag){ //編輯過

      編輯框的內容 = this.inputTxt;

}else{ //沒有編輯過

      編輯框的內容 = 接口回顯的值;

}

這樣不論你怎麼切換，頁面內容的顯示都沒有問題了 。

9. css的寫法

Css不支持用scss或者less，組合式css分開寫

這裏我重點強調一句，用最原始的寫法，最笨的寫法，就是最好用的寫法。

組件的話，你們能夠參考下weex-ui和bui-weex

10. 文件下載和圖片上傳

參見：natjs.com/#/

11. 我的意見

不建議你們用weex開發，我的以爲很差用，作不了特別複雜的交互，也沒有解放iOS和Android的人力