Lei's Blog

Weex重写WXNavigatorHandle

面试之家只是为了学习和交流使用Weex,题库等内容不可用于商业项目

Weex开发中,可以使用单页面开发模式,和混合开发模式,单页面开发中,所有的页面可以用路由的方式来跳转,但是体验达不到原生页面切换的标准,个人觉得正确使用Weex
的方式还是混合开发,如此一来,WeexSDK提供的导航模块就不能满足我们的需求了,所以就有了我们的自定义WXNavigatorHandle

Native端

  1. 创建基类,

    创建WXNavigatorHandle继承NSObject,引入头文件#import <WXNavigationProtocol.h>,参照WeexSDK实现协议里的方法

  2. 修改协议方法实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    - (void)pushViewControllerWithParam:(NSDictionary *)param completion:(WXNavigationResultBlock)block withContainer:(UIViewController *)container {
    if (0 == [param count] || !param[@"url"] || !container) {
    [self callback:block code:MSG_PARAM_ERR data:nil];
    return;
    }
    if ([param[@"type"] isEqualToString:@"weex"]) {
    [self pushWeexController:param completion:block withContainer:container];
    } else if ([param[@"type"] isEqualToString:@"native"]) {
    [self pushNavtiveController:param completion:block withContainer:container];
    } else if ([param[@"type"] isEqualToString:@"web"]) {
    [self pushWeexController:param completion:block withContainer:container];
    } else {
    [self pushWeexController:param completion:block withContainer:container];
    }
    }

    在传参中定义一个 Type属性来区分跳转WeexWebNative,默认跳转Weex

  3. 跳转Weex界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
- (void)pushWeexController:(NSDictionary *)param completion:(WXNavigationResultBlock)block
withContainer:(UIViewController *)container {
NSString *urlPath = param[@"url"];
if ([param[@"type"] isEqualToString:@"web"]) {
if ([AppConfig isServerJS]) {
urlPath = [NSString stringWithFormat:@"%@/Web/webview.js?weburl=%@",DOCUMENT_URL,urlPath];
} else {
urlPath = [NSString stringWithFormat:@"%@/Web/webview.js?weburl=%@",BUNDLE_RESOURCE_URL,urlPath];
}
} else {
if (!([urlPath hasPrefix:@"file://"] || [urlPath hasPrefix:@"http://"] || [urlPath hasPrefix:@"https://"])) {
if ([AppConfig isServerJS]) {
urlPath = [NSString stringWithFormat:@"%@%@",DOCUMENT_URL,urlPath];
} else {
urlPath = [NSString stringWithFormat:@"%@%@",BUNDLE_RESOURCE_URL,urlPath];
}
}
}
BOOL animated = YES;
NSString *obj = [[param objectForKey:@"animated"] lowercaseString];
if (obj && [obj isEqualToString:@"false"]) {
animated = NO;
}
WXBaseViewController *vc = [[WXBaseViewController alloc]initWithSourceURL:[NSURL URLWithString:urlPath]];
vc.hidesBottomBarWhenPushed = YES;
[container.navigationController pushViewController:vc animated:animated];
[self callback:block code:MSG_SUCCESS data:nil];
}

Weex的发展一是为了Write Once, Run Everywhere,二是为了能够起到热更新的作用,所以我们的bundlejs是要能动态替换的,所以这里用[AppConfig isServerJS]来区分是加载的本地的JS,还是加载服务器下发的JS

注意 参数animatedString类型写其它类型崩溃

  1. 跳转原生界面

因为Weex无法像原生跳转一样,去实例对象,并为对象赋值,所以这个地方需要特殊的处理一下
运用我们iOSRuntime来动态匹配参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- (void)pushNavtiveController:(NSDictionary *)paramDic completion:(WXNavigationResultBlock)block
withContainer:(UIViewController *)container {
if (!([paramDic isKindOfClass:[NSDictionary class]])) return;
NSDictionary *param = paramDic[@"param"];
Class targetClass = NSClassFromString(param[@"n"]);
id target = [[targetClass alloc] init];
if (target == nil) {
[SVProgressHUD showErrorWithStatus:@"暂时不能打开"];
return;
} else {
unsigned int outCount = 0;
NSMutableArray *keyArray = [NSMutableArray array];
objc_property_t *propertys = class_copyPropertyList([targetClass class], &outCount);
for (unsigned int i = 0; i < outCount; i ++) {
objc_property_t property = propertys[i];
NSString * propertyName = [NSString stringWithCString:property_getName(property) encoding:NSUTF8StringEncoding];
[keyArray addObject:propertyName];
}
free(propertys);
NSDictionary *parameterDic = param[@"v"];
if (parameterDic.allKeys.count > 0) {
NSArray *array = parameterDic.allKeys;
for (NSInteger i = 0; i < array.count; i++) {
NSString *key = array[i];
if ([keyArray containsObject:key]) {
[target setValue:parameterDic[key] forKey:key];
}
}
}
[container.navigationController pushViewController:target animated:YES];
[self callback:block code:MSG_SUCCESS data:nil];
}
}

解释一下这段代码

首先固定号参数格式, 参数对象中在包含一个对象,用于获取类名,和类的参数

使用NSClassFromString拿到相关的Class,然后初始化

1
2
3
4
5
id target = [[targetClass alloc] init];
if (target == nil) {
[SVProgressHUD showErrorWithStatus:@"暂时不能打开"];
return;
}

使用Runtimeclass_copyPropertyList来获取所有的属性变量,然后遍历v对象,如果v对象中的key包含在对象的参数中,就可以使用KVC赋值,达到动态跳转的目的

Weex端 使用

先引入模块

1
var navigator = weex.requireModule('navigator');

然后进行跳转

1
2
3
4
5
6
7
8
9
10
11
didSelectRow (obj) {
let path = '/Skills/QuestionDetail.js?questionID=' + obj.number + 'and' + obj.classId + 'and' + this.dataArray.length;
const url = weex.config.bundleUrl;
navigator.push({
url: path,
animation: 'true',
type: 'weex'
}, function (callBack) {
})
}

总结

  • 实现加载内置bundlejs和下发的bundlejs的能力
  • 使用runtime达到Weex跳转任意原生页面的能力