weex框架使用總結

先轉一張圖：

 花了2周時間作了一個Demo，作個總結記錄一些坑和注意事項。

網上的demo只有網易嚴選比較完整，可是clone下來以後web端可運行，在ios或android端沒法跑通，因此項目是從新創建的。

➜  ~ weex -v

   v1.3.8

 - weexpack : v1.2.4

 - weex-debugger : v1.0.19

 - weex-builder : v0.4.0

 - weex-previewer : v1.5.1

 

一. 經過 weex create myapp 創建的項目是會有2種架構的，關鍵點就是其中的一步它會問你是否須要使用vue-router來管理項目。選者不一樣最終會致使項目結構的差別。（備註：weex自己設計跟原生同樣屬於多頁模式，不管選擇哪一種方式最終都同樣，主要區別在於入口，環境的配置上，腳手架會區別配置）

1. 使用vue-router的項目，其實就是配置了一個spa放在index.js入口頁中，那麼整個項目的開發跟普通的vue的spa應用區別不大。但整個spa的應用其實就是佔用了weex的一個index頁面，實際對應原生也就是一個activity頁面。

說明：我是仿照嚴選demo，因此也使用vue-router生成的項目。而後在webpack.common.conf.js文件中，手動加入了一個webview.js的入口，這樣整個項目最終其實只有兩個頁面，index和webview頁，index頁裏作首頁框架，而後點擊全部功能都跳轉到webview來加載網頁實現。因此最終轉換成原生也是兩個activity頁面。若是還想擴展多個頁面，則應該修改webpack.common.conf.js裏關於入口的控制，能夠根基實際需求自動生成。也能夠參考不使用vue-router創建的項目配置。

2. 不使用vue-router的項目，也是使用index.vue作入口頁，但更靠近原生結構，index.vue只是入口，再創建其餘的vue頁面都會轉換成原生的一個activity頁面。與index頁面實際上是平級的。頁面之間的跳轉是須要用weex提供的navigator方式來實現的。

說明：多頁的規則是，入口index.vue，但項目會自動檢索源文件，只要發現有vue文件就會生成一個頁面。固然在webpack.common.conf.js中也能夠自定義規則。我的感受若是是實際項目而且從頭作的話，這種方式其實更接近原生，由於最終對應的是實際的不少個activity頁面，更接近原生體驗。

** 最重要的跳轉路徑，官網上頁有介紹，要使用weex.config.bundleUrl先獲取當前文件所在路徑做爲基準，而後算出最終想要跳轉的路徑，嚴選demo裏方法可用

二. 阿里飛豬開源了一套weex-ui庫，實際沒有使用，不知效果。

三. 由於要轉原生，最終不在瀏覽器環境下運行因此BOM,DOM都不可用。

四. 還有不少注意事項，文檔裏有提，但太少了，少到感受文檔只說了坑的冰山一角的感受，網上有一些踩坑總結能夠看看。

 

總結：目前確實不適合作公司項目。對原生知識依賴很高，感受若是三端都作的話，一個項目裏3端的人都須要才能很好的使用weex。插件也不完善，不像cordova那麼成熟，一個前端開發人員就搞定全部了。weex最終會將一個vue文件生成somename.web.js(用於web端)和somename.js(用於app端)2個文件,somename.js是weexSDK能識別的js文件，並能夠轉換爲native效果。因此即便不是一個weex項目，好比原生的普通項目，那麼只要引入weexSDK的話，就能夠解析此js文件。weex官方目前推薦的也是這種作法，由於獨立的weex項目確實存在問題。阿里本身的app也是這樣實現方式。

 

追評：昨天升級了macOS10.13.6，xcode9.4.1， 發現項目運行ios時報錯了，網上也查不到解決方案，等待weex繼續完善吧。