码迷,mamicode.com
首页 > 移动开发 > 详细

iOS 混合开发 —— weex

时间:2017-07-19 14:33:12      阅读:456      评论:0      收藏:0      [点我收藏+]

标签:native   ref   调试   阿里   xcode   init   root   gui   its   

 

官网介绍文档:http://weex.apache.org/cn/guide/integrate-to-your-app.html

官网cocoapods/手动 集成文档:https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&&docType=1&articleId=104829

注:有任何不同,请依照官网为准,在此深深感谢阿里程序员大牛不辞辛苦, 做好开源工作,致敬。。

 

 

一、weex 手动集成到原生应用中

gitHub 官网源码:

https://github.com/alibaba/weex

https://github.com/alibaba/weex/archive/dev.zip

 

XCode 中 打开 weex/ios/sdk 目录下的 WeexSDK.xcodeproj
如下图切换 target
技术分享

编译工程,或者直接使用XCode的快捷键 ? + b

最后你可以看到 weex/ios/sdk/Products 目录下生成了WeexSDK.framework 的包

技术分享

你可以修改WeexSDK 然后打包生成你自己定制的Weex SDK

 

 

导入SDK到工程

并且导入系统的库,如下图
技术分享

添加SocketRocket依赖:copy 这里SRWebSocket.h/m 到自己的工程 (如果你的工程使用了cocoaPods,添加 pod ‘SocketRocket‘ 到Podfie 中即可)

 

添加main.js(在WeexSDK.framework包中)

技术分享

重要提示

添加 -ObjC 如下图(注意大小写)

 

 

=========  到此 集成完成 剩下的就是  代码原样搬过来 =========

环境初始化

weex运行环境的初始化,主要包括以下几个方面:应用配置(应用名、版本号、UA等);注册自定义的Module和Component;注册SDK已有协议的实现类。所有初始化的步骤在AppDelegate中完成。

1、 头文件

 

#import <WeexSDK/WXSDKEngine.h>
#import <WeexSDK/WXLog.h>
#import <WeexSDK/WXDebugTool.h>
#import <WeexSDK/WXAppConfiguration.h>

  

WXSDKEngine:SDK开放的绝大多数接口都在此有声明。

WXLog: 控制Log输出的级别,包括Verbose、Debug、Info、Warning、Error,开发者可以按需来设置输出级别。

WXDebugTool: weex提供的对外调试工具。

WXAppConfiguration: 使用weex开发的业务性配置。

 

 

2、初始化

在appdelegate.m的didFinishLaunchingWithOptions回调中执行。

//业务配置,非必需
[WXAppConfiguration setAppGroup:@"AliApp"];
[WXAppConfiguration setAppName:@"WeexDemo"];
[WXAppConfiguration setAppVersion:@"1.0.0"];
 
//初始化SDK环境    
[WXSDKEngine initSDKEnviroment];
  
//注册自定义module和component,非必需
[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
 
//注册协议的实现类,非必需
[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
 
//设置Log输出等级:调试环境默认为Debug,正式发布会自动关闭。    
[WXLog setLogLevel:WXLogLevelVerbose];

  

经过以上简单的配置,WeexSDK的环境初始化已完成,下面就进入Weex动态化页面渲染环节。

Weex页面渲染

weex支持全页面以及页面局部两种不同的渲染模式。在iOS中使用方法很简单,只需要将weex渲染所得的view添加到父容器中即可。下面会介绍如何在iOS最常用的容器viewController中渲染weex页面。

 

#import <WeexSDK/WXSDKInstance.h>

  

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

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

2、页面渲染

1、头文件

- (void)viewDidLoad 
{
    [super viewDidLoad];
     
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = self.view.frame; //必需
    [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
     
    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        [weakSelf.view addSubview:weakSelf.weexView];
    };
     
    _instance.onFailed = ^(NSError *error) {
        //处理失败回调的逻辑。
    };
     
    _instance.renderFinish = ^ (UIView *view) {
        //处理页面渲染完成的逻辑。
    };
}

  

以上是通过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的数据请求,当然也可以在前端逻辑中完成请求后将数据注入。

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

_instance.renderFinish:和onCreate不同,renderFinish表示所有weex的页面元素都已渲染完毕,整个渲染过程至此结束。

其他跟instance紧密相关的接口,请参见WXSDKInstance.h的详细说明。

 

3、页面销毁

切记在viewController的销毁的同时,将weex实例一并销毁,否则会出现内存泄露。

- (void)dealloc
{
    [_instance destroyInstance];
}

  

 

 

iOS 混合开发 —— weex

标签:native   ref   调试   阿里   xcode   init   root   gui   its   

原文地址:http://www.cnblogs.com/saytome/p/7205132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!