weex-iOS集成

作者: 满山李子 | 来源:发表于2016-07-23 17:23 被阅读4490次

weex只是刚刚起步,还存在一些bug,有些功能还有待完善和提高.但是其使用起来还是可以节省些时间. 这里我们说说如何把weex集成到我们的iOS项目中

1. 下载weex源代码

  git clone https://github.com/alibaba/weex.git

2. 把根目录下的/ios/sdk整个目录拷贝到项目中

拷贝WeexSDK.png

3. 使用Cocoapods安装weex;

请确认项目目录中是否包含该Profile文件.如果没有通过pod init 创建一个新的.编辑这个文件,添加必要的依赖

   #Weex支持的最低版本是iOS7.0.
    platform :ios, '7.0'
    #指定WeexSDK所在的路径是`./sdk/`这里的`.`代表`Profile`文件所在目录
    pod 'WeexSDK', :path=>'./sdk/'

4. 安装WeexSDK

终端 cdProfile的目录,然后执行

 pod install

安装完毕后如图所示:

cocoapod安装完毕.png
关闭你原来的Xcode项目,打开白底的YourProject.xcworkspace,如图:
工程文件.png

5. 初始化Weex环境

我们需要在AppDelegatedidFinishLaunchingWithOptions的方法中做些初始化的操作.

  1. 导入框架
#import <WeexSDK.h>
  1. WeexSDK初始化设置
//1. 项目配置
//1.1 设置组织
[WXAppConfiguration setAppGroup:@"itheimaApp"];
//1.2 设置App的名称
[WXAppConfiguration setAppName:@"WeexDemo"];
//1.3 设置App的版本号
[WXAppConfiguration setAppVersion:@"1.0.0"];
//2. 初始化`WeexSDK`环境
[WXSDKEngine initSDKEnviroment];
//3. 注册自定义的组件和模型(可选)  [如果有就注册如果没有就不注册]
//register custom module and component,optional
//[WXSDKEngine registerComponent:@"YourView" withClass:[MyViewComponent class]];
//[WXSDKEngine registerModule:@"YourModule" withClass:[YourModule class]];
//4. 注册协议的实现,可选
//[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
//5. 设置日志的级别(默认的日志级别是Info)
[WXLog setLogLevel:WXLogLevelDebug];

6. 渲染Weex实例

weex支持两种渲染模式,一种是整个界面,一种是界面某一部分.你需要给需要渲染的weex视图指定特定的URL,然后把它添加到父控件中.

  1. 导入WXSDKInstance的头文件
//导入WXSDKInstance
#import <WeexSDK/WXSDKInstance.h>
  1. 声明属性instance
@interface ViewController ()
//WXSDKInstance属性
@property (nonatomic, strong) WXSDKInstance *instance;
//URL属性(用于指定加载js的URL,一般声明在接口中,我们为了测试方法写在了类扩展中.)
@property (nonatomic, strong) NSURL *url;
//Weex视图
@property (weak, nonatomic) UIView *weexView;
@end
  1. 创建WXSDKInstance 对象,并进行相关设置
   //重写viewDidLoad
  - (void)viewDidLoad 
{
    [super viewDidLoad];
  // 创建WXSDKInstance对象
    _instance = [[WXSDKInstance alloc] init];
    // 设置weexInstance所在的控制器
    _instance.viewController = self;
    //设置weexInstance的frame
    _instance.frame = self.view.frame;
    //设置weexInstance用于渲染的`js`的URL路径(后面说明)
    [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
    //为了避免循环引用声明一个弱指针的`self`
    __weak typeof(self) weakSelf = self;
    //设置weexInstance创建完毕回调
    _instance.onCreate = ^(UIView *view) {
         weakSelf.weexView = view;
        [weakSelf.weexView removeFromSuperview];
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    // 设置`weexInstance`出错的回调
    _instance.onFailed = ^(NSError *error) {
        //process failure
        NSLog(@"处理失败:%@",error);
    };
    //设置渲染完成的回调
    _instance.renderFinish = ^ (UIView *view) {
        //process renderFinish
        NSLog(@"渲染完成");
    };
}

WXSDKInstance是一个非常重要的类,它提供的一些基本的方法和回调,比如:renderWithURLonCreateonFailed等.

7.销毁WeexInstance

你需要在控制器的dealloc方法中销毁WeexInstance否则会导致内存泄露

- (void)dealloc {
//  销毁WXSDKInstance实例
    [self.instance destroyInstance];
}

8. 加载Weex的js文件.

weexjs文件一般都是从服务器上加载,如果你不想从服务器上加载weex的js文件,你可以把这些js文件拷贝到资源目录中.

  1. 生成weexjs文件
    终端cd.we文件所在的目录,然后执行
  weex  list.we -o list.js

其中list.we 是你的页面对应的weex文件. 在开发中index.we一般指的使用整个App的入口文件. 我们这里使用上一节中创建的 list.we 文件,生成一个list.js文件

  1. list.js拷贝到你的项目中,并添加到target上.
    拷贝到项目
  2. 懒加载weex的js文件的URL
  - (NSURL *)url {
      if (!_url) {
          _url =  [[NSBundle mainBundle] URLForResource:@"list"   withExtension:@"js"];
      }
      return _url;
  }

运行项目显示如图:

运行
没有显示图片,是因为对于非Html5的应用Weex本身不负责网络处理,如果你需要加载图片,需要注册一个图片加载器.

9. 自定义图片加载器

  1. 创建一个类,遵守WXImgLoaderProtocol和WXImageOperationProtocol协议
  2. 实现协议中的方法,完成图片加载
    2.1 WXImgLoaderProtocol 必须实现方法:
  - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock

2.2 WXImageOperationProtocol 必须实现方法:

  - (void)cancel 

2.3 具体实现(仅供参考)

@interface HMImageLoader ()
 ///AFHTTPSessionManager
@property (nonatomic, strong) AFHTTPSessionManager *sessionManager;
///下载任务
@property (nonatomic, strong) NSURLSessionDataTask *dataTask;
@end
@implementation HMImageLoader
  - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock {
    self.dataTask = [self.sessionManager GET:url parameters:nil progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {
        NSData *imageData = responseObject;
        UIImage *image = [UIImage imageWithData:imageData];
//      设置图片的大小
        if (image&&!CGRectEqualToRect(imageFrame, CGRectZero)) {
//         开启图片上下文
            UIGraphicsBeginImageContext(imageFrame.size);
//          绘制图片
            [image drawInRect:imageFrame];
//          取出图片
            image = UIGraphicsGetImageFromCurrentImageContext();
//          关闭图形上下文
            UIGraphicsEndImageContext();
        }
//      成功回调
        completedBlock(image,nil,YES);
    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
//      失败回调
        completedBlock(nil,error,YES);
    }];
    return self;
}
  - (void)cancel {
 //  取消下载任务
    [self.dataTask cancel];
}
  - (AFHTTPSessionManager *)sessionManager {
    if (!_sessionManager) {
        _sessionManager = [AFHTTPSessionManager manager];
        _sessionManager.responseSerializer = [AFHTTPResponseSerializer serializer];
    }
    return _sessionManager;
}
@end

10. 注册图片加载器

Appdelegate中注册图片加载器

//   注册图片加载器
     [WXSDKEngine registerHandler:[HMImageLoader new] withProtocol:@protocol(WXImgLoaderProtocol)];

运行,显示结果:


显示结果

图片加载出来了.

11. 适配iOS9.0,在info.plist增加如下内容,允许发送不安全的http请求.

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

12. 打包 .ipa文件

使用XcodeProduct -> Archive一步步的做就可以构建你的.IPA文件,上传到AppStore.

相关文章

  • weex-iOS集成

    weex只是刚刚起步,还存在一些bug,有些功能还有待完善和提高.但是其使用起来还是可以节省些时间. 这里我们说说...

  • Weex-iOS内存分析

    前言 引入weex提高了业务开发的效率以及灵活度,但是在使用过程中还是存在不少问题,其中内存上就有很明显的问题 一...

  • Weex-iOS源码-CSS Layout 分析

    Layout 介绍 Layout是FaceBook开源的一个跨端CSS布局引擎。 Weex 引入了Layout 在...

  • Weex-iOS源码-CSS Layout 分析

    Layout 介绍 Layout是FaceBook开源的一个跨端CSS布局引擎。 Weex 引入了Layout 在...

  • 【3】企业集成EAI概要

    企业应用集成(EAI)可以包括表示集成、数据集成、控制集成和业务流程集成等多个层次和方面。 1.表示集成表示集成也...

  • 集成Facebook广告、分享集成笔记

    集成Facebook广告、分享集成笔记 1、集成Facebook广告2、集成Facebook分享 Facebook...

  • iOS原生集成H5+详细流程

    iOS原生集成H5+ 集成方式 独立应用方式集成 Widget方式集成 WebView方式集成 可以打开官方链接:...

  • iOS开发 - SMSSDK(短信验证)

    Mob 的SMS短信验证集成和使用 1.集成##### 集成可以用cocoapods来集成,也可以手动集成,这里就...

  • SpringBoot 集成

    SpringBoot 集成 redis SpringBoot集成mongodb SpringBoot集成Beetl...

  • 竹木纤维集成墙面好不好

    竹木纤维集成墙面优点 集成墙板十大品牌排名竹木纤维集成墙面用户集成墙面价格表 竹木纤维集成墙面 新型集成墙面装饰板...

网友评论

  • JohnQ:好奇怪 我把.js文件放到文件件里在进行访问就无法执行,如果直接放在项目工程中则能进行获取到
  • JohnQ:Undefined symbols for architecture arm64:
    "_OBJC_CLASS_$_WXRootViewController", referenced from:
    objc-class-ref in AppDelegate.o
    "_OBJC_CLASS_$_WXLog", referenced from:
    objc-class-ref in AppDelegate.o
    "_OBJC_CLASS_$_WXSDKEngine", referenced from:
    objc-class-ref in AppDelegate.o
    "_OBJC_CLASS_$_WXAppConfiguration", referenced from:
    objc-class-ref in AppDelegate.o
    "_OBJC_CLASS_$_WXSDKInstance", referenced from:
    objc-class-ref in ViewController.o
    ld: symbol(s) not found for architecture arm64
    clang: error: linker command failed with exit code 1 (use -v to see invocation)为什么我用cocoapods依赖库后运行编译报未找到资源库
  • Android最强王者:小白一个,没明白,weex 旨意在一套代码,可以打包成android 和iOS 的安装包了,那这里面还这么集成是什么意思呢?这样搞,不是还需要iOS 和android 分开搞两套?纯属请求解答,不是吐槽,望赐教!😊
  • 奔跑的小火车:加载本地js文件,如果使用
    self.url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"js"]];
    会加载不出JS文件,找了半天,终于在楼主这里找到了正确的加载方式,万分感谢!
  • 德坤柳:谢谢题主的分享!
    不过在使用的过程中发现
    [image drawInRect:imageFrame];
    这个方法会使绘图不一定从0开始,可以改成从0点开始绘制
  • 亮声:对于ios菜鸟来说,提供一下源码供参考,可能会更好
  • Bill_Wang:大兄弟,最新版尝试过吗,我打开vue打包的js。报错
    <Weex>[error]WXSDKError.m:39, [undefined:88:9] ReferenceError: Can't find variable: Vue
    德坤柳:我已经找到方法了,我那个是因为官网给的文档weexSDK是0.9.5的,将它改成最新的就可以了
    德坤柳:兄弟解决了吗
  • HI海叔:顶部怎么处理呢?都顶到最上面了
  • ZhengLi:求问下.we文件在哪,怎么找不到
  • 偏偏就是祢:有没有和native交互的文章啊?
  • 8cd16d46a1c6:请问这个打包是打的离线包么?线下修改可以更新到线上吗?
  • 七堇年华cc:你好,我想问下,如果做好一个活动界面,appstore上线之后,我如何再进行hot fix/update操作?从服务器重新下载新的js文件?还是其他方法
  • kalen5241:持续关注
  • 魏志军:xcode8运行报错呀
  • Mr_Dragonn:大兄弟 知道点击事件怎么处理吗 我创建了的Model不管用啊
    Bear_HJ:@Mr_Dragonn 点击事件 应该是在 moudle 模块那里 暴露方法给 前端调用, 点击事件就是要你去做出一个响应操作是吧,这个响应操作 是由前端来调用。 我是这么理解的。。
  • HyxXej:学习了

本文标题:weex-iOS集成

本文链接:https://www.haomeiwen.com/subject/xzfwjttx.html