weex环境搭建
1. 前言
Weex能夠完美兼顧性能與動(dòng)態(tài)性，讓移動(dòng)開(kāi)發(fā)者通過(guò)簡(jiǎn)捷的前端語(yǔ)法寫(xiě)出Native級(jí)別的性能體驗(yàn)，并支持iOS、安卓、YunOS及Web等多端部署。 外文名
目錄
產(chǎn)品服務(wù)
編輯 對(duì)于移動(dòng)開(kāi)發(fā)者來(lái)說(shuō)，Weex主要解決了頻繁發(fā)版和多端研發(fā)兩大痛點(diǎn)，同時(shí)解決了前端語(yǔ)言性能差和顯示效果受限的問(wèn)題。開(kāi)發(fā)者可通過(guò)Weex官網(wǎng)申請(qǐng)內(nèi)測(cè)。 開(kāi)發(fā)者只需要在自己的APP中嵌入Weex的SDK，就可以通過(guò)撰寫(xiě)HTML/CSS/JavaScript來(lái)開(kāi)發(fā)Native級(jí)別的Weex界面。Weex界面的生成碼其實(shí)就是一段很小的JS，可以像發(fā)布網(wǎng)頁(yè)一樣輕松部署在服務(wù)端，然后在APP中請(qǐng)求執(zhí)行。 Weex能夠完美兼顧性能與動(dòng)態(tài)性，讓移動(dòng)開(kāi)發(fā)者通過(guò)簡(jiǎn)捷的前端語(yǔ)法寫(xiě)出Native級(jí)別的性能體驗(yàn)，并支持iOS、安卓、YunOS及Web等多端部署。?
對(duì)于移動(dòng)開(kāi)發(fā)者來(lái)說(shuō)，Weex主要解決了頻繁發(fā)版和多端研發(fā)兩大痛點(diǎn)，同時(shí)解決了前端語(yǔ)言性能差和顯示效果受限的問(wèn)題。開(kāi)發(fā)者可通過(guò)Weex官網(wǎng)申請(qǐng)內(nèi)測(cè)。?
開(kāi)發(fā)者只需要在自己的APP中嵌入Weex的SDK，就可以通過(guò)撰寫(xiě)HTML/CSS/JavaScript來(lái)開(kāi)發(fā)Native級(jí)別的Weex界面。Weex界面的生成碼其實(shí)就是一段很小的JS，可以像發(fā)布網(wǎng)頁(yè)一樣輕松部署在服務(wù)端，然后在APP中請(qǐng)求執(zhí)行。
2.環(huán)境搭建
1）因?yàn)閃eex工具鏈?zhǔn)褂肗ode.js構(gòu)建，在進(jìn)行后續(xù)步驟前，你需要先安裝 Node.js。?
第一步：下載安裝文件?
下載地址：官網(wǎng)http://www.nodejs.org/download/?
這里用的版本是（node-v6.2.0-x64.msi）?
第二步：下載完成之后，雙擊 node-v6.2.0-x64.msi，開(kāi)始安裝nodejs，默認(rèn)是安裝在C:\Program Files\nodejs下面，一路next完成安裝。?
第三步：安裝npm相關(guān)環(huán)境。?
在命令行中切換到nodejs目錄?
?
鍵入命令：npm install express 回車等待安裝express……..?
鍵入命令：npm install jade 回車等待安裝jade…….?
鍵入命令：npm install?MySQL回車等待安裝mysql……..?
2)在Node.js安裝成功后,你可以執(zhí)行下面的命令來(lái)安裝Weex命令行程序
npm install -g weex-toolkit- 1
- 1
如圖所示：?
?
在安裝結(jié)束后，你能通過(guò)在命令行窗口執(zhí)行 weex 命令來(lái)檢查工具是否安裝正確。僅僅輸入weex并敲擊回車后，你應(yīng)該看到如下內(nèi)容顯示：?
?
(請(qǐng)使用 weex –version 命令檢查你的weex-toolkit版本是否大于 0.1.0）?
至此，環(huán)境已經(jīng)全部安裝完畢。
3.weex快速體驗(yàn)
1）我們先編寫(xiě)一個(gè)列表項(xiàng)，命名tech_list.we文件( .we 是Weex推薦的后綴名 )?
<template><div class="container" ><div class="cell"><image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">JavaScript</text></div></div> </template><style>.cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }.thumb {width: 200; height: 200; }.title {text-align: center ; flex: 1; color: grey; font-size: 50; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2）在命令行中切換工作目錄到剛才存儲(chǔ) tech_list.we 所用目錄并輸入如下命令：
weex tech_list.we- 1
- 1
如圖所示：?
?
成功后，你系統(tǒng)默認(rèn)瀏覽器的窗口將自動(dòng)打開(kāi)以顯示如下內(nèi)容。?
3）現(xiàn)在，讓我們來(lái)嘗試使用Weex Native渲染器來(lái)渲染這個(gè)文件。打開(kāi)終端，切換到保存tech_list.we文件的目錄，執(zhí)行：
weex tech_list.we --qr -h {ip or hostname}- 1
- 1
如圖所示：?
?
此二維碼用來(lái)后面掃描。
4）安裝官方demo：playground.apk?
下載apk文件，Weex Playground?
下載安裝后點(diǎn)擊App中的掃碼圖標(biāo)，然后用你的手機(jī)攝像頭掃描終端中的二維碼。一個(gè)漂亮的列表將出現(xiàn)在你的手機(jī)中。?
這里我需要強(qiáng)調(diào)，這個(gè)列表是完全由native view(不是Webkit)來(lái)進(jìn)行渲染的，相比Webkit渲染的界面，你的App能獲得更快的頁(yè)面加載速度和更少的內(nèi)存開(kāi)銷。
現(xiàn)在你能嘗試變更一些 tech_list.we中的內(nèi)容，在保存變更內(nèi)容之后， Weex Playground 將會(huì)立即在界面上反映出這些變化，這個(gè)特性常被稱為 Hot-Reload ，希望能幫助你更方便的進(jìn)行Weex開(kāi)發(fā)。
5）變化布局?
我們更改tech_list.we的內(nèi)容
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
在命令行中切換工作目錄到剛才存儲(chǔ) tech_list.we 所用目錄并輸入如下命令：
weex tech_list.we- 1
- 1
奇跡出現(xiàn)了，不需要重新部署，只要本地調(diào)整，app頁(yè)面就改變了，更后臺(tái)部署一樣。?
4.其他
之前做了一年基于luajava實(shí)現(xiàn)的跨平臺(tái)，性能跟安全問(wèn)題都解決了，后面看了一樣聚劃算的luaview，跟他們應(yīng)該差不多，我的感受是開(kāi)發(fā)效率是個(gè)問(wèn)題，沒(méi)有可視化布局，不能debug，開(kāi)發(fā)效率低。?
其實(shí)跟weex一樣，如果有特殊性能要求的地方，就使用原生代碼寫(xiě)，然后前端腳本語(yǔ)言調(diào)用，思想都是差不多的。
總結(jié)
- 上一篇： 谷歌研究发现优秀的团队必须具备这五个关键
- 下一篇： 普惠金融