创建一个weex项目
比如我要在桌面上创建一个MyWeex的文件夹,切换到该文件夹下:
cd MyWeex
执行以下命令:
weex init
然后按回车键即可,这样一个项目就生成了,结构如下:
Paste_Image.png
编辑这个项目
用subline 打开src 下的weex-bootstrap.we文件,我们先写一个hello world,用下面代码覆盖原有文件并保存:
<template>
<div>
<text class="text" style="color:red;">Hello world</text>
</div>
</template>
<style>
.text{
font-size:160;
}
</style>
<script></script>
调试这个项目
进入src目录:
cd src
执行下面命令:
weex weex-bootstrap.we
这时会会打开默认的儿浏览器,并展示出效果.
- 如何在手机上调试这个界面
执行一下命令:
weex weex-bootstrap.we --qr
会生成一个二维码和一个地址:
Paste_Image.png
用官方的demo或者在appstore下载playground,点击左上角的二维码扫描工具,扫描二维码即可.
集成到自己的ios项目中(让这个界面在自己的项目中展示)
完整代码如下:
#import "ViewController.h"
#import <WeexSDK/WeexSDK.h>
@interface ViewController ()
@property (nonatomic,strong) WXSDKInstance *instance;
@property (nonatomic,strong) UIView *weexView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[super viewDidLoad];
_instance = [[WXSDKInstance alloc] init];
_instance.viewController = self;
_instance.frame = self.view.bounds;
__weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
[weakSelf.view addSubview:weakSelf.weexView];
};
_instance.onFailed = ^(NSError *error) {
//process failure
};
_instance.renderFinish = ^ (UIView *view) {
//process renderFinish
};
//写刚才终端生成的地址
NSString *urlStr = @"http://192.168.1.25:8081/weex_tmp/h5_render/weex-bootstrap.js?wsport=8082";
NSURL *url = [NSURL URLWithString:urlStr];
[_instance renderWithURL:url options:nil data:nil];
}
