Weex 是一套簡單易用的跨平臺開發(fā)方案巩梢，能以 web 的開發(fā)體驗(yàn)構(gòu)建高性能涯曲、可擴(kuò)展的 native 應(yīng)用芽卿，為了做到這些，Weex 與 Vue 合作抑淫，使用 Vue 作為上層框架绷落，并遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API，這樣一來始苇，你甚至可以使用其他框架驅(qū)動 Weex砌烁，打造三端一致的 native 應(yīng)用。
Vue是什么
Vue.js 是 Evan You 開發(fā)的漸進(jìn)式 JavaScript 框架催式，在易用性函喉、靈活性和性能等方面都非常優(yōu)秀。開發(fā)者能夠通過撰寫*.vue文件荣月，基于,,快速構(gòu)建組件化的 web 應(yīng)用管呵。
Hello World
嘗試 Weex 最簡單的方法是使用 Playground App 和在 dotWe 編寫一個 Hello World 例子。你不需要考慮安裝開發(fā)環(huán)境或編寫 native 代碼哺窄，只需要做下面兩件事：
為你的手機(jī)安裝 Playground App捐下，當(dāng)然，Weex 是跨平臺的框架萌业，你依然可以使用瀏覽器進(jìn)行預(yù)覽坷襟，只是這樣你就無法感受到 native 優(yōu)秀的體驗(yàn)了。
在新標(biāo)簽頁中打開 Hello World 例子生年，點(diǎn)擊預(yù)覽啤握，然后用 Playground 掃碼即可。
很簡單晶框，我們可以看到語法就是我們熟悉的 Vue。你可以修改這個例子懂从，再次掃碼嘗試授段。
搭建開發(fā)環(huán)境
第一步：安裝依賴
Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發(fā)和調(diào)試。首先番甩，你需要 Node.js 和 weex-toolkit侵贵。
安裝 Node.js 方式多種多樣，最簡單的方式是在Node.js官網(wǎng) 下載可執(zhí)行程序直接安裝即可缘薛。
對于 Mac窍育，可以使用 Homebrew 進(jìn)行安裝：
brew install node
安裝完成后，使用命令查看
node -v
v6.9.4
npm -v
3.10.10
通常宴胧，安裝了 Node.js 環(huán)境漱抓，npm 包管理工具也隨之安裝了。因此恕齐，直接使用 npm 來安裝 weex-toolkit乞娄。
npm 是一個 JavaScript 包管理工具，它可以讓開發(fā)者輕松共享和重用代碼。Weex 很多依賴來自社區(qū)仪或，同樣确镊，Weex 也將很多工具發(fā)布到社區(qū)方便開發(fā)者使用。
注意: weex-toolkit 目前僅有最新的 beta 版本開始才支持初始化 Vue 項(xiàng)目范删，使用前請確認(rèn)版本是否正確蕾域。
npm install -g weex-toolkit@beta
國內(nèi)開發(fā)者可以考慮使用淘寶的 npm 鏡像 —— [cnpm](https://npm.taobao.org/) 安裝 weex-toolkit
npm install -g cnpm
cnpm install -g weex-toolkit@beta
提示：
如果提示權(quán)限錯誤（permission error），使用sudo關(guān)鍵字進(jìn)行安裝
sudo cnpm install -g weex-toolkit@beta
安裝結(jié)束后你可以直接使用weex命令驗(yàn)證是否安裝成功到旦，它會顯示weex命令行工具各參數(shù)：
Usage: weex foo/bar/we_file_or_dir_path? [options]
Usage: weex debug [options] [we_file|bundles_dir]
Usage: weex init
選項(xiàng)：
--qr? ? ? ? ? display QR code for PlaygroundApp? ? ? ? ? ? ? ? ? ? ? ? [布爾]
--smallqr? ? display small-scale version of QR code for PlaygroundApp,try it
if you use default font in CLI? ? ? ? ? ? ? ? ? ? ? ? ? ? [布爾]
-o, --output? transform weex we file to JS Bundle, output path must specified
(single JS bundle file or dir)
[for create sub cmd]it specified we file output path
[默認(rèn)值: "no JSBundle output"]
--watch? ? ? using with -o , watch input path , auto run transform if change
happen
-s, --server? start a http file server, weex .we file will be transforme to JS
bundle on the server , specify local root path using the option
[字符串]
--port? ? ? ? http listening port number ,default is 8081? ? ? ? [默認(rèn)值: -1]
--wsport? ? ? websocket listening port number ,default is 8082? ? [默認(rèn)值: -1]
--np? ? ? ? ? do not open preview browser automatic? ? ? ? ? ? ? ? ? ? [布爾]
-f, --force? [for create sub cmd]force to replace exsisting file(s)? ? [布爾]
--help? ? ? ? 顯示幫助信息? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [布爾]
-h, --host? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [默認(rèn)值: "127.0.0.1"]
weex debug -h for Weex debug help information.
for cmd example & more information please visit
https://www.npmjs.com/package/weex-toolkit
info [object Object]
初始化
然后初始化 Weex 項(xiàng)目：
weex init itxdl-project
執(zhí)行完命令后旨巷，在itxdl-project目錄中就創(chuàng)建了一個使用Weex和Vue的模板項(xiàng)目
第三步：開發(fā)
之后我們進(jìn)入項(xiàng)目所在路徑，weex-toolkit 已經(jīng)為我們生成了標(biāo)準(zhǔn)項(xiàng)目結(jié)構(gòu)厢绝。
在package.json中契沫，已經(jīng)配置好了幾個常用的 npm script，分別是：
build: 源碼打包昔汉，生成 JS Bundle
dev: webpack watch 模式懈万，方便開發(fā)
serve : 開啟靜態(tài)服務(wù)器
debug : 調(diào)試模式
我們先通過npm install安裝項(xiàng)目依賴。之后運(yùn)行npm run dev和npm run serve開啟watch 模式和靜態(tài)服務(wù)器靶病。
然后我們打開瀏覽器会通，進(jìn)入http://localhost:8080/index.html即可看到 weex h5 頁面。
初始化時已經(jīng)為我們創(chuàng)建了基本的示例娄周，我們可以在src/weex-bootstrap.we中查看涕侈。
代碼如下所示：
關(guān)于 Weex 語法部分，你可以直接參考Vue Guide煤辨，這里不再重復(fù)介紹裳涛。如果您想了解有關(guān)技術(shù)詳情的更多信息，請繼續(xù)閱讀下一節(jié)众辨。并且不要忘記在 dotWe 寫代碼并隨時預(yù)覽端三。
