前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >weex-31-接入iOS完整步骤

weex-31-接入iOS完整步骤

作者头像
酷走天涯
发布2018-09-14 15:21:42
7220
发布2018-09-14 15:21:42
举报
文章被收录于专栏:每日一篇技术文章

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

本节任务 学习如何配置在项目中使用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 文件

代码语言:javascript
复制
#import <Foundation/Foundation.h>
#import <WeexSDK/WeexSDK.h>
@interface WXImgLoaderDefaultImpl :     NSObject<WXImgLoaderProtocol, WXModuleProtocol>
@end

WXImgLoaderDefaultImpl.m文件

代码语言:javascript
复制
#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

代码语言:javascript
复制
#import <WeexSDK/WeexSDK.h>

2.初始化

代码语言:javascript
复制
[WXSDKEngine initSDKEnvironment];
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];// 注册图片下载操作

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

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

引入框架

代码语言:javascript
复制
#import <WeexSDK/WeexSDK.h>

第七步 创建weexSDKInstance 对象

代码语言:javascript
复制
 _instance = [[WXSDKInstance alloc] init];

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

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

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

代码语言:javascript
复制
 _instance.onCreate = ^(UIView *view) {}

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

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

代码语言:javascript
复制
_instance.onCreate = ^(UIView *view) {
    [weakSelf.weexView removeFromSuperview];
    weakSelf.weexView = view;
    [weakSelf.view addSubview:weakSelf.weexView];
}

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

代码语言:javascript
复制
  _instance.renderFinish = ^(UIView *view) {
 [weakSelf.weexView removeFromSuperview];
    weakSelf.weexView = view;
    [weakSelf.view addSubview:weakSelf.weexView];
  };

第十步 开始渲染js文件

代码语言:javascript
复制
- (void)renderWithURL:(NSURL *)url;

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

下面补充一些内容

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

代码语言:javascript
复制
 _instance.onFailed = ^(NSError *error) {}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.06.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档