美文网首页
Weex开发之-Hello Weex

Weex开发之-Hello Weex

作者: 赵哥窟 | 来源:发表于2021-09-02 16:46 被阅读0次

上一篇写了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图片不显示问题

相关文章

  • Weex开发之-Hello Weex

    上一篇写了Weex的开发环境搭建Weex开发之-开发环境搭建[https://www.jianshu.com/p/...

  • weex 环境搭建一 weex-toolkit

    weex开发, 安装nodejs 、weex-toolkit 、weex-pack weex官网文档:http:/...

  • (26)打鸡儿教你Vue.js

    weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...

  • Weex项目构建流程

    Weex-Toolkit Weex-Toolkit 主要用于快速构建 weex 的项目并且开发和调试。 Weex...

  • Weex从入门到放弃

    Weex从入门到放弃 大纲 Hello World Weex基本控件listimageslidexxx Vue2....

  • [个人记录]Weex入坑

    Weex入门 官方文档 文档iOS集成 开发环境配置 安装node 安装weex开发工具 验证 weex-tool...

  • weex开发框架的搭建

    [TOC] weex的简单上手 参考文档 weex开发文档 安装weex-toolkit npm install ...

  • weex常见问题解析

    什么是 Weex? Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。 Weex 致力于使开发者...

  • weex入门-Write Once, Run Everywher

    什么是 Weex ? Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。 Weex 致力于使开发者...

  • Weex文章合集

    网易严选App感受Weex开发(已完结) Weex 是如何在 iOS 客户端上跑起来的 iOS 混合开发 —— weex

网友评论

      本文标题:Weex开发之-Hello Weex

      本文链接:https://www.haomeiwen.com/subject/cqkcwltx.html