Weex環(huán)境搭建 [iOS]

[TOC]

快速上手

第一步:安裝依賴

首先,你需要 Node.js 和 weex-toolkit。
Node.js 官網(wǎng) 下載可執(zhí)行程序直接安裝即可。
也可以使用 Homebrew 進(jìn)行安裝

$ brew install node

安裝完成后,可以使用以下命令檢測(cè)是否安裝成功

$ node -v
v6.3.1
$ npm -v
3.10.3

通常,安裝了 Node.js 環(huán)境,npm 包管理工具也隨之安裝了。因此,直接使用 npm 來(lái)安裝 weex-toolkit。

npm 是一個(gè)JS包管理工具,它可以讓開(kāi)發(fā)者輕松共享和重用代碼。Weex 很多依賴來(lái)自社區(qū),同樣,Weex 也將很多工具發(fā)布到社區(qū)方便開(kāi)發(fā)者使用。

$ npm install -g weex-toolkit@beta

國(guó)內(nèi)開(kā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è)使用WeexVue的模板項(xiàng)目。

第三步:?jiǎn)?dò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 模式,方便開(kāi)發(fā)
  • serve: 開(kāi)啟靜態(tài)服務(wù)器
  • debug: 調(diào)試模式

==之后我們進(jìn)入項(xiàng)目所在路徑(cd)==,我們先通過(guò)cnpm install 安裝項(xiàng)目依賴。

運(yùn)行 cnpm run devcnpm run serve 開(kāi)啟watch 模式和靜態(tài)服務(wù)器。

然后我們打開(kāi)瀏覽器,進(jìn)入 http://localhost:8080/index.html 即可看到 weex h5 頁(yè)面。

集成 Weex 到已有應(yīng)用

集成 Weex 到已有應(yīng)用(CocoaPods方式比較簡(jiǎn)單,可參考官方文檔)

  1. 下載Weex項(xiàng)目,Weex
  2. 在XCode 中 打開(kāi)weex/ios/sdk目錄下的WeexSDK.xcodeproj,切換target為WeexSDK_MTL
    target
  3. 編譯工程后可以看到weex/ios/sdk/Products目錄下生成了WeexSDK.framework的包
    WeexSDK
  4. 導(dǎo)入SDK到工程,并且導(dǎo)入系統(tǒng)庫(kù),如下圖


    導(dǎo)入系統(tǒng)庫(kù)
  5. 添加SocketRocket依賴中的SRWebSocket.h/m到自己的工程(否則會(huì)編譯失?。?/li>
  6. 添加main.js(在WeexSDK.framework包中)
    添加main.js
  7. 添加-ObjC如下圖(注意大小寫)
    -ObjC
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 2016年4月21日,阿里巴巴在Qcon大會(huì)上宣布開(kāi)源跨平臺(tái)移動(dòng)開(kāi)發(fā)工具Weex,Weex能夠完美兼顧性能與動(dòng)態(tài)性...
    晴天咚咚閱讀 3,002評(píng)論 1 15
  • 背景 Weex是什么?提出這個(gè)問(wèn)題之前我們先看看weex不是什么,根據(jù)文章: 對(duì)無(wú)線電商動(dòng)態(tài)化方案的思考(三) ·...
    弦暮閱讀 2,831評(píng)論 3 11
  • 引子 這篇文章是筆者近期關(guān)于Weex在iOS端的一些研究和實(shí)踐心得,和大家一起分享分享,也算是對(duì)學(xué)習(xí)成果的總結(jié)。文...
    一縷殤流化隱半邊冰霜閱讀 12,425評(píng)論 53 165
  • 安裝nodejs 下載 最新版的 nodejs, 然后點(diǎn)擊下一步安裝。檢查是否安裝成功: 通常,安裝了 Node....
    zhaodsh閱讀 372評(píng)論 0 0
  • 需求描述 在特定的需求下,需要用到 Linux 的圖形化界面,但是 Azure 平臺(tái)提供的虛擬機(jī)默認(rèn)沒(méi)有開(kāi)放遠(yuǎn)程圖...
    ITknight閱讀 258評(píng)論 0 0

友情鏈接更多精彩內(nèi)容