美文网首页Weex
Weex iOS扩展

Weex iOS扩展

作者: 流转的时光 | 来源:发表于2017-06-12 16:49 被阅读106次

<img src='http:https://img.haomeiwen.com/i63643/3320436c00741196.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240' / width = '100%'>

Weex扩展说明

weex可扩展性,赋予了它强大的能力,它可以开放回调将部分事情交给原生去执行,也可以原生注册实体到weex中,用js去调用原生的方法,还可以将复杂的组件原生封装好给Weex调用,这一切让Weex和原生交互更加顺畅,生命力更加顽强。

Weex持有原生实体(Module 扩展)

一、代码在weex的JS线程中执行

WX_EXPORT_METHOD_SYNC 该宏标志的方法,原生的代码在weex的js线程中执行
1.xcode中创建NRDataModule类

//h文件
#import <Foundation/Foundation.h>
#import <WeexSDK/WXModuleProtocol.h>
@interface NRDataModule : NSObject <WXModuleProtocol>
@end
//m文件
@implementation NRDataModule
WX_EXPORT_METHOD_SYNC(@selector(getArray)) //js线程中执行
- (NSArray *)getArray
{
    return @[@"aaaaa",@"bbbbb",@"ccccc"];
}
@end

2.注册实体给Weex(一般在appDelegate)

//weexSDK提供的注册方法
+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
//实际调用
[WXSDKEngine registerModule:@"data" withClass:[NRDataModule class]];

3.js调用

const dataModule = weex.requireModule('data') //获取NRDataModule实体
const returnData = dataModule.getArray()   // 返回 ['aaaaa','bbbbb','ccccc']
二、代码在原生主线程中执行

WX_EXPORT_METHOD 该宏标志的方法,在原生主线程中执行代码
1.xcode中创建NRPrintDataModule类

//h文件
#import <Foundation/Foundation.h>
#import <WeexSDK/WXModuleProtocol.h>
@interface NRPrintDataModule : NSObject <WXModuleProtocol>
@end
//m文件
@implementation NRPrintDataModule
@synthesize weexInstance;//每个moudle对象被绑定到一个指定的实例上
WX_EXPORT_METHOD(@selector(printData:)) //原生主线程中执行
-(void)printData:(NSString *)data{
    NSLog(@"%@", data);
}
@end

2.注册实体给Weex

[WXSDKEngine registerModule:@"printData" withClass:[NRPrintDataModule class]];

3.js代码

const module = weex.requireModule('printData') //获取
const returnString = module.printData('test')   // 'test'

自定义module的步骤

1.自定义的module类 必须实现 WXModuleProtocol
2.必须添加宏WX_EXPORT_METHOD, 它可以被weex识别,它的参数是 JavaScript调用 module指定方法的参数
3.添加@synthesized weexInstance,每个moudle对象被绑定到一个指定的实例上
4.Module 方法会在UI线程中被调用,所以不要做太多耗时的任务在这里,如果要在其他线程执行整个module 方法,需要实现WXModuleProtocol中- (NSThread *)targetExecuteThread的方法,这样,分发到这个module的任务会在指定的线程中运行
4.Weex 的参数可以是 String 或者Map
5.Module 支持返回值给 JavaScript中的回调,回调的类型是WXModuleCallback,回调的参数可以是String或者Map

Weex回调(handler)

类似IOS中tableView的DataSource,weex中放出回调,原生这边实现该回调
例如weexSDK中没有图片下载功能,我们必须在原生代码中实现

WXImgLoaderProtocol
WXImageLoaderProtocol.h
@protocol WXImgLoaderProtocol <WXModuleProtocol>

-(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock;
@end

1.实现上述协议

@implementation WXImgLoaderDefaultImpl
#pragma mark -
#pragma mark WXImgLoaderProtocol
//使用SDWebImage 第三方组件下载
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
{
    if ([url hasPrefix:@"//"]) {
        url = [@"http:" stringByAppendingString:url];
    }
    return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {     
    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
    if (completedBlock) {
        completedBlock(image, error, finished);
    }
    }];
}
@end

2.通过WXSDKEngine 中的 registerHandler:withProtocol注册handler

+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]

Components 扩展

weex中虽然已经存在很多原生的组件,但是components扩展可以实现iOS和Android中已封装好的、复杂的组件应用到weex里面,可以预见会有更多移动端的组件被封装一层适用到weex里面
1.xcode中创建WXPopView类

#import "WXPopView.h"

@interface  WXPopView()
@property (nonatomic, strong) UIView *backgroundView;

@end

@implementation WXPopView

- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{
    self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance];
    if (self) {
        
    }
    return self;
}

- (void)viewDidLoad
{
    _backgroundView.backgroundColor = [UIColor redColor];
}

- (UIView *)loadView {
    _backgroundView = [[UIView alloc] init];
    return _backgroundView;
}
@end

2.注册组件给Weex

[WXSDKEngine registerComponent:@"myComponent" withClass:[WXPopView class]];

3.js代码

<template>
    <div>
        <myComponent style="width:750px; height:100px;" >

        </myComponent>
    </div>

</template>

相关文章

  • Weex iOS扩展

    Weex扩展说明 weex可扩展性,赋予了它强大的能力,它可以开放回调将部分事情交给原生去执行,也可以原生注册实体...

  • weex扩展ios

    native如果使用大片的weex,甚至整个app都是weex的话会及其影响性能,所以在native我们采用了单页...

  • Swift 中的 weex

    weex ios 集成参阅:Weex学习与实践:iOS原理篇 swift集成weex 首先将weexsdk集成到项...

  • Weex文章合集

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

  • Weex textarea标签自动换行扩展iOS

    weex 标签扩展 实现WEEX 标签输入框自适应高度 首先贴上我的weex代码: 通过we...

  • weex_ 安居客项目实战视频教程

    weex视频教程 weex_教程,weex_Android,weex_iOS,weex 第一季 百度网盘地址:ht...

  • weex_项目实战视频教程

    weex视频教程 weex_教程,weex_Android,weex_iOS,weex 第一季 百度网盘地址:ht...

  • [个人记录]Weex入坑

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

  • Weex是如何在Android客户端上跑起来的

    参考:Weex 是如何在 iOS 客户端上跑起来的参考:Weex SDK Android 源码解析 目录 Weex...

  • weex优秀案例

    # toutiao -weex > 基于WEEX +Vue2.0仿照今日头条的app项目(android/ios)...

网友评论

    本文标题:Weex iOS扩展

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