Weex开发之-Hello Weex

赵哥窟

发布于 2021-12-16 09:32:59

6460

发布于 2021-12-16 09:32:59

上一篇写了Weex的开发环境搭建Weex开发之-开发环境搭建，接下来我们来写一个Hello Weex

首先我们创建一个Weex项目,使用下面的命令

weex create WeexDemo

创建好后我们在src目录下新建一个hello文件夹。然后新建一个helloWeex.vue

<template>
  <div>
    <image class="logo" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Faliyunzixunbucket.oss-cn-beijing.aliyuncs.com%2Fjpg%2F13c81fbf59dad92deb4970622f10dfc1.jpg%3Fx-oss-process%3Dimage%2Fresize%2Cp_100%2Fauto-orient%2C1%2Fquality%2Cq_90%2Fformat%2Cjpg%2Fwatermark%2Cimage_eXVuY2VzaGk%3D%2Ct_100&refer=http%3A%2F%2Faliyunzixunbucket.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633158686&t=b3e0f39fa98984a8f4857a07b87d8609"></image>
    <text class="title" onclick="onClickTitle">Hello Weex</text>
  </div>
</template>

<style>
.logo {background-color: yellow; margin-left: 20; margin-right: 20; height: 260; margin-top: 200;}
.title { color: red; margin-top: 20;text-align: center;}
</style>

<script>
  module.exports = {
    methods: {
      onClickTitle: function (e) {
        console.log(e);
        alert('title clicked.');
      }
    }
  }
</script>

然后我们cd到hello 目录下，执行命令生成JS文件给iOS调用

 weex compile helloWeex.vue dist

Weex是如何集成到iOS的这里就忽略了，网上有很多集成的文章。如果不会的话执行下面的命令

weexpack platform add ios //安装iOS模板

执行过后会在WeexDemo-> platforms->ios目录下面生成一个iOS的demo 工程

我们把刚才生成的helloWeex.js文件拷贝到ios 工程的bundlejs文件夹。

- (void)iosRender
{
    [_instance destroyInstance];
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];
        UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
    };
    _instance.onFailed = ^(NSError *error) {
        WXLogDebug(@"%@", @"Render onFailed...");
    };
    _instance.renderFinish = ^(UIView *view) {
        WXLogDebug(@"%@", @"Render Finish...");
    };
    _instance.updateFinish = ^(UIView *view) {
        WXLogDebug(@"%@", @"Update Finish...");
    };
    // 读取js文件
    NSString *jsURl = [[NSBundle mainBundle] pathForResource:@"helloWeex"ofType:@"js"];
    NSURL *URL = [NSURL fileURLWithPath:self.weexUrl];
    [_instance renderWithURL:URL options:@{@"bundleUrl":URL.absoluteString} data:nil];
}

怀着激动的心，运行