1. 前言

Weex能夠完美兼顧性能與動態性，讓移動開發者通過簡捷的前端語法寫出Native級別的性能體驗，并支持iOS、安卓、YunOS及Web等多端部署。 外文名

Weex

內測時間

2016年4月21日

特????點

支持iOS、安卓、YunOS等部署

用????途

APP客戶端等

目錄

1?產品服務

2?發展經歷

產品服務

編輯 對于移動開發者來說，Weex主要解決了頻繁發版和多端研發兩大痛點，同時解決了前端語言性能差和顯示效果受限的問題。開發者可通過Weex官網申請內測。 開發者只需要在自己的APP中嵌入Weex的SDK，就可以通過撰寫HTML/CSS/JavaScript來開發Native級別的Weex界面。Weex界面的生成碼其實就是一段很小的JS，可以像發布網頁一樣輕松部署在服務端，然后在APP中請求執行。

Weex能夠完美兼顧性能與動態性，讓移動開發者通過簡捷的前端語法寫出Native級別的性能體驗，并支持iOS、安卓、YunOS及Web等多端部署。?
對于移動開發者來說，Weex主要解決了頻繁發版和多端研發兩大痛點，同時解決了前端語言性能差和顯示效果受限的問題。開發者可通過Weex官網申請內測。?
開發者只需要在自己的APP中嵌入Weex的SDK，就可以通過撰寫HTML/CSS/JavaScript來開發Native級別的Weex界面。Weex界面的生成碼其實就是一段很小的JS，可以像發布網頁一樣輕松部署在服務端，然后在APP中請求執行。

2.環境搭建

1）因為Weex工具鏈使用Node.js構建，在進行后續步驟前，你需要先安裝 Node.js。?
第一步：下載安裝文件?
下載地址：官網http://www.nodejs.org/download/?
這里用的版本是（node-v6.2.0-x64.msi）?
第二步：下載完成之后，雙擊 node-v6.2.0-x64.msi，開始安裝nodejs，默認是安裝在C:\Program Files\nodejs下面，一路next完成安裝。?
第三步：安裝npm相關環境。?
在命令行中切換到nodejs目錄?
?
鍵入命令：npm install express 回車等待安裝express……..?
鍵入命令：npm install jade 回車等待安裝jade…….?
鍵入命令：npm install?MySQL回車等待安裝mysql……..?

2)在Node.js安裝成功后,你可以執行下面的命令來安裝Weex命令行程序

npm install -g weex-toolkit

• 1

• 1

如圖所示：?
?
在安裝結束后，你能通過在命令行窗口執行 weex 命令來檢查工具是否安裝正確。僅僅輸入weex并敲擊回車后，你應該看到如下內容顯示：?
?
(請使用 weex –version 命令檢查你的weex-toolkit版本是否大于 0.1.0）?
至此，環境已經全部安裝完畢。

3.weex快速體驗

1）我們先編寫一個列表項，命名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）在命令行中切換工作目錄到剛才存儲 tech_list.we 所用目錄并輸入如下命令：

weex tech_list.we

• 1

• 1

如圖所示：?
?
成功后，你系統默認瀏覽器的窗口將自動打開以顯示如下內容。?

3）現在，讓我們來嘗試使用Weex Native渲染器來渲染這個文件。打開終端，切換到保存tech_list.we文件的目錄，執行：

weex tech_list.we --qr -h {ip or hostname}

• 1

• 1

如圖所示：?
?
此二維碼用來后面掃描。

4）安裝官方demo：playground.apk?
下載apk文件，Weex Playground?
下載安裝后點擊App中的掃碼圖標，然后用你的手機攝像頭掃描終端中的二維碼。一個漂亮的列表將出現在你的手機中。?

這里我需要強調，這個列表是完全由native view(不是Webkit)來進行渲染的，相比Webkit渲染的界面，你的App能獲得更快的頁面加載速度和更少的內存開銷。

現在你能嘗試變更一些 tech_list.we中的內容，在保存變更內容之后， Weex Playground 將會立即在界面上反映出這些變化，這個特性常被稱為 Hot-Reload ，希望能幫助你更方便的進行Weex開發。

5）變化布局?
我們更改tech_list.we的內容

<template><div class="container" ><div class="cell"><image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">helloWorld</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

在命令行中切換工作目錄到剛才存儲 tech_list.we 所用目錄并輸入如下命令：

weex tech_list.we

• 1

• 1

奇跡出現了，不需要重新部署，只要本地調整，app頁面就改變了，更后臺部署一樣。?

4.其他

之前做了一年基于luajava實現的跨平臺，性能跟安全問題都解決了，后面看了一樣聚劃算的luaview，跟他們應該差不多，我的感受是開發效率是個問題，沒有可視化布局，不能debug，開發效率低。?
其實跟weex一樣，如果有特殊性能要求的地方，就使用原生代碼寫，然后前端腳本語言調用，思想都是差不多的。

總結

以上是生活随笔為你收集整理的weex环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。