前面基礎(chǔ)部分內(nèi)容已將講解的差不多了,接下來,我們講解一下原生部分的重點(diǎn)內(nèi)容
本節(jié)任務(wù)
學(xué)習(xí)如何配置在項(xiàng)目中使用WeexSDK
-
第一步 通過在xcode 項(xiàng)目文件中創(chuàng)建一個(gè)Podfile文件,寫入下面的內(nèi)容
# coding: utf-8 source 'https://github.com/CocoaPods/Specs.git' platform :ios, "9.0" use_frameworks! target ‘你項(xiàng)目的名稱’ do pod 'WeexSDK' pod 'SDWebImage’,'~>3.8' end
如果你還有其他第三方庫,請(qǐng)各自進(jìn)行添加
- 第二步 打開命令行工具,cd 進(jìn)入項(xiàng)目文件,使用pod install 命令進(jìn)行安裝依賴庫
安裝好的工程目錄如下
- 第三步 引入安裝好的庫
- 第四步 實(shí)現(xiàn)圖片下載功能
由于WeexSDK 中沒有圖片下載功能,所以需要我們自己定義,其實(shí)也比較簡(jiǎn)單,創(chuàng)建一個(gè)類 實(shí)現(xiàn)兩個(gè)協(xié)議即可
WXImgLoaderDefaultImpl.h 文件
#import <Foundation/Foundation.h>
#import <WeexSDK/WeexSDK.h>
@interface WXImgLoaderDefaultImpl : NSObject<WXImgLoaderProtocol, WXModuleProtocol>
@end
WXImgLoaderDefaultImpl.m文件
#import "WXImgLoaderDefaultImpl.h"
#import <SDWebImage/UIImageView+WebCache.h>
@interface WXImgLoaderDefaultImpl()
@property (strong, nonatomic) dispatch_queue_t ioQueue;
@end
@implementation WXImgLoaderDefaultImpl
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
{
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);
}
}];
}
- 第五步 在AppDelegate.m 文件中初始化weex 相關(guān)配置
1.首先是引用weexSDK
#import <WeexSDK/WeexSDK.h>
2.初始化
[WXSDKEngine initSDKEnvironment];
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];// 注冊(cè)圖片下載操作
以上就是基本的配置內(nèi)容,接下來就是如何加載渲染js文件的內(nèi)容
第六步 創(chuàng)建一個(gè)控制器(WeexViewController)
引入框架
#import <WeexSDK/WeexSDK.h>
第七步 創(chuàng)建weexSDKInstance 對(duì)象
_instance = [[WXSDKInstance alloc] init];
第八步 給weexSDKInstance 對(duì)象設(shè)置一個(gè)視圖控制器,用來渲染視圖內(nèi)容
_instance.viewController = self;
_instance.frame = [UIScreen mainScreen].bounds; // 設(shè)置當(dāng)前布局范圍 這個(gè)很重要一定要設(shè)置 不然渲染的時(shí)候,可能會(huì)出現(xiàn)問題
第九步 當(dāng)WeexSDKInstance創(chuàng)建將節(jié)點(diǎn)都創(chuàng)建完成完成后,觸發(fā)下面的回調(diào)
_instance.onCreate = ^(UIView *view) {}
這個(gè)方法中我們應(yīng)該做下面的事情
1.移除之前渲染的視圖
2.添加回調(diào)參數(shù)的視圖對(duì)象到視圖控制器的根視圖上
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
}
還有一個(gè)回調(diào)方法,這個(gè)方法是當(dāng)所有js文件的內(nèi)容都渲染成原生的視圖后,會(huì)觸發(fā)這個(gè)方法,兩個(gè)方法都能完成渲染的任務(wù),但是觸發(fā)的時(shí)機(jī)不一樣!
_instance.renderFinish = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
};
第十步 開始渲染js文件
- (void)renderWithURL:(NSURL *)url;
注意,這個(gè)url可以是本地的url地址或者服務(wù)的url地址
下面補(bǔ)充一些內(nèi)容
渲染失敗會(huì)觸發(fā)下面的方法
_instance.onFailed = ^(NSError *error) {}
