创建一个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];
}