iOS 集成Weex入门教程

前言  

  自Weex公布起首, 其口号 “Write Once, Run
伊夫rywhere”就抓住了许多数多前端与客户端程序猿纷繁入坑, 笔者也无法独善当中.
就本身日前所学习Weex的阅历在此记录一下, 由于自家是一名刚出道不久iOS开辟者,
所以这篇博客含金量不高, 下边就大约演说下什么样将Weex起先集成到iOS.

Weex简介

  201六年3月215日,日本东京 – Alibaba今日在Qcon大会上揭发跨平台活动开辟工具Weex开放内部测试邀约。Weex能够完美兼顾品质与动态性,让活动开荒者通过简捷的前端语法写出Native品级的习性体验,并帮助iOS、安卓、YunOS及Web等多端铺排。   

  对于活动开采者来讲,Weex主要化解了累累发版和多端研究开发两大痛点,同时化解了前者语言品质差和出示效果受限的难题。开垦者可通过Weex官方网址申请公开测试。开采者只需求在投机的APP中放到Weex的SDK,就足以透过创作HTML/CSS/JavaScript来支付Native等级的Weex分界面。Weex分界面包车型地铁生成码其实正是1段异常的小的JS,能够像发布网页同样轻便计划在服务端,然后在应用程式中呼吁实施。

 

  Weex官网:https://weex-project.io/cn/.

 

iOS 客户端集成Weex

 

合并步骤一: 搭建开采条件

  首先得有iOS开荒条件: MacOS, 安装有Xcode.

  供给安装node.js(陆.0+), 直接到node.js
官网
下载就能够, 更过安装方式 参考: node.js
官方消息
.

    点击.dmg安装包安装达成后 在terminal输入: 

 

  图片 1

   常常,安装了 Node.js 环境,npm 包管理工科具也随即安装了。npm 是二个JavaScript 包管理工科具,它能够让开辟者轻便共享和重用代码。Weex
大多依赖来自社区,一样,Weex 也将洋洋工具公布到社区方便人民群众开采者使用。

 

合龙步骤二:安装cocoaPods

  注: cocoaPods安装,假设您在此从前已设置,请跳过此步骤。

  安装cocoaPods前须要安装ruby环境,
请参考:http://www.cnblogs.com/foxting/p/4520829.html

  一. 移除现成的Ruby默许源
   1
gem sources –remove https://rubygems.org/ 

  二. 使用新源

   2 gem sources -a https://ruby.taobao.org/ 

  三. 验证新源替换是不是中标

      3 gem sources -l 

  4. 安装cocoaPods

    4 sudo gem install cocoapods 

 

  安装到位后:

  图片 2

  

  由于自己早已设置过了cocoaPods, 所以再度安装指示的始末分外少,
关于详细的安装cocoaPods
教程请参考: http://blog.csdn.net/aaron0619/article/details/51861127

 

  至此, cocoaPods已安装成功!

 

购并步骤叁: 创设Podfile

  由于做个简单的iOS 集成 Weex的demo示范, 所以那里大家新建三个类型,
来增添Podfile.

 

  一. 创建新的项目, 并在terminal中跻身该类型文件夹, 并创设Podfile:

  图片 3

  此时Podfile已经创办成功.

  

  二. 编辑Podfile, 输入 vim Podfile, 并展开的文本中按
“I”键进入编辑状态, 接着输入:

  图片 4

 

  实操时, 请将 上面target中的名字改成与品类名字一致.

 

  图片 5

 

  输入完成以后按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
后边不内定版本即意味着下载最新的版本.

  三. 在terminal中 项目根目录下施行 pod install 命令.

    图片 6

  Podfile 就自行增多好了借助,
并生在类型目录中成3个WeexIntegration德姆o.xcworkspace, 张开它.

    4. 导入系统库的库:

  图片 7

  5. 添加 -ObjC 如下图(注意分寸写)

  图片 8

  至此 集成的前期工作已总体完结.

 

iOS native 环境开始化

  weex运营条件的先河化,重要包括以下多少个方面:应用配置(应用名、版本号、UA等);注册自定义的Module和Component;注册SDK已有商榷的兑现类。全数早先化的步调在AppDelegate中产生。

  一. 增添头文件

#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开放的大部接口都在此有注明。

    WXLog:
控制Log输出的等第,包含Verbose、Debug、Info、Warning、Error,开荒者能够按需来设置输出等第。

    WXDebugTool: weex提供的对向外调拨运输试工具。

    WXAppConfiguration: 使用weex开荒的营业性配置。

  • (void)initWeexSDK
    {

    //业务布局,非必需

    [WXAppConfiguration setAppGroup:@”AliApp”];

    [WXAppConfiguration setAppName:@”WeexIntegrationDemo”];

    [WXAppConfiguration setAppVersion:@”1.0.0″];

    

    //初始化SDK环境

    [WXSDKEngine
initSDKEnvironment];

    

    //注册自定义module和component,非必需

    /*

    [WXSDKEngine registerComponent:@”MyView”
withClass:[MyViewComponent class]];

    [WXSDKEngine registerModule:@”event”
withClass:[WXEventModule class]];

    */

    //注册协议的落到实处类,非必需

    [WXSDKEngine
registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];

    

    //设置Log输出等第:调节和测试环境默感觉Debug,正式发表会活动关闭。

    [WXLog setLogLevel:WXLogLevelAll];

    

    // 开启debug模式

    // [WXDebugTool
setDebug:YES];

}

  在appdelegate.m的didFinishLaunchingWithOptions回调中施行:

  • (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自个儿未有网络下载的技术,
所以需求大家团结写个钻探去落到实处互联网下载.

  自定义三个类叫: WXImgLoaderDefaultImpl, 要服从2个商讨:  WXImgLoaderProtocol, WXModuleProtocol 

#import <Foundation/Foundation.h>

#import “WXImgLoaderProtocol.h”

 

@interface WXImgLoaderDefaultImpl :
NSObject<WXImgLoaderProtocol, WXModuleProtocol>

@end

  实现:

#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:@”//”]) {

        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就具备互联网下载图片的力量了.

  经过上述轻松的配置,WeexSDK的条件先河化已产生,上面就进来Weex动态化页面渲染环节。

Weex动态化页面渲染

  weex协助全页面以及页面局地二种差异的渲染格局。在iOS中动用办法很简短,只须要将weex渲染所得的view增加到父容器中就可以。下边会介绍如何在iOS最常用的容器viewController中渲染weex页面。

     一.在要采取Weex渲染的viewController中涵盖头文件

  未来来介绍下WXSDKInstance究竟是如何,怎样来接纳它。

  WXSDKInstance,简单的话,正是weex渲染的实例对象。它提须要开采者多数跟页面渲染相关的接口,包含renderWithUCRUISERL、refreshInstance以及destroyInstance等,提供了多少个比较关键的回调接口,方便开垦者依照分化的政工场景去处理他们的逻辑,如onfailed,还提供了质量监察和控制相关的接口。

  二. 页面渲染

#import “ViewController.h”

#import <WeexSDK/WXSDKInstance.h>

 

@interface ViewController
()

//WXSDKInstance 属性

@property(nonatomic, strong) WXSDKInstance
*instance;

// weex 视图

@property(nonatomic, strong)UIView
*weexView;

// U大切诺基L属性(用于钦定加载js的U兰德EnclaveL, 一般注脚在接口中)

@property (nonatomic, strong) NSURL
*url;

@end

@implementation
ViewController

  • (void)viewDidLoad
    {

    [super viewDidLoad];

    self.title = @”Hello Weex”;

    self.instance = [[WXSDKInstance alloc] init];

    // 设置weexInstance所在的调节器

    self.instance.viewController = self;

    // 设置weexInstance的frame

    self.instance.frame = self.view.frame;

    // 设置weexInstance用于渲染JS的url路线

    [self.instance renderWithURL:self.url options:@{@”bundleUrl”:[self.url
absoluteString]} data:nil];

    // 为制止循环引用 声爱他美(Aptamil)个弱指针
self

    __weak typeof(self) weakSelf = self;

    // 设置weexInstance创制完的回调

    self.instance.onCreate = ^(UIView *view)
{

        [weakSelf.weexView removeFromSuperview];

        weakSelf.weexView = view;

        weakSelf.weexView.backgroundColor = [UIColor whiteColor];

        [weakSelf.view addSubview:weakSelf.weexView];

    };

    // 设置weexInstance出错时的回调

    self.instance.onFailed = ^( NSError *error)
{

        NSLog(@”处理退步%@”, error);

    };

    // 设置weexInstance渲染完成时的回调

    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:
1般景观下,iOS的运行条件都是依照不一致viewController的,繁多底层操作供给懂妥当前所处的viewController对象,由此须要向instance知会当前的viewController。

  instance.frame:
依照weex对instance的设计规范,供给渲染中级知识分子情最外层body的岗位和尺寸。那几个frame值的装置,跟最终在回调中获得的view.frame1致。

  当然,在诸多现象下,仅要求在3个native页面包车型客车1部分渲染weex区块。一点也不细略,您只要求将instance.frame设置为目的区块的职责尺寸就能够。

  renderWithUHummerH二L:常用的渲染格局:其一,直接输入U库罗德L(能够是file://或
http(s)://);其二,sourceCode,即JavaScript源码。options参数,表示开垦者能够经过WeexSDK向前端透传的参数,如bundleU奇骏L。data参数,表示向weex的模板注入的页面数据,它一般来自native的数目请求,当然也足以在前者逻辑中做到请求后将数据注入。

  url参数: 是从weex 编写翻译运营后出来的app.js或app.weex.js 文件,
可以放在远程服务器上, 也足以直接拖进项目工程里.

  _instance.onCreate:weex页面最外层body渲染达成后的回调。在此回调中,weex渲染所得的rootView已规定,可以输出并增多到父容器中。

  _instance.renderFinish:和onCreate分裂,renderFinish表示具备weex的页面成分都已渲染完结,整个渲染进度至此截止。

  其余跟instance紧密有关的接口,请参见WXSDKInstance.h的详实表明。

  

  叁. 页面销毁

  切记在viewController的绝迹的同时,将weex实例一并销毁,不然会并发内部存储器走漏。

  

  • (void)dealloc
    {

    [_instance destroyInstance];

}

 

其他

在页面渲染那么些局部,本文已向您详细介绍了中标对接WeexSDK后,如何通过加载UKoleosL的秘诀渲染获得视图。其它,您也足以经过github下载最新的playground代码并编译,它能够提供2维码扫描预览以及在线debug等功用。

点击下载 WeexSample

 

南心芭比: 热爱分享, 收获欢欣~