iOS 集成Weex入門教程
前言
自Weex發(fā)布伊始, 其口號 "Write Once, Run Everywhere"就吸引了大批前端與客戶端程序猿紛紛入坑, 我也不能獨善其中. 就我目前所學習Weex的經(jīng)驗在此記錄一下, 由于我是一名剛?cè)胄胁痪胕OS開發(fā)者, 所以這篇博客含金量不高, 下面就簡單闡述下如何將Weex初步集成到iOS.
Weex簡介
2016年4月21日缘滥，北京 - 阿里巴巴今天在Qcon大會上宣布跨平臺移動開發(fā)工具Weex開放內(nèi)測邀請。Weex能夠完美兼顧性能與動態(tài)性，讓移動開發(fā)者通過簡捷的前端語法寫出Native級別的性能體驗缀去，并支持iOS臭杰、安卓、YunOS及Web等多端部署。
對于移動開發(fā)者來說涧郊，Weex主要解決了頻繁發(fā)版和多端研發(fā)兩大痛點预愤，同時解決了前端語言性能差和顯示效果受限的問題沟于。開發(fā)者可通過Weex官網(wǎng)申請內(nèi)測。開發(fā)者只需要在自己的APP中嵌入Weex的SDK植康，就可以通過撰寫HTML/CSS/JavaScript來開發(fā)Native級別的Weex界面旷太。Weex界面的生成碼其實就是一段很小的JS，可以像發(fā)布網(wǎng)頁一樣輕松部署在服務端销睁，然后在APP中請求執(zhí)行供璧。
Weex官網(wǎng):https://weex-project.io/cn/.
iOS 客戶端集成Weex
集成步驟一: 搭建開發(fā)環(huán)境
首先得有iOS開發(fā)環(huán)境: MacOS, 安裝有Xcode.
需要安裝node.js(6.0+), 直接到node.js 官網(wǎng)下載即可, 更過安裝方式 參考: node.js 官方信息.
點擊.dmg安裝包安裝完成后 在terminal輸入:
通常，安裝了 Node.js 環(huán)境冻记，npm 包管理工具也隨之安裝了睡毒。npm 是一個 JavaScript 包管理工具，它可以讓開發(fā)者輕松共享和重用代碼冗栗。Weex 很多依賴來自社區(qū)演顾，同樣，Weex 也將很多工具發(fā)布到社區(qū)方便開發(fā)者使用隅居。
集成步驟二:安裝cocoaPods
注: cocoaPods安裝钠至，如果您此前已安裝，請?zhí)^此步驟胎源。
安裝cocoaPods前需要安裝ruby環(huán)境, 請參考:http://www.cnblogs.com/foxting/p/4520829.html
1. 移除現(xiàn)有的Ruby默認源
1 gem sources --remove https://rubygems.org/
2. 使用新源
2 gem sources -a https://ruby.taobao.org/
3. 驗證新源替換是否成功
3 gem sources -l
4. 安裝cocoaPods
4 sudo gem install cocoapods
安裝完成后:
由于我已經(jīng)安裝過了cocoaPods, 所以再次安裝提示的內(nèi)容非常少, 關(guān)于詳細的安裝cocoaPods 教程請參考: http://blog.csdn.net/aaron0619/article/details/51861127
至此, cocoaPods已安裝成功!
集成步驟三: 創(chuàng)建Podfile
由于做個簡單的iOS 集成 Weex的demo示范, 所以這里我們新建一個項目, 來添加Podfile.
1. 創(chuàng)建新的項目, 并在terminal中進入該項目文件夾, 并創(chuàng)建Podfile:
此時Podfile已經(jīng)創(chuàng)建成功.
2. 編輯Podfile, 輸入 vim Podfile, 并打開的文件中按 "I"鍵進入編輯狀態(tài), 接著輸入:
實際操作時, 請將 下面target中的名字改成與項目名字一致.
輸入完成之后按Esc然后：wq 保存退出.
注: 最好手動輸入, 避免出錯.
1 source 'git@github.com:CocoaPods/Specs.git'
2 source 'https://github.com/cocoaPods/specs.git'
3
4 target 'WeexDemo' do
5 platform:ios,'7.0'
6 pod 'WeexSDK'
7 pod 'SocketRocket'
8 pod 'SDWebImage'
9 pod 'WXDevtool',:configuration => ['Debug']
10 end
最新的weexSDK 不用拷貝weexSDK 到項目目錄中, WeexSDK 后面不指定版本即表示下載最新的版本.
3. 在terminal中 項目根目錄下執(zhí)行 pod install 命令.
Podfile 就自動添加好了依賴, 并生在項目目錄中成一個WeexIntegrationDemo.xcworkspace, 打開它.
4\. 導入系統(tǒng)庫的庫:
5. 添加 -ObjC 如下圖(注意大小寫)
至此 集成的前期工作已全部完成.
iOS native 環(huán)境初始化
weex運行環(huán)境的初始化棕洋，主要包括以下幾個方面：應用配置（應用名、版本號乒融、UA等）掰盘；注冊自定義的Module和Component；注冊SDK已有協(xié)議的實現(xiàn)類赞季。所有初始化的步驟在AppDelegate中完成愧捕。
1. 添加頭文件
#import "AppDelegate.h"
#import "ViewController.h"
#import <WeexSDK/WXSDKEngine.h>
#import <WeexSDK/WXLog.h>
#import <WeexSDK/WXDebugTool.h>
#import <WeexSDK/WXAppConfiguration.h>
#import "WXImgLoaderDefaultImpl.h"
幾個頭文件的介紹:
WXSDKEngine：SDK開放的絕大多數(shù)接口都在此有聲明。
WXLog: 控制Log輸出的級別申钩，包括Verbose次绘、Debug、Info、Warning邮偎、Error管跺，開發(fā)者可以按需來設(shè)置輸出級別。
WXDebugTool: weex提供的對外調(diào)試工具禾进。
WXAppConfiguration: 使用weex開發(fā)的業(yè)務性配置豁跑。
- (void)initWeexSDK {
//業(yè)務配置，非必需
[WXAppConfiguration setAppGroup:@"AliApp"];
[WXAppConfiguration setAppName:@"WeexIntegrationDemo"];
[WXAppConfiguration setAppVersion:@"1.0.0"];
//初始化SDK環(huán)境
[WXSDKEngine initSDKEnvironment];
//注冊自定義module和component泻云，非必需
/*
[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
*/
//注冊協(xié)議的實現(xiàn)類艇拍，非必需
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
//設(shè)置Log輸出等級：調(diào)試環(huán)境默認為Debug，正式發(fā)布會自動關(guān)閉宠纯。
[WXLog setLogLevel:WXLogLevelAll];
// 開啟debug模式
// [WXDebugTool setDebug:YES];
}
在appdelegate.m的didFinishLaunchingWithOptions回調(diào)中執(zhí)行:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
[self initWeexSDK];
UINavigationController *nac = [[UINavigationController alloc] initWithRootViewController:[ViewController new]];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.window setRootViewController:nac];
[self.window makeKeyAndVisible];
return YES;
}
上面導入頭文件是可以看到有導入 "WXImgLoaderDefaultImpl.h" 這個頭文件, 這是因為weex本身沒有網(wǎng)絡(luò)下載的能力, 所以需要我們自己寫個協(xié)議去實現(xiàn)網(wǎng)絡(luò)下載.
自定義一個類叫: WXImgLoaderDefaultImpl, 要遵循二個協(xié)議: WXImgLoaderProtocol, WXModuleProtocol
#import <Foundation/Foundation.h>
#import "WXImgLoaderProtocol.h"
@interface WXImgLoaderDefaultImpl : NSObject<WXImgLoaderProtocol, WXModuleProtocol>
@end
實現(xiàn):
#import "WXImgLoaderDefaultImpl.h"
#import <SDWebImage/UIImageView+WebCache.h>
@interface WXImgLoaderDefaultImpl()
@end
@implementation WXImgLoaderDefaultImpl
#pragma mark WXImgLoaderProtocol
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
{
if ([url hasPrefix:@"http://"]) {
url = [@"http:" stringByAppendingString:url];
}
return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
} completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
if (completedBlock) {
completedBlock(image, error, finished);
}
}];
}
這樣, weex就具有網(wǎng)絡(luò)下載圖片的能力了.
經(jīng)過以上簡單的配置卸夕，WeexSDK的環(huán)境初始化已完成，下面就進入Weex動態(tài)化頁面渲染環(huán)節(jié)婆瓜。
Weex動態(tài)化頁面渲染
weex支持全頁面以及頁面局部兩種不同的渲染模式快集。在iOS中使用方法很簡單，只需要將weex渲染所得的view添加到父容器中即可廉白。下面會介紹如何在iOS最常用的容器viewController中渲染weex頁面碍讨。
1.在要使用Weex渲染的viewController中包含頭文件
現(xiàn)在來介紹下WXSDKInstance究竟是什么，如何來使用它蒙秒。
WXSDKInstance勃黍，簡單來說，就是weex渲染的實例對象晕讲。它提供給開發(fā)者諸多跟頁面渲染相關(guān)的接口覆获，包括renderWithURL、refreshInstance以及destroyInstance等瓢省，提供了幾個比較重要的回調(diào)接口弄息，方便開發(fā)者根據(jù)不同的業(yè)務場景去處理他們的邏輯，如onfailed勤婚，還提供了性能監(jiān)控相關(guān)的接口摹量。
2. 頁面渲染
#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>
@interface ViewController ()
//WXSDKInstance 屬性
@property(nonatomic, strong) WXSDKInstance *instance;
// weex 視圖
@property(nonatomic, strong)UIView *weexView;
// URL屬性(用于指定加載js的URL, 一般申明在接口中)
@property (nonatomic, strong) NSURL *url;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"Hello Weex";
self.instance = [[WXSDKInstance alloc] init];
// 設(shè)置weexInstance所在的控制器
self.instance.viewController = self;
// 設(shè)置weexInstance的frame
self.instance.frame = self.view.frame;
// 設(shè)置weexInstance用于渲染JS的url路徑
[self.instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
// 為避免循環(huán)引用 聲明一個弱指針 self
__weak typeof(self) weakSelf = self;
// 設(shè)置weexInstance創(chuàng)建完的回調(diào)
self.instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
weakSelf.weexView.backgroundColor = [UIColor whiteColor];
[weakSelf.view addSubview:weakSelf.weexView];
};
// 設(shè)置weexInstance出錯時的回調(diào)
self.instance.onFailed = ^( NSError *error) {
NSLog(@"處理失敗%@", error);
};
// 設(shè)置weexInstance渲染完成時的回調(diào)
self.instance.renderFinish = ^(UIView *view) {
NSLog(@"渲染完成");
};
}
- (void)dealloc {
[_instance destroyInstance];
}
#pragma mark - 懶加載
- (NSURL *)url {
if (!_url) {
_url = [NSURL URLWithString:@"http://ygz001.oicp.net/app.weex.js"];
}
return _url;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
以上是通過weex實例來渲染頁面的簡單例子。其中有幾點需要著重說明下：
instance.viewController: 一般情況下馒胆，iOS的運行環(huán)境都是基于不同viewController的缨称，很多底層操作需要知曉當前所處的viewController對象，因此需要向instance知會當前的viewController祝迂。
instance.frame: 根據(jù)weex對instance的設(shè)計規(guī)范睦尽，需要渲染中知道最外層body的位置和尺寸。這個frame值的設(shè)置型雳，跟最終在回調(diào)中獲取的view.frame一致当凡。
當然山害，在很多場景下，僅需要在一個native頁面的局部渲染weex區(qū)塊沿量。很簡單浪慌，您只需要將instance.frame設(shè)置為目標區(qū)塊的位置尺寸即可。
renderWithURL：常用的渲染方式：其一朴则，直接輸入URL（可以是file://或 http(s)://）权纤；其二，sourceCode佛掖，即JavaScript源碼妖碉。options參數(shù)涌庭，表示開發(fā)者可以通過WeexSDK向前端透傳的參數(shù)芥被，如bundleURL。data參數(shù)坐榆，表示向weex的模板注入的頁面數(shù)據(jù)拴魄，它一般來源于native的數(shù)據(jù)請求，當然也可以在前端邏輯中完成請求后將數(shù)據(jù)注入席镀。
url參數(shù): 是從weex 編譯運行后出來的app.js或app.weex.js 文件, 可以放在遠程服務器上, 也可以直接拖進項目工程里.
_instance.onCreate：weex頁面最外層body渲染完成后的回調(diào)匹中。在此回調(diào)中，weex渲染所得的rootView已確定豪诲，可以輸出并添加到父容器中顶捷。
_instance.renderFinish：和onCreate不同，renderFinish表示所有weex的頁面元素都已渲染完畢屎篱，整個渲染過程至此結(jié)束服赎。
其他跟instance緊密相關(guān)的接口，請參見WXSDKInstance.h的詳細說明交播。
3. 頁面銷毀
切記在viewController的銷毀的同時重虑，將weex實例一并銷毀，否則會出現(xiàn)內(nèi)存泄露秦士。
- (void)dealloc {
[_instance destroyInstance];
}
其他
日后還會更新一些集成過程中一些采坑文檔包括Weex的內(nèi)部實現(xiàn),敬請期待新文檔缺厉，記得關(guān)注哦！
