Weex开发之-Hello Weex

上一篇写了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];
}

怀着激动的心，运行

截屏2021-09-02 16.39.25.png

额。图片怎么不显示呢。奇怪了，百度搜索了一番找到了答案
iOS14适配：Xcode12+weex图片不显示问题

于是按照这样的方法修改好后，在怀着激动的心运行。

Simulator Screen Shot - iPhone 12 Pro - 2021-09-02 at 16.42.01.png

成功了。

参考
Weex入门与进阶指南
iOS14适配：Xcode12+weex图片不显示问题