上一篇写了Weex的开发环境搭建Weex开发之-开发环境搭建，接下来我们来写一个Hello Weex
首先我们创建一个Weex项目,使用下面的命令
代码语言：javascript复制weex create WeexDemo创建好后我们在src目录下新建一个hello文件夹。然后新建一个helloWeex.vue
代码语言：javascript复制<template>
<div>
<image class="logo" src="https://gimg2.baidu.com/image_search/src=http://aliyunzixunbucket.oss-cn-beijing.aliyuncs.com/jpg/13c81fbf59dad92deb4970622f10dfc1.jpg?x-oss-process=image/resize,p_100/auto-orient,1/quality,q_90/format,jpg/watermark,image_eXVuY2VzaGk=,t_100&refer=http://aliyunzixunbucket.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调用
代码语言：javascript复制 weex compile helloWeex.vue distWeex是如何集成到iOS的这里就忽略了，网上有很多集成的文章。如果不会的话执行下面的命令
代码语言：javascript复制weexpack platform add ios //安装iOS模板 执行过后会在WeexDemo-> platforms->ios目录下面生成一个iOS的demo 工程
我们把刚才生成的helloWeex.js文件拷贝到ios 工程的bundlejs文件夹。
代码语言：javascript复制- (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图片不显示问题
