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是nodejs一個很是流行的管理工具，能夠安裝基於nodejs開發的任何模塊包，-g表示把weex-toolkit安裝到全局模塊中，成功後咱們能夠在nodejs\node_modules下面找到weex-toolkit這個包；命令：npm install weex-toolkit -g

　　注意：node_modules這個針對nodejs自己和基於nodejs開發項目都會存在，因此存在全局局部之分，不帶-g參數則表示在當前項目的node_modules目錄中添加模塊包，這個後面會說到。安裝成功後咱們輸入在命令行weex若是看到以下提示則表示成功

再輸入webpack，驗證打包工具

項目創建

一、新建一文件夾如weexdemo；

二、在文件夾下執行weex init，參數所有默認便可；

三、成功後文件夾下產生了一些文件:

weexdemo

|-.gitignore 

|-index.html h5展現頁面

|-src/main.we 默認入口we源文件

|-package.json 包配置

|-webpack.config.js webpack打包配置文件

|-README.md 打包腳本說明

四、執行npm install 安裝項目依賴包

發現多了node_modules表示安裝成功

四、運行demo

執行自帶的we文件 weex src/main.we 根據提示發現weex開了http服務和websocket服務，這裏的websocket服務主要是起了熱刷新做用，修改頁面後頁面自動刷新

此時瀏覽器便成功運行weex默認main頁面

 

咱們用編輯器修改一下main.we源文件

保存後咱們發現網頁端的內容就自動刷新了，這樣一個簡單的demo就運行成功!

 

 

手機端運行

一、咱們先下載weex自帶的playground app

http://alibaba.github.io/weex/download.html

二、編譯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個條件

一、服務端必須給定ip地址；

二、手機端必須根據服務端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/