专栏首页每日一篇技术文章weex-31-接入iOS完整步骤

weex-31-接入iOS完整步骤

前面基础部分内容已将讲解的差不多了,接下来,我们讲解一下原生部分的重点内容

本节任务 学习如何配置在项目中使用WeexSDK

  • 第一步 通过在xcode 项目文件中创建一个Podfile文件,写入下面的内容 # coding: utf-8 source 'https://github.com/CocoaPods/Specs.git' platform :ios, "9.0" use_frameworks! target ‘你项目的名称’ do pod 'WeexSDK' pod 'SDWebImage’,'~>3.8' end

如果你还有其他第三方库,请各自进行添加

  • 第二步 打开命令行工具,cd 进入项目文件,使用pod install 命令进行安装依赖库

63554DF0-CDE8-4EDA-A860-0283B72210C2.png

安装好的工程目录如下

E5A599B2-7371-48B6-91FA-7708EB001F0D.png

  • 第三步 引入安装好的库

7BD45B24-0D03-4CF3-A4A1-08E20A2EE85A.png

24B3B157-6FC5-4B36-9AAD-86DE2293A9F5.png

  • 第四步 实现图片下载功能

由于WeexSDK 中没有图片下载功能,所以需要我们自己定义,其实也比较简单,创建一个类 实现两个协议即可

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 相关配置

1.首先是引用weexSDK

#import <WeexSDK/WeexSDK.h>

2.初始化

[WXSDKEngine initSDKEnvironment];
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];// 注册图片下载操作

以上就是基本的配置内容,接下来就是如何加载渲染js文件的内容

第六步 创建一个控制器(WeexViewController)

引入框架

#import <WeexSDK/WeexSDK.h>

第七步 创建weexSDKInstance 对象

 _instance = [[WXSDKInstance alloc] init];

第八步 给weexSDKInstance 对象设置一个视图控制器,用来渲染视图内容

_instance.viewController = self;
_instance.frame = [UIScreen mainScreen].bounds; // 设置当前布局范围 这个很重要一定要设置 不然渲染的时候,可能会出现问题

第九步 当WeexSDKInstance创建将节点都创建完成完成后,触发下面的回调

 _instance.onCreate = ^(UIView *view) {}

这个方法中我们应该做下面的事情

1.移除之前渲染的视图 2.添加回调参数的视图对象到视图控制器的根视图上

_instance.onCreate = ^(UIView *view) {
    [weakSelf.weexView removeFromSuperview];
    weakSelf.weexView = view;
    [weakSelf.view addSubview:weakSelf.weexView];
}

还有一个回调方法,这个方法是当所有js文件的内容都渲染成原生的视图后,会触发这个方法,两个方法都能完成渲染的任务,但是触发的时机不一样!

  _instance.renderFinish = ^(UIView *view) {
 [weakSelf.weexView removeFromSuperview];
    weakSelf.weexView = view;
    [weakSelf.view addSubview:weakSelf.weexView];
  };

第十步 开始渲染js文件

- (void)renderWithURL:(NSURL *)url;

注意,这个url可以是本地的url地址或者服务的url地址

下面补充一些内容

渲染失败会触发下面的方法

 _instance.onFailed = ^(NSError *error) {}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OpenGLES_入门01_创建第一个工程

    今天就带这个大家把OpenGL 用原始的方法创建一下,之后我们会使用苹果给我封装的类做,简化操作!

    酷走天涯
  • Swift3.0 - 枚举

    酷走天涯
  • Swift3.0 - 断言

    酷走天涯
  • 分享鼠标悬停按钮样式表

    Qt君
  • preempt_count

    在支持可抢占的系统中,一个进程的therad_info信息定义如上。其中preempt_count代表的是该进程是否可以被抢占,根据注释的说明当peermpt...

    DragonKingZhu
  • 梳理Java知识,解析开源项目

    java思维导图
  • Oracle诊断案例-Sql_trace之二

    http://www.eygle.com/case/sql_trace_2.htm

    数据和云01
  • “2018 Unreal Open Day 虚幻引擎技术开放日”活动开启预售

    VRPinea
  • 运维日,说说曾经犯过的错误

    当我意识到7月24日是个节日的时候,其实就间接印证了是个劳碌命。难得的日子,参加了张甦同学的直播邀请,聊了一个小时,还不过瘾。就说点对自己曾经犯过的一些错误...

    jeanron100
  • 搞懂分布式技术17:浅析分布式事务

    本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看

    Java技术江湖

扫码关注云+社区

领取腾讯云代金券