背景:
由於公司項目需要,需求變化頻繁,計划總改不上變化,由於app更新版本周期長,不能很好應對這種變化,正在此前提下熱修復和熱更新技術也有了發展的空間,不管熱修復還是熱更新,都是對app內容或者邏輯的變化作出像web網頁更新類似的體驗。
weex阿里推出的熱更新框架,已再內部應用在多款app上如淘寶,天貓和閑魚等,典型的電商型app非常適合用weex來構造,weex已在6月份開放開源,
假如你的app是應用類,服務類如天氣、電商和服務類,恭喜你非常適合用weex來構建,假如你的app是工具類,管家類涉及調用硬件層面多點,那我建議,還是用原生來開發更具價值。
為此我們選用weex了框架來構造。
開始:
開發環境配置:
- 下載node.js:https://nodejs.org/en/ weex基於后端服務node.js框架構建,所以先安裝node.js 推薦安裝第一個
我把它安裝在 C:\toolkits\nodejs
- 配置環境參數:
NODE_HOME:%toolkit_home%\nodejs
NODE_PATH:%node_home%\node_modules
這里toolkit_home=C:\toolkits
打通路徑以訪問工具鏈
配置好重啟機器打開命令窗口檢查工作情況
輸入node -v 如果現實版本號則成功
- 安裝weex工具鏈:
npm install weex-toolkit -g
npm是nodejs一個非常流行的管理工具,可以安裝基於nodejs開發的任何模塊包,-g表示把weex-toolkit安裝到全局模塊中,成功后我們可以在
nodejs\node_modules下面找到weex-toolkit這個包;
注意:node_modules這個針對nodejs本身和基於nodejs開發項目都會存在,所以存在全局局部之分,不帶-g參數則表示在當前項目的node_modules目錄中添加模塊包,這個后面會說到。
安裝成功后我們輸入在命令行weex如果看到如下提示則表示成功
再輸入webpack,驗證打包工具
- 項目建立:
1、新建一文件夾如weexdemo;
2、在文件夾下執行weex init,參數全部默認即可;
3、成功后文件夾下產生了一些文件:
weexdemo
|-.gitignore
|-index.html h5展示頁面
|-src/main.we 默認入口we源文件
|-package.json 包配置
|-webpack.config.js webpack打包配置文件
|-README.md 打包腳本說明
4、執行npm install 安裝項目依賴包
發現多了node_modules表示安裝成功
- 運行demo
執行自帶的we文件 weex src/main.we 根據提示發現weex開了http服務和websocket服務,這里的websocket服務主要是起了熱刷新作用,修改頁面后頁面自動刷新
此時瀏覽器便成功運行weex默認main頁面
我們用編輯器修改一下main.we源文件
保存后我們發現網頁端的內容就自動刷新了,這樣一個簡單的demo就運行成功!
手機端運行?
1、我們先下載weex自帶的playground app
http://alibaba.github.io/weex/download.html
2、編譯js build文件,我們查看README.md,
發現:npm run dev這個命令,意思是監聽文件改動編譯生成js文件,如我們改動src/main.we后,自動編譯到dist/main.js
它主要關聯package.json文件下面的scripts段:以及默認webpack.config.js 去控制輸出結果(這個文件控制輸入文件和輸出,以及如何處理等)
成功后發現dist目錄和main.js文件生成
然后我們可以根據readme提示開一個http服務來支持js bundle文件
npm run serve
在瀏覽器輸入http://localhost:8080/,我們同樣得到了web端的渲染結果,但是我們需要手機展示
此時我們需要2個條件
1、服務端必須給定ip地址;
2、手機端必須根據服務端ip能訪問服務端;
假設你的開發機的ip是192.168.2.102;
我們改一下地址
http://192.168.2.102:8080/dist/main.js 便可以訪問 js bundle文件內容;
我們用二維碼工具轉換一下得到二維碼,再用playground app右上的掃一掃便能訪問到此頁面內容;
這樣便成功運行在手機端,當內容改變時候我們按一下右上角的刷新按鈕就能看到變化;
需要注意:在安卓或者蘋果看到的不是一個web的網頁,而是經過js轉換的native的原生界面;
可以看到,weex界面布局和業務邏輯轉換為JS文件,由客戶端去解析,從而實現了app的內容熱更新;
我們對weex有了初步的認識,盡管現在階段還存在一些問題,相信在開源力量下,該項目會越做越好;
參考資料:
node.js:https://nodejs.org/en/
weex主頁:http://alibaba.github.io/weex/