最近工作一直在搭建weex的項目架構(gòu),對于Weex開發(fā)需要理解很多概念并且需要強大的內(nèi)心,因為還沒有比較成熟署穗,所以坑比較多。但是公司團隊需要開發(fā)嵌洼,所以在此記錄一些東西案疲。
首先,我們得理解四種環(huán)境:
- iOS 環(huán)境
- Android 環(huán)境
- Web 環(huán)境
- WebView 環(huán)境
這幾種環(huán)境當然可以根據(jù)字面意思來理解咱台,所以络拌,我們在搭建所謂三端一致的環(huán)境的時候,我們需要區(qū)分這四種環(huán)境回溺。
然后春贸,利用Weex中搭建的腳手架框架weexpack構(gòu)建的項目,大致的架構(gòu)如下:
WeexProject
├── README.md
├── android.config.json
├── config.xml
├── hooks
│ └── README.md
├── ios.config.json
├── package.json
├── platforms // 平臺模版目錄
├── plugins // 插件下載目錄
│ └── README.md
├── src // 業(yè)務(wù)代碼(we文件)目錄
│ └── index.we
├── start
├── start.bat
├── tools
│ └── webpack.config.plugin.js
├── web
│ ├── index.html
│ ├── index.js
│ └── js
│ └── init.js
└── webpack.config.js
此架子大概幫我們已經(jīng)搭建好了一個基本的開發(fā)思路遗遵,但是萍恕,我們可以看出webpack的架子并沒有搭建比較完全,weexpack只是幫我們簡單的實現(xiàn)了打包與web端渲染车要。所以允粤,我們需要自己根據(jù)的需求,讓其變得更加飽滿一點翼岁。
另外类垫,關(guān)于weexpack 的調(diào)試問題困惑了作者很久,經(jīng)查詢記錄于此:
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大多數(shù)標簽,需要使用它自己封裝的標簽榆俺,而且與vue不同的是售躁,他打包的文件是通過每個頁面動態(tài)的打包坞淮,所以跳轉(zhuǎn)不是vue-router簡單的跳轉(zhuǎn),而是通過其封裝的navigator進行頁面之間的跳轉(zhuǎn)的陪捷。