Weex 架構分析

最近工作一直在搭建weex的項目架構,對于Weex開發需要理解很多概念并且需要強大的內心,因為還沒有比較成熟,所以坑比較多。但是公司團隊需要開發,所以在此記錄一些東西。


首先,我們得理解四種環境:

  • iOS 環境
  • Android 環境
  • Web 環境
  • WebView 環境

這幾種環境當然可以根據字面意思來理解,所以,我們在搭建所謂三端一致的環境的時候,我們需要區分這四種環境。


然后,利用Weex中搭建的腳手架框架weexpack構建的項目,大致的架構如下:

  WeexProject
  ├── README.md
  ├── android.config.json
  ├── config.xml
  ├── hooks
  │   └── README.md
  ├── ios.config.json
  ├── package.json
  ├── platforms     // 平臺模版目錄
  ├── plugins       // 插件下載目錄
  │   └── README.md
  ├── src           // 業務代碼(we文件)目錄
  │   └── index.we
  ├── start
  ├── start.bat
  ├── tools
  │   └── webpack.config.plugin.js
  ├── web
  │   ├── index.html
  │   ├── index.js
  │   └── js
  │       └── init.js
  └── webpack.config.js

此架子大概幫我們已經搭建好了一個基本的開發思路,但是,我們可以看出webpack的架子并沒有搭建比較完全,weexpack只是幫我們簡單的實現了打包與web端渲染。所以,我們需要自己根據的需求,讓其變得更加飽滿一點。

另外,關于weexpack 的調試問題困惑了作者很久,經查詢記錄于此:
1.在瀏覽器地址欄輸入:chrome://inspect/#devices
2.點擊如下:

image.png

3.在webpack的配置文件中加一個debugger
4.在你的package.json中添加一個新的script, run 即可。比如:

"debug": "node --inspect --debug-brk node_modules/.bin/webpack --config webpack/webpack.config.js"

另外,weex 寫UI是不兼容Web大多數標簽,需要使用它自己封裝的標簽,而且與vue不同的是,他打包的文件是通過每個頁面動態的打包,所以跳轉不是vue-router簡單的跳轉,而是通過其封裝的navigator進行頁面之間的跳轉的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 2016年4月21日,阿里巴巴在Qcon大會上宣布開源跨平臺移動開發工具Weex,Weex能夠完美兼顧性能與動態性...
    晴天咚咚閱讀 2,910評論 1 15
  • 寫這篇文章是基于自己的學習,思路理清。 如果說要按類型來劃分的話,自定義View的實現方式大概可以分為三種...
    小沈新手閱讀 221評論 0 0
  • 欄桿,原作闌干,原是指用木料編織起來的遮擋物,后來又發展出石、磚、琉璃等不同材料所制成的欄桿。 現已發現最早的欄桿...
    遇見青丘閱讀 20,071評論 2 17
  • 麻雀仰伴飛———— 白兔兒長翅膀———— 老鼠鉆風箱———— 猴子的舅舅——— 答案簡信告知,大家同樂!
    如夢塵緣閱讀 510評論 2 2
  • 沉浸在迷幻中許久, 癡夢方醒。 任萬千信手可拈的花飄離, 只留清靜閑適的一處妙居。 無形的隔膜不知幾時形成, 輕巧...
    藝林漫筆閱讀 200評論 0 0