最近工作一直在搭建weex的項目架構(gòu)，對于Weex開發(fā)需要理解很多概念并且需要強大的內(nèi)心，因為還沒有比較成熟，所以坑比較多。但是公司團隊需要開發(fā)，所以在此記錄一些東西。
首先，我們得理解四種環(huán)境：
- iOS 環(huán)境
- Android 環(huán)境
- Web 環(huán)境
- WebView 環(huán)境
這幾種環(huán)境當(dāng)然可以根據(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ù)標(biāo)簽，需要使用它自己封裝的標(biāo)簽，而且與vue不同的是，他打包的文件是通過每個頁面動態(tài)的打包，所以跳轉(zhuǎn)不是vue-router簡單的跳轉(zhuǎn)，而是通過其封裝的navigator進行頁面之間的跳轉(zhuǎn)的。
