文档章节

Weex IOS初始化项目

Billydotzhang
 Billydotzhang
发布于 2016/12/08 13:36
字数 587
阅读 164
收藏 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在达人店的一年实践

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

尚妆产品技术刊读
2017/12/08
0
0
【AR】开始使用Vuforia开发iOS(2)

原 设置iOS开发环境 安装Vuforia iOS SDK 如何安装Vuforia iOS示例 编译并运行Vuforia iOS示例 支持iOS金属 iOS 64位迁移 设置iOS开发环境 适用于iOS的Vuforia引擎目前支持运行iOS 9及更高版...

lichong951
06/11
0
0
Bytom移动端钱包SDK开发基础

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom Bytom-Mobile-Wallet-SDK 是从bytom源码中抽离出的钱包层代码,并且对钱包...

比原链Bytom
09/10
0
0
Weex-iOS源码阅读(一)初始化和函数调用

weex是基于JavaScriptCore实现的,看代码之前有必要先了解下JavaScriptCore,相关内容移到: iOS-JavaScriptCore 先说说我理解的跨平台技术,其实我们做的移动端产品基本都是跨平台的,Andro...

正谦
08/30
0
0
weex,react native,flutter

weex: 一次编写,处处运行 RN: 学一次,到处写(针对安卓,IOS平台特性 各自写,会有很大一部分是一样的代码) 这些方案是否真正的解决了跨平台问题呢?从目前的状况来看,很显然是没有的,因...

东东笔记
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SAP不同的产品是如何支持用户创建自定义字段的

我们从SAP CRM,Cloud for Customer(简称C4C)和S/4HANA这三个产品分别来看看。 SAP CRM 我们使用所谓的Application Enhancement Tool(AET)来创建扩展字段。首先在Personalize里将Configu...

JerryWang_SAP
25分钟前
3
0
Vue-Element-Upload

记录一下文件上传封装Js 代码示例 封装:uploadFile.vue <template> <el-upload v-model="attachment" ref="upload" class="upload-demo" :action="uploadUrl" ......

华山猛男
32分钟前
2
0
AWVS破解及使用手册

1.安装 因为是windows软件,比较简单,此部分略: 破解插件下载: 链接: https://pan.baidu.com/s/1x9LK9F3KvqDgTvXDjoSZnQ 提取码: 7k4u 2.创建扫描目标 2-1.Targets->Add Target 2-2.对话框...

硅谷课堂
35分钟前
1
0
Centos 7 安装Zabbix 3.4

Zabbix 3.4 支持Centos 7。貌似不支持6.9. 更多详细内容请参考官方说明文档,详细的安装要求不贴出来了。 https://www.zabbix.com/documentation/3.4/zh/manual/installation/requirements 虚...

linjin200
40分钟前
1
0
阿里云数据库HybridDB for PostgreSQL使用教程

云数据库HybridDB for PostgreSQL(ApsaraDB HybridDB for PostgreSQL)是一种在线MPP大规模并行处理数据仓库服务。云数据库HybridDB for PostgreSQL基于Greenplum Database开源数据库项目,...

mcy0425
49分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部