美文网首页Weex学习
将week集成到ios中

将week集成到ios中

作者: John_LS | 来源:发表于2016-11-11 11:55 被阅读1409次

    Weex的入门
    swift 中的weex

    1、新建项目

    1、命令行cd到项目根目录 执行 pod init,会创建一个pod配置文件.
    2、用编辑器打开,加上 pod 'WeexSDK', :path=>'./sdk/'

    86DFA444-916E-450B-937C-2E9E3483724F.png

    3、下载最新的weexSDK

    20160803161139837.png

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

    7B281A19-2B8D-4AE3-A9DE-6A5C5C5FAEF5.png

    5、关掉xcode,在当前目录,命令行执行

    pod install
    
    0E80C769-9705-4D0F-9239-A53615C0B2E6.png

    以后点击xcworkspace文件打开项目.

    6、创建一个新目录weex,命令行cd到weex目录,执行weex init,会提示你输入项目名称,自动创建的文件:

    02301B87-9FC4-47A2-9A8A-197D71DEF2C9.png

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

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

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

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

    加载weex页面

    8、在weex目录下,在终端开启服务器

    npm run dev                   //项目编译
    npm run serve                 //启动轻量服务器 
    

    详细请看WEEX快速入门中初始化程序

    2、项目集成

    在AppDelegate.m中

    //
    //  AppDelegate.m
    //  LSWeexOCDemo
    //
    //  Created by John_LS on 2016/11/11.
    //  Copyright © 2016年 John_LS. All rights reserved.
    //
    
    #import "AppDelegate.h"
    
    @interface AppDelegate ()
    
    @end
    
    @implementation AppDelegate
    
    - (void)initWeex{
        [WXAppConfiguration setAppName:@"LSWeexOCDemo"];
        [WXAppConfiguration setAppGroup:@"LS"];
        [WXAppConfiguration setAppVersion:@"1.0.0"];
        
        [WXSDKEngine initSDKEnviroment];
    }
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        [self initWeex];
        // Override point for customization after application launch.
        return YES;
    }
    
    
    - (void)applicationWillResignActive:(UIApplication *)application {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
    }
    
    
    - (void)applicationDidEnterBackground:(UIApplication *)application {
        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
    }
    
    
    - (void)applicationWillEnterForeground:(UIApplication *)application {
        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
    }
    
    
    - (void)applicationDidBecomeActive:(UIApplication *)application {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    }
    
    
    - (void)applicationWillTerminate:(UIApplication *)application {
        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
    }
    
    
    @end
    
    

    将要展示js文件放到项目中。

    weex视图控制器的初始化

    ViewController.m:

    //
    //  ViewController.m
    //  LSWeexOCDemo
    //
    //  Created by John_LS on 2016/11/11.
    //  Copyright © 2016年 John_LS. 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
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        _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(@"加载完成");
        };
        
        [_instance renderWithURL: [NSURL URLWithString:[NSString stringWithFormat:@"file://%@/hello.js",[NSBundle mainBundle].bundlePath]]];
        self.view.backgroundColor=[UIColor whiteColor];
    }
    
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    - (void)dealloc
    {
        [_instance destroyInstance];
    }
    @end
    
    

    运行展示的效果如图:

    66FFEFEB-7F4D-4717-BA04-7ABB6062DD5C.png

    上面的demo可以直接运行weex服务器上面的.we文件。

    1、在mac上面构建weex环境]
    2、创建we文件
    以上两步均在前面的Weex的入门中有提到
    3、终端中:cd到we文件的目录下,通过终端命令weex -s .架起weex服务器(不要丢掉.)
    4、将上面demo中的url换成http://192.168.1.139:8081/list.we,运行可以看到结果。

    Simulator Screen Shot 2016年11月14日 下午4.47.45.png

    相关文章

      网友评论

      • Buger123:第四部,路径怎么配置
        John_LS:podFile的路径
      • key君:多个js文件和一个index.html应该怎么加
      • _Dong咚咚:按照步骤配置成功!感谢分享!
        key君:多个js文件和一个index.html应该怎么加
        John_LS:@_Dong咚咚 互相学习 👍

      本文标题:将week集成到ios中

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