最近工作一直在搭建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進行頁面之間的跳轉的。