面试之家只是为了学习和交流使用Weex,题库等内容不可用于商业项目
在Weex开发中,可以使用单页面开发模式,和混合开发模式,单页面开发中,所有的页面可以用路由的方式来跳转,但是体验达不到原生页面切换的标准,个人觉得正确使用Weex
的方式还是混合开发,如此一来,WeexSDK
提供的导航模块就不能满足我们的需求了,所以就有了我们的自定义WXNavigatorHandle
Native端
-
创建基类,
创建
WXNavigatorHandle
继承NSObject
,引入头文件#import <WXNavigationProtocol.h>
,参照WeexSDK
实现协议里的方法 -
修改协议方法实现
- (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
属性来区分跳转Weex
、Web
、Native
,默认跳转Weex
-
跳转Weex界面
- (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
注意 参数animated
是String
类型写其它类型崩溃
- 跳转原生界面
因为Weex
无法像原生跳转一样,去实例对象,并为对象赋值,所以这个地方需要特殊的处理一下
运用我们iOS的Runtime
来动态匹配参数
- (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
,然后初始化
id target = [[targetClass alloc] init];
if (target == nil) {
[SVProgressHUD showErrorWithStatus:@"暂时不能打开"];
return;
}
使用Runtime
的class_copyPropertyList
来获取所有的属性变量,然后遍历v
对象,如果v
对象中的key
包含在对象的参数中,就可以使用KVC
赋值,达到动态跳转的目的
Weex端 使用
先引入模块
var navigator = weex.requireModule('navigator');
然后进行跳转
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
跳转任意原生页面的能力1
网友评论