iOS 集成Weex入门教程

前言  

  自Weex发布伊始, 其口号 “Write Once, Run
Everywhere”就抓住了不可估量前端和客户端程序猿纷纷入坑, 我啊未克独善其中.
就我手上所读Weex的涉在这个记录转, 由于自己是一致号称正出道不久iOS开发者,
所以这篇博客含金量不高, 下面就是简单阐述下什么用Weex初步集成及iOS.

Weex简介

  2016年4月21日,北京 – 阿里巴巴今于Qcon大会上发表跨平台活动开发工具Weex开放内测邀请。Weex能够到兼顾性能及动态性,让走开发者通过简捷的前端语法写起Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。   

  对于活动开发者来说,Weex主要解决了数发版和多端研发两雅痛点,同时缓解了前者语言性能差及出示力量受限的题材。开发者可由此Weex官网申请内测。开发者只需要在团结的APP中坐Weex的SDK,就足以经创作HTML/CSS/JavaScript来支付Native级别之Weex界面。Weex界面的生成码其实就是是一致段落很粗的JS,可以像发布网页一样自在部署在服务端,然后于APP中要执行。

 

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

 

iOS 客户端集成Weex

 

拼步骤同: 搭建开发条件

  首先得生iOS开发环境: MacOS, 安装有Xcode.

  需要设置node.js(6.0+), 直接到node.js
官网下载即可, 更过安装方式 参考: node.js
官方信息.

    点击.dmg安装包安装到位后 在terminal输入: 

 

  Node.js 1

   通常,安装了 Node.js 环境,npm 包管理工具也随即安装了。npm 是一个
JavaScript 包管理工具,它好为开发者轻松共享以及重用代码。Weex
很多因来自社区,同样,Weex 也拿洋洋器发布到社区便民开发者使用。

 

合并步骤二:安装cocoaPods

  注: cocoaPods安装,如果你此前都装,请过了之步骤。

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

  1. 移除现有的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 

 

  安装到位后:

  Node.js 2

  

  由于自家就设置了了cocoaPods, 所以再次安装提示的内容非常少,
关于详细的装cocoaPods
教程请参考: http://blog.csdn.net/aaron0619/article/details/51861127

 

  至此, cocoaPods已装成功!

 

合步骤三: 创建Podfile

  由于做个大概的iOS 集成 Weex的demo示范, 所以这里我们新建一个列,
来添加Podfile.

 

  1. 创办新的花色, 并在terminal中上该档文件夹, 并创建Podfile:

  Node.js 3

  这Podfile已经创造成功.

  

  2. 编纂Podfile, 输入 vim Podfile, 并打开的文本被仍
“I”键进入编辑状态, 接着输入:

  Node.js 4

 

  实际操作时, 请将 下面target中的名字改成成为和类型名字一致.

 

  Node.js 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
后面不指定版本就意味着下载最新的版本.

  3. 在terminal中 项目根本目录下执行 pod install 命令.

    Node.js 6

  Podfile 就活动添加好了赖,
并生于项目目录中化一个WeexIntegrationDemo.xcworkspace, 打开它.

    4. 导入系统库底库房:

  Node.js 7

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

  Node.js 8

  至此 集成的前期工作已全部完成.

 

iOS native 环境初始化

  weex运行环境的初始化,主要不外乎以下几只地方:应用配置(应用叫、版本号、UA等);注册于定义之Module和Component;注册SDK已发生协商的兑现类似。所有初始化的步子在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开放的绝大多数接口都当是来声明。

    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, 要遵循二只商量:  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页面。

     1.每当如使用Weex渲染的viewController中蕴藏头文件

  现在来介绍下WXSDKInstance究竟是什么,如何来使用它。

  WXSDKInstance,简单来说,就是weex渲染的实例对象。它提供被开发者诸多及页面渲染相关的接口,包括renderWithURL、refreshInstance以及destroyInstance等,提供了几单比主要的回调接口,方便开发者根据不同之业务场景去处理他们的逻辑,如onfailed,还提供了性监控相关的接口。

  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];

    // 设置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];

    // 为避循环引用 声明一个弱指针
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:
一般情形下,iOS的运行环境还是基于不同viewController的,很多底部操作需要知道当前所处的viewController对象,因此要为instance知会当前底viewController。

  instance.frame:
根据weex对instance的设计规范,需要渲染中知情最外层body的职务与尺寸。这个frame值的安装,跟最终以回调中取得之view.frame一致。

  当然,在众多状况下,仅用以一个native页面的局部渲染weex区块。很简短,您就需要以instance.frame设置也目标区块的岗位尺寸即可。

  renderWithURL:常用的渲染方式:其一,直接输入URL(可以是file://或
http(s)://);其二,sourceCode,即JavaScript源码。options参数,表示开发者可以经过WeexSDK向前端透传的参数,如bundleURL。data参数,表示向weex的模板注入的页面数据,它一般出自native的多少要,当然为可以当前端逻辑中就请求后将数据注入。

  url参数: 是打weex 编译运行后出来的app.js或app.weex.js 文件,
可以在远程服务器上, 也得以一直拖上路工里.

  _instance.onCreate:weex页面最外层body渲染完成后的回调。在这回调中,weex渲染所得的rootView已规定,可以输出并上加至父容器中。

  _instance.renderFinish:和onCreate不同,renderFinish代表有weex的页面元素还已渲染了,整个渲染过程至此结束。

  其他与instance紧密有关的接口,请参见WXSDKInstance.h的详实说明。

  

  3. 页面销毁

  切记在viewController的灭绝之以,将weex实例一连销毁,否则会面世内存泄露。

  

  • (void)dealloc
    {

    [_instance destroyInstance];

}

 

其他

于页面渲染之局部,本文就为您详细介绍了成联网WeexSDK后,如何通过加载URL的方法渲染得到视图。此外,您为得以经过github下载最新的playground代码并编译,它可以供二维码扫描预览以及在线debug等力量。

点击下载 WeexSample

 

南心芭比: 热爱分享, 收获喜悦~