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