文档章节

Weex IOS初始化项目

Billydotzhang
 Billydotzhang
发布于 2016/12/08 13:36
字数 587
阅读 165
收藏 1

项目初始化

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:

//  
//  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:

//  
//  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"

创建导航视图:

 

- (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配置粘过来使用

© 著作权归作者所有

共有 人打赏支持
Billydotzhang
粉丝 8
博文 44
码字总数 20644
作品 0
崇明
私信 提问
Weex 0.20.0 发布,跨平台移动开发框架

Weex 0.20.0 发布了,Weex 是跨平台移动开发框架,能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出 Native 级别的性能体验,并支持 iOS、安卓、YunOS 及 Web 等多端部署。 此...

h4cd
12/12
0
0
企鹅电竞weex实践——UI开发篇

腾讯DeepOcean原创文章:dopro.io/egame-weex-… 随着电竞业务的不断发展,页面功能越来越多,交互逻辑更加复杂,类似无限滚动、上拉刷新、横竖切换滚动等形式在业务中已是标配,经过重重优化...

腾讯DeepOcean
11/15
0
0
ReactNative&weex&&DeviceOne对比

  React Native出来有一段时间了,国内的weex和deviceone是近期发布的,我可以说从2011年就开始关注快速开发的跨平台平台技术了,接触过phoneGap、数字天堂、appcan等早期的移动中间件技术...

jonh_felix
2016/07/25
614
0
「大前端」Weex在达人店的一年实践

Weex在达人店的一年实践 本文来自尚妆移动端团队路飞 发表于尚妆github博客,欢迎订阅! 尚妆达人店接入weex也一年的时间了,在此期间,也陆陆续续出了一些文章: 「Android」 详细全面的基于...

尚妆产品技术刊读
2017/12/08
0
0
weex中UISegmentControl实现及遇到的问题

在最近主导的一个项目中,App端的实现使用了weex。通过近一个月的实践,我们发现如果对于人机交互较少的App,即使较少前端经验的人也能迅速进入开发(当然需要一定时间 才能上手weex)。在开发...

scorpiozj
11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS官方钱包keosd

EOS官方钱包的名称是keosd,它负责管理你的私钥,并且帮你进行交易的签名。 不过不幸的是,keosd钱包对普通用户并不友好,它是一个命令行程序,目前还没有像以太坊的mist那样的图形化界面,而...

汇智网教程
今天
21
0
ArrayList的实现原理以及实现线程安全

一、ArrayList概述 ArrayList是基于数组实现的,是一个动态的数字,可以自动扩容。 ArrayList不是线程安全的,效率比较高,只能用于单线程的环境中,在多线程环境中可以使用Collections.syn...

一看就喷亏的小猿
今天
21
0
Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
31
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
40
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部