weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)

简介: weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)

博主学习weex也有一段日子了,以前写的Demo都是属于纯weex的,最多就是把所有的js文件引入Xcode项目中,通过加载本地的js文件的方式来实现项目,但也仅仅只存在一个VC,相当于是内嵌了网页的app,当然,weex的性能要好很多。

那么接下来,博主将向大家展示怎么通过weex的js文件实现不同的VC之间的交互,以及Xcode和weex的交互:


1.自定义module,实现push方法(在这样的项目环境,navagator肯定是不能用的)

#import <Foundation/Foundation.h>
#import <WeexSDK/WeexSDK.h>
@interface WXEventModule : NSObject <WXModuleProtocol>
@end
#import "WXEventModule.h"
#import "HomeBigViewController.h"
@implementation WXEventModule
@synthesize weexInstance;
WX_EXPORT_METHOD(@selector(push:))
//WX_EXPORT_METHOD(@selector(pop))
//WX_EXPORT_METHOD(@selector(present:))
//WX_EXPORT_METHOD(@selector(dismiss))
//
//WX_EXPORT_METHOD(@selector(postGlobalEvent::))
- (void)anotherOpenURL:(NSString *)url callback:(WXKeepAliveCallback)callback {
    callback(url,false);
    NSLog(@"call me");
}
- (void)openURL:(NSString *)url
{
    NSString *newURL = url;
    if ([url hasPrefix:@"//"]) {
        newURL = [NSString stringWithFormat:@"http:%@", url];
    } else if (![url hasPrefix:@"http"]) {
        // relative path
        newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
    }
    UIViewController *controller = [[HomeBigViewController alloc] init];
    ((HomeBigViewController *)controller).url = [NSURL URLWithString:newURL];
    [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
}
- (void)push:(NSString *)url
{
    [self openURL:url];
}

2.如上,push方法已经定义完毕,你可以在weex里面来直接使用了,但是在此之前需要在Xcode的Appdelegate中注册module:

//第一个名字你可以随便取,总之用的时候需要一样,后面的类名要和类名一致
    [WXSDKEngine registerModule:@"WXEventModule" withClass:NSClassFromString(@"WXEventModule")];

3.如何在weex中使用这个push方法

//这是weex里的一个方法,WXEventModule是我们注册的名字,然后直接拉起push方法
bigAction(index){
   console.log('will jump')
   weex.requireModule("WXEventModule").push("homeBig.js");
},

也许你已经注意到了,push里是一个js文件的名字,没错,这里直接穿入你要跳转的js的文件名,路径不需要了,在Xcode里面做处理;同时参数只有一个,如果需要传递参数有两种办法:


!)storage;


!!)在push中增加参数,比如:

//需要变动的地方
WX_EXPORT_METHOD(@selector(push:ids:))
- (void)push:(NSString *)url ids:(NSString *)ID
{
    [self openURL:url ];
}
//这里要提出的是如果还有其他原生需求的话这样的交互是没问题的,但是如果全是这样的js加载的界面,还是用storage的好,传过来数据会对VC造成影响,具体看下面;

4.这是重头戏,VC怎么来写?不可能我们一个js对应一个单独的VC,当然,这样写也可以,但是会很麻烦,这里分为两种情况:


!)全是js文件加载的界面;


!!)有weex的js界面,也有原生的界面;


如果有些功能需要用原生界面实现,并传递到原生界面,上面写到的传值就是最合适的方法,但是如果都是js界面则这样的传值毫无意义,因为你把从js拿到的值在新的VC再把值传给已经写好的js界面,且不说实现的问题,绕了一圈又把数据传给weex是不是很麻烦,所以weex之间传值建议storage,即使在Xcode中,因为集成了weex环境,依然支持storage,但仅限于weex的js之间。


下面来说这个VC怎么写,所有的js都用这个VC来加载:

#import <UIKit/UIKit.h>
@interface HomeBigViewController : UIViewController
@property (nonatomic, strong) NSURL *url;
@end
#import "HomeBigViewController.h"
#import <WeexSDK/WXSDKInstance.h>
@interface HomeBigViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
@property (nonatomic, assign) CGFloat weexHeight;
@property (nonatomic, assign) CGFloat top;
@end
@implementation HomeBigViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor whiteColor];
    if (!self.navigationController.navigationBar.hidden) {
        _top = CGRectGetMaxY(self.navigationController.navigationBar.frame);
    } else{
        _top = CGRectGetMaxY([[UIApplication sharedApplication]statusBarFrame]);
    }
    _weexHeight = self.view.frame.size.height - _top;
    [self render];
}
- (void)dealloc
{
    [_instance destroyInstance];
}
- (void)viewWillAppear:(BOOL)animated
{
    [self.navigationController.navigationBar setHidden:YES];
    [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault;
    self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
    self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:[UIColor blueColor]};
    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
}
- (void)render
{
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    CGFloat width = self.view.frame.size.width;
    _instance.frame = CGRectMake(self.view.frame.size.width-width,_top, width, _weexHeight);
    __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) {
        NSLog(@"failed %@",error);
    };
    _instance.renderFinish = ^(UIView *view) {
        NSLog(@"render finish");
    };
    _instance.updateFinish = ^(UIView *view) {
        NSLog(@"update Finish");
    };
    [_instance renderWithURL:_url options:@{@"bundleUrl": [NSString stringWithFormat:@"file://%@/bundlejs/components/",[NSBundle mainBundle].bundlePath]} data:nil];
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

除了对自定义module的描述,还有一个加载图片的注册,使用SDWebImage3.7.5,版本太高找不到方法:

    [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];

另外一个功能就是对weex的扩展,把原生界面内前进weex中,通过标签在weex中使用,其实都不复杂,可以看这里:http://weex-project.io/cn/guide/extend-ios.html


关于这个实现有个Demo给大家参考,不过在swift的写法里,一开始没发现,简直就是彩蛋,地址我发出来给大家参考:https://github.com/acton393/WeexOCExample


以上,学好,基本上weex算是入了个门了,接下来的问题就是封装,样式和对ES的了解了,到这里,你写的weex可以按照这种办法接入iOS项目里面了,这只是一种方式,方便做其他的原生处理,如果你自信纯weex没问题也可以直接用纯weex的包。


总结:博客写到这里,博主的weex学习道路也算告一段落了,如果你都看完了博主weex方面的博客,你也已经入门了,恭喜你,可以开始你的weex开发之路了。但这并不是终点,以后还会不定期更新,下一步,博主由于公司业务又要转战到华为的快应用开发,也许很快,关于快应用的坑和技术点博主就要开始更新了,欢迎大家阅读,一起学习。

目录
相关文章
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
548 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
88 5
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
74 4
|
3月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
97 4
|
4月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
55 1
【JavaScript】网页交互的灵魂舞者
|
4月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
130 4
|
4月前
|
Web App开发 开发框架 前端开发
移动端window.open跳转链接时,iOS没有反应的问题
【10月更文挑战第9天】在移动端使用 `window.open` 跳转链接时,iOS 可能无响应,原因是 iOS 的安全策略和弹出窗口阻止功能。解决方法包括:确保在用户交互后触发 `window.open`,将目标设置为 `_self`,使用锚点链接模拟跳转,或利用专门的移动端框架。需综合考虑这些方案以优化用户体验。
1008 61
|
5月前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
47 2
|
6月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
56 0
|
6月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
77 1

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    28
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 4
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 5
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 6
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
    143
  • 7
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
    235
  • 8
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    90
  • 9
    深入探索iOS开发中的SwiftUI框架
    145
  • 10
    ios样式开关按钮jQuery插件
    60