Weex项目初始化weex-iOS集成

来源：互联网发布：淘宝商城购买cf装备编辑：程序博客网时间：2024/05/12 08:42

项目初始化

1、没有现成的工程的话新建iOS项目

命令行cd到项目根目录执行 pod init，会创建一个pod配置文件

用编辑器打开，加上 pod 'WeexSDK', :path=>'./sdk/'

下载最新的weexSDK https://github.com/alibaba/weex

在ios目录下有个sdk文件夹，把它复制到ios项目根目录，和podFile里配置的路径一致

关掉xcode，在当前目录，命令行执行pod install，

现在项目目录变成了这样，以后点击xcworkspace文件打开项目

创建一个新目录weex，命令行cd到weex目录，执行weex init，会提示你输入项目名称

自动创建的文件：

在当前目录命令行执行npm install，安装依赖库

创建一个文件夹js，命令行执行weex src -o js生成最终需要的js文件

也可以weex src/main.we在浏览器预览

或者weex src/main.we --qr 生成二维码，用playground App 扫描预览

加载weex页面

xcode打开workspace项目文件

打开AppDelegate.m添加一下内容

将之前创建的js文件夹拖到xcode工程的文件列表

效果是这样的

weex视图控制器的初始化

ViewController.h:

[objc] view plain copy
 
//  
//  ViewController.h  
//  weexDemo3  
//  
//  Created by admin on 16/8/3.  
//  Copyright © 2016年 admin. All rights reserved.  
//  
  
#import <UIKit/UIKit.h>  
  
@interface ViewController : UIViewController  
- (instancetype)initWithJs:(NSString *)filePath;  
@end  

ViewController.m:

[objc] view plain copy
 
//  
//  ViewController.m  
//  weexDemo3  
//  
//  Created by admin on 16/8/3.  
//  Copyright © 2016年 admin. All rights reserved.  
//  
  
#import "ViewController.h"  
#import <WeexSDK/WXSDKInstance.h>  
  
@interface ViewController ()  
@property (nonatomic, strong) WXSDKInstance *instance;  
@property (nonatomic, strong) UIView *weexView;  
@end  
  
@implementation ViewController{  
    NSURL *jsUrl;  
}  
  
- (instancetype)initWithJs:(NSString *)filePath  
{  
    self = [super init];  
    if (self) {  
        //远程js文件  
//        NSString *path=[NSString stringWithFormat:@"http://192.168.232.13:8080/examples/js/%@",filePath];  
        //本地js文件  
                NSString *path=[NSString stringWithFormat:@"file://%@/js/%@",[NSBundle mainBundle].bundlePath,filePath];  
        NSLog(@"-----path:%@",path);  
        jsUrl=[NSURL URLWithString:path];  
    }  
    return self;  
}  
  
- (void)viewDidLoad {  
    [super viewDidLoad];  
    _instance = [[WXSDKInstance alloc] init];  
    _instance.viewController = self;  
    _instance.frame=self.view.frame;  
    __weak typeof(self) weakSelf = self;  
    _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(@"加载完成");  
    };  
    if (!jsUrl) {  
        return;  
    }  
    [_instance renderWithURL: jsUrl];  
    self.view.backgroundColor=[UIColor whiteColor];  
}  
  
- (void)didReceiveMemoryWarning {  
    [super didReceiveMemoryWarning];  
    // Dispose of any resources that can be recreated.  
}  
  
- (void)dealloc  
{  
    [_instance destroyInstance];  
}  
  
@end  

再打开AppDelegate.m创建导航控制器

引入头文件

#import "ViewController.h"

创建导航视图：

[objc] view plain copy
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
    //weex  
    [self initWeex];  
    ViewController *vc=[[ViewController alloc]initWithJs:@"main.js"];  
    UINavigationController *nav=[[UINavigationController alloc]initWithRootViewController:vc];  
    self.window.rootViewController=nav;  
    return YES;  
}  

运行

图片不显示是因为图片加载需要自己创建模块，可以直接把demo的代码和pod配置粘过来使用

0 0