前端構建Weex 流程

weex初識

weex 具備不少優點。

• 一種代碼 多端運行
• 減小包的大小
• 無痕改bug
• vue語法

weex弱勢

• 官方文檔坑
• 限制比較大

作爲前端構建weex須要儲備什麼

• 安卓環境搭建
• XCode安裝 瞭解CocoaPods。

weex環境搭建

web相關

node環境 npm包管理 weex-toolkit weex腳手架 安裝成功後直接weex 會看到help

• node
• npm
• cnpm install -g weex-toolkit
• cnpm install webpack -g

安卓相關

只有一個注意點 耐心。 會下載超多依賴

• 下載java sdk
• 配置sdk
• 下載AndroidStudio ,不推薦官方下載
• 配置AndroidStudio
• 第一次打開AndroidStudio巨慢解決方法，見附件

weex項目搭建

node 相關搭建

weex create 搭建一個含有三端的應用。 weex init 搭建一個 vue項目。build生成js 直接導入安卓項目便可。

weex create HelloWeex
cd HelloWeex
cnpm install 
weex platform add android (還能夠添加ios)
weex run android

• weex platform add android 運行了這句話後 項目會多一個android 這個文件就是以後安卓項目工程。

• 經過修改vue看不一樣內容。

• weex run android (能夠用真機和模擬機 真機記得開發模式)

AndroidStudio中打開

一直下載依賴，直到沒有error.打開慢的話能夠看 第一次打開AndroidStudio巨慢解決方法，見附件

• 點build->打包構建包

weex init awesome-project
以後咱們進入項目所在路徑，weex-toolkit 已經爲咱們生成了標準項目結構。

在 package.json 中，已經配置好了幾個經常使用的 npm script，分別是：
build: 源碼打包，生成 JS Bundle
dev: webpack watch 模式，方便開發
serve: 開啓靜態服務器
debug: 調試模式
咱們先經過 npm install 安裝項目依賴。以後運行 npm run dev 和 npm run serve 開啓watch 模式和靜態服務器。

而後咱們打開瀏覽器，進入 http://localhost:8080/index.html 便可看到 weex h5 頁面。

端口衝突 直接更改端口便可

• build以後

• 安裝包連接（jdk64windowgradle-3.4.1 gradle-2.14.1-all）
• 連接：http://pan.baidu.com/s/1o8LX3OQ 密碼：ipfl

後續更新原理調研及蒐集向文檔。