Weex系列一、構建Weex工程


Weex比React Native更簡單,更容易學習,並且做到真正的跨平台,一套代碼可以多個平台運行。所以建議大家都用Weex吧。

一、安裝Node

已經安裝Node的,請忽略過去。

檢查Node是否安裝的命令:

$ node -v

v7.3.0

大家可以看阿里團隊的博文,我這里也說下。

1、要先安裝Node。在Mac我是用Homebrew來安裝的。

安裝命令: brew install node

2、接着我們需要安裝Weex CLI。

終端中執行: sudo npm install -g weex-toolkit  

3、npm 是 Node 的模塊管理器,執行install因為連的是國外的服務器,事件可能會很慢。如果大家運行上面的語句很慢 可以按下面的來做,如果大家已經翻牆,就不用按下面的來了。

3.1、刪除代理設置:

#npm config delete proxy

#npm config delete https-proxy

然后 終端執行:

npm --registry https://registry.npm.taobao.org info underscore 

也可以用下面2種方法:

3.2、終端執行:

npm config set registry https://registry.npm.taobao.org npm info underscore 

如果上面配置正確這個命令會有字符串response

3.3:編輯 ~/.npmrc 加入下面內容,將配置寫死,下次用的時候配置還在registry = https://registry.npm.taobao.org

4、如果安裝中遇到下面的警報,可以忽略,不用管,也可以運行命令來修正。

4.1、安裝的時候報警報:npm warn deprecated lodash@2.4.2: lodash@<3.0.0,

可以執行下面2句命令行即可:

npm uninstall lodash

npm install lodash@latestnpm cache clean

4.2、如果報錯:npm ERR! tar.unpack untar error ,可以執行下面命令:sudo  npm cache clean

 

二、引入SDK

1、我們新建一個項目:WeexDemo。

2、從github下載Weex項目后,然后將ios/sdk 文件夾復制到根目錄,並新建一個Podfile文件,文件內容為:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '7.0'

#inhibit_all_warnings!

def common

pod 'WeexSDK', :path=>'./sdk/'

end

target 'WeexDemo' do

common

end

3、命令行cd到根目錄,然后執行pod install --verbose --no-repo-update

如圖:

 


 

三、寫代碼

我們用最簡單的方式來先把代碼寫出來。

首先我們先做個簡單的Demo。已經放到github上了。大家可以下載看看,我們下面講的就是這個Demo的代碼。

1、新建一個項目,初始化SDK。

在AppDelegate文件里的didFinishLaunchingWithOptions方法里 初始化Weex的SDK。如圖:


初始化Weex的SDK

上圖中,我們先配置了一些信息,也可以不配置。直接 初始化SDK:

[WXSDKEngine initSDKEnvironment];

其中 打印類型 我們設置的為WXLogLevelAll。 該枚舉的全部類型為:


WXLogLevel枚舉

初始化SDK后,需要調用registerModule方法 注冊我們自己寫的WXEventModule。Module可以讓JS主動調用原生iOS代碼。

registerModule我們后面再講,我們可以先把registerModule這句 給注釋掉。先看VC如何加載js 來實現一個頁面的。

2、VC頁面設置。

我們在ViewController頁面 先寫個原生的按鈕,然后 用指定的 URL 渲染 weex 的 view,把該view添加到VC的view上。

self.view上加上一個原生的UIButton。用render方法來初始化JS的頁面。

我們在viewDidLoad里讀取了一個helloWeex.js的文件路徑,下面我們會講 這個js是怎么創建生成的。現在大家就當已經創建好了。

addTestBtn方法是用來創建原生UIButton的。


 

3、加載JS文件顯示頁面

我們先初始化WXSDKInstance,WXSDKInstance可以通過renderWithURL方法根據傳入的js來創建相關的UIView,它有一些回調方法:

onCreate:根視圖rootView創建的時候

onFailed:處理失敗后

renderFinish:視圖渲染完成

componentForRef:通過視圖索引拿到對應的組件視圖


 

我們在onCreate 的block中將WXSDKInstance生成好的UIView add到self.view上。

4、上面代碼運行的效果如下:


四、前端頁面

Sublime 可以設置weex高亮。大家可以點擊去看下。

我們來看下 上面說的js文件 是怎么創建生成的。

我們新建一個helloWeex.we的文件。如圖:


helloWeex.we

1、代碼分析

上文中的template模板中默認建了一個顯示文字為“Hello Weex” 的text。其中class="title",也就是樣式為title。onclick="onClickTitle":也就是 點擊該文本會調用onClickTitle的js方法。

然后下面設置了title的樣式:.title { color: red; }  。所以字體會顯示紅色。

最下面設置了onClickTitle的js方法。所以當你點擊文本的時候 會在控制台打印日志,但是alert方法在iOS中沒有執行,這個我們后面再說。 

2、瀏覽器運行效果

在終端 cd到改文件所在的目錄,然后執行: weex helloWeex.we   。

會自動打開瀏覽器:http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=helloWeex.js&loader=xhr


 

點擊該文本,會提示相關文字:


 

3、生成js文件

然后再終端執行: 

weex helloWeex.we -o helloWeex.js

會生成 js文件,我們把這個js文件拖到項目中。目錄如下:


WeexDemo項目文件

 

4、WeexPlayground掃描

如果你想不想引入到自己項目中,而是想直接在手機上看上面helloWeex.we的效果。可以從AppStore下載WeexPlayground,然后 在終端中輸入: weex helloWeex.we --qr  。

終端會生成一個二維碼(如下圖),然后用WeexPlayground 這個APP掃描這個二維碼 即可。


 
github的地址為:https://github.com/bugaoshuni/WeexDemo.git
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM