[TOC]
快速上手
第一步:安裝依賴
首先,你需要 Node.js 和 weex-toolkit。
到Node.js 官網(wǎng) 下載可執(zhí)行程序直接安裝即可。
也可以使用 Homebrew 進(jìn)行安裝
$ brew install node
安裝完成后,可以使用以下命令檢測是否安裝成功
$ node -v
v6.3.1
$ npm -v
3.10.3
通常,安裝了 Node.js 環(huán)境,npm 包管理工具也隨之安裝了。因此,直接使用 npm 來安裝 weex-toolkit。
npm 是一個(gè)JS包管理工具,它可以讓開發(fā)者輕松共享和重用代碼。Weex 很多依賴來自社區(qū),同樣,Weex 也將很多工具發(fā)布到社區(qū)方便開發(fā)者使用。
$ npm install -g weex-toolkit@beta
國內(nèi)開發(fā)者可以考慮使用淘寶的 npm 鏡像 —— cnpm 安裝 weex-toolkit
$ npm install -g cnpm
$ cnpm install -g weex-toolkit@beta
安裝結(jié)束后你可以直接使用 weex
命令驗(yàn)證是否安裝成功
提示:如果提示權(quán)限錯(cuò)誤(permission error),使用 sudo 關(guān)鍵字進(jìn)行安裝
第二步:初始化
然后初始化 Weex 項(xiàng)目:
$ weex init awesome-project
執(zhí)行完命令后,在 awesome-project 目錄中就創(chuàng)建了一個(gè)使用Weex
和Vue
的模板項(xiàng)目。
第三步:啟動服務(wù)
weex-toolkit 已經(jīng)為我們生成了標(biāo)準(zhǔn)項(xiàng)目結(jié)構(gòu)。
在 package.json 中,已經(jīng)配置好了幾個(gè)常用的 npm script,分別是:
- build: 源碼打包,生成 JS Bundle
- dev: webpack watch 模式,方便開發(fā)
- serve: 開啟靜態(tài)服務(wù)器
- debug: 調(diào)試模式
==之后我們進(jìn)入項(xiàng)目所在路徑(cd)==,我們先通過cnpm install
安裝項(xiàng)目依賴。
運(yùn)行 cnpm run dev
和 cnpm run serve
開啟watch 模式和靜態(tài)服務(wù)器。
然后我們打開瀏覽器,進(jìn)入 http://localhost:8080/index.html 即可看到 weex h5 頁面。
集成 Weex 到已有應(yīng)用
集成 Weex 到已有應(yīng)用(CocoaPods方式比較簡單,可參考官方文檔)
- 下載Weex項(xiàng)目,Weex
- 在XCode 中 打開
weex/ios/sdk
目錄下的WeexSDK.xcodeproj
,切換target為WeexSDK_MTL
target - 編譯工程后可以看到
weex/ios/sdk/Products
目錄下生成了WeexSDK.framework
的包
WeexSDK -
導(dǎo)入SDK到工程,并且導(dǎo)入系統(tǒng)庫,如下圖
導(dǎo)入系統(tǒng)庫 - 添加SocketRocket依賴中的
SRWebSocket.h/m
到自己的工程(否則會編譯失敗) - 添加
main.js
(在WeexSDK.framework包中)
添加main.js - 添加
-ObjC
如下圖(注意大小寫)
-ObjC