weex入門指南--華嶺


背景:

     由於公司項目需要,需求變化頻繁,計划總改不上變化,由於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/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM