iOS Weex 简易集成

作者: Snoopy008 | 来源:发表于2017-01-24 09:45 被阅读410次

Weex 项目生成###

Weex是阿里研发的一个框架,解决iOS原生WebView不灵活的特点。今天就讲讲Weex集成到iOS项目中。
首先得确保安装了Weex框架。

$ npm install -g weex-toolkit@beta

cd 到项目的文件夹下,创建项目

$ weex init projectName

cd到项目下,为项目导入依赖

$ npm install

开启服务

$ npm run dev

开启观察者(方便实时调试)

$ npm run serve

Weex集成至iOS项目###

修改CoCoapods

target 'WeexIOS' do
    pod 'WeexSDK','~> 0.9.5'
end

cocoapods Update好之后,可以设置环境
在AppDegelate里设置

#import "AppDelegate.h"
#import "ViewController.h"
#import <WeexSDK/WXSDKEngine.h>
#import <WeexSDK/WXAppConfiguration.h>

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    //business configuration
    [WXAppConfiguration setAppGroup:@"AliApp"];
    [WXAppConfiguration setAppName:@"WeexDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    //init sdk enviroment
    [WXSDKEngine initSDKEnviroment];
    
    ViewController *vc=[[ViewController alloc] init];

    self.window.rootViewController=vc;

    return YES;
}

然后初始化ViewController,将生成的js文件导入项目中

#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>

@interface ViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;

@end

@implementation ViewController{
    NSURL *jsUrl;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame=self.view.frame;
    __weak typeof(self) weakSelf = self;
    
    
    NSString *path=[NSString stringWithFormat:@"file://%@/JS/app.weex.js",[NSBundle mainBundle].bundlePath];
    NSLog(@"-----path:%@",path);
    jsUrl=[NSURL URLWithString:path];
    if (!jsUrl) {
        return;
    }
    [_instance renderWithURL: jsUrl];
    
    
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    _instance.onFailed = ^(NSError *error) {
        NSLog(@"加载错误");
    };
    
    _instance.renderFinish = ^ (UIView *view) {
        NSLog(@"加载完成");
    };

}

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

这里需要注意的是renderWithURL这个方法最好还是写在前面,官方的文档里把这个方法写在最后,可是运行起来界面没有任何反应,而且控制台报出“no data return”。可是将renderWithURL这个方法提到前面一切都好了。

结语###

给个彩蛋,其实还有更简单的方式部署到iOS项目,直接用Weepack就可以。详细请参看https://github.com/weexteam/weex-pack

相关文章

  • Swift 中的 weex

    weex ios 集成参阅:Weex学习与实践:iOS原理篇 swift集成weex 首先将weexsdk集成到项...

  • iOS Weex 简易集成

    Weex 项目生成### Weex是阿里研发的一个框架,解决iOS原生WebView不灵活的特点。今天就讲讲Wee...

  • [个人记录]Weex入坑

    Weex入门 官方文档 文档iOS集成 开发环境配置 安装node 安装weex开发工具 验证 weex-tool...

  • iOS集成Weex最全面的基础集成(OC)

    iOS 集成Weex入门教程 前言 自Weex发布伊始, 其口号 "Write Once, Run Everywh...

  • Weex iOS集成

    背景 Weex是什么?提出这个问题之前我们先看看weex不是什么,根据文章: 对无线电商动态化方案的思考(三) ·...

  • weex集成iOS

    前言 由于项目的需要,最近接触了一下weex开发,本人刚入门不久,由于weex官方文档的坑太多.....这里主要介...

  • weex多页面支持

    在iOS集成weexsdk里面,我们再不同的地方跳转不同的weex界面,则需要不同的index.js weex c...

  • weex总结(iOS集成weex)

    1.标签使用本地图片 2. src 网络图片不显示问题 3.weex 调用 oc 比如...

  • WEEX快速入门

    weex ios 集成WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构...

  • weex-iOS集成

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

网友评论

    本文标题:iOS Weex 简易集成

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