内容简介:Hello World项目之后就在想着这个系列接下来该怎么写,那就先简单拟个目录吧,一方面督促自己能坚持下去,一方面如果大家有兴趣的话,也请多多关注我的专栏,顺手点个赞啊~~大致就是这个顺序吧,可能会微调,那下面就开始这一章吧。标题上加了官网怎么集成Weex到已有应用的链接,里面提到了很重要的入口方法。
Hello World项目之后就在想着这个系列接下来该怎么写,那就先简单拟个目录吧,一方面督促自己能坚持下去,一方面如果大家有兴趣的话,也请多多关注我的专栏,顺手点个赞啊~~
目录
- Weex系列(序) —— 总要知道原生的一点东东(iOS)
- Weex系列(序) —— 总要知道原生的一点东东(Android)
- Weex系列(1) —— Hello World项目
- Weex系列(2) —— 页面跳转和通信
- [Weex系列(3) —— 单页面还是多页面]
- [Weex系列(4) —— 老生常谈的三端统一]
- [Weex系列(5) —— 封装原生组件和模块]
- [Weex系列(6) —— css相关小结]
- [Weex系列(7) —— web组件和webview]
- [Weex系列(8) —— 是时候简析一下流程原理了]
- [Weex系列(9) —— 踩坑填坑的集锦]
- [Weex系列(10) —— 先这么多吧想到在写。。。]
大致就是这个顺序吧,可能会微调,那下面就开始这一章吧。
入口
标题上加了官网怎么集成Weex到已有应用的链接,里面提到了很重要的入口方法。
iOS
NSURL *URL = [self testURL: [self.url absoluteString]]; NSString *randomURL = [NSString stringWithFormat:@"%@%@random=%d",URL.absoluteString,URL.query?@"&":@"?",arc4random()]; [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
这是前一篇用weex脚手架初始化的helloworld项目,在WXDemoViewController.m的render方法里面可以看到这段代码。
然后重点来了, weex.config.bundleUrl的值 :1、取得是上面options的bundleUrl值2、如果这个值不填,取得就是我们赋给renderWithURL的url地址。 所以如果我们加载服务器上的一个页面js,然后这个页面又想跳回到本地的一个页面js ,那么在服务器页面取bundleUrl的时候取得就是http的一个地址,是取不到我们想要跳到本地页面js绝对前缀地址的,有点绕,最后就讲讲我们App的思路吧。我做的两个App页面全部都是用vue写的,所以首页、tab页肯定的页面js肯定是的打在包里面的,我们也有做过拉新的活动页,这个页面就可以放在服务器上,支持热更新啊,就遇到了上面的跳转问题,我是全局取了一个bundlejs的绝对地址,在服务器上的页面也就是我们的拉新活动页面里面直接用这个地址就跳回到本地的页面了
- (void)renderWithURL:(NSURL *)url options:(NSDictionary *)options data:(id)data { if (!url) { WXLogError(@"Url must be passed if you use renderWithURL"); return; } self.needValidate = [[WXHandlerFactory handlerForProtocol:@protocol(WXValidateProtocol)] needValidate:url]; WXResourceRequest *request = [WXResourceRequest requestWithURL:url resourceType:WXResourceTypeMainBundle referrer:@"" cachePolicy:NSURLRequestUseProtocolCachePolicy]; [self _renderWithRequest:request options:options data:data]; [WXTracingManager startTracingWithInstanceId:self.instanceId ref:nil className:nil name:WXTNetworkHanding phase:WXTracingBegin functionName:@"renderWithURL" options:@{@"bundleUrl":url?[url absoluteString]:@"",@"threadName":WXTMainThread}]; }
Android
可以在WXSDKInstance.java里面可以看到
render(pageName,template,options,jsonInitData,flag);
renderByUrl(pageName,url,options,jsonInitData,flag);
安卓和iOS基本类似,但是这儿有两个方法,官网的文档是render,这一个render害死人啊,不过用weex脚手架初始化的项目用的是renderByUrl,所以如果官网直接用脚手架开发的,躲过一劫啊。
可以看到这两个方法就差了第二个参数,下面是官网的代码,用render方法的时候, 第二个参数里面得用WXFileUtils.loadFileContent这个方法,而且如果option不填的话bundleUrl是取不到js地址?后面我们加的参数的
/** * WXSample 可以替换成自定义的字符串,针对埋点有效。 * template 是.we transform 后的 js文件。 * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。 * jsonInitData 可以为空。 * width 为-1 默认全屏,可以自己定制。 * height =-1 默认全屏,可以自己定制。 */ mWXSDKInstance.render("WXSample",WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
下面就来说说几种常见的跳转吧
Native -> Weex
也就是用开头我们提到的两个方法,然后把我们的bundlejs地址传入就可以打开Weex页面了
Weex -> Native
这个我这边用的很少,大概思路就是,拦截处理,iOS用Scheme、[[UIApplication sharedApplication] openURL:weburl];吧,Android用intent-filter吧。
Weex -> Weex
大家在我的helloworld那篇bundlejs小节里面有一个路径截图,可以对比代码参考一下,下面我也把iOS和Android的bundlejs路径图截出来了。
const device = weex.config.env; getBaseUrl(url) { if (device.platform === 'iOS') { nativeBase = url.substring(0, bundleUrl.lastIndexOf('/') + 1); } else { nativeBase = 'file://assets/dist/'; } } Weex页面A: Weex页面B的地址BUrl=getBaseUrl(weex.config.bundleUrl)+B.js navigator.push({url:BUrl}, function(e) {});
webview -> Weex
这也是比较常遇到的一个跳转,大概思路和Weex跳原生类似,也是一个拦截处理,这一块就放在后面Weex系列(7) —— web组件和webview这个章节讲吧。
页面通信这块用的比较多的大概有三种。
bundlejs路径地址传参
就如标题描述的一样,weex.config.bundleUrl拿到类似A.js?a=1&b=2,和解析网页地址一样,拿到A传给B的a、b后面的值。
BroadcastChannel
我们在B页面操作完成之后,navigator.pop()之后回到A页面,希望A页面的button状态改变,因为页面是栈式操作,A页面不会自动刷新,可以用Weex提供的这个BroadcastChannel通道来解决,具体操作,大家点击标题就可以了解了。
storage
感觉这个大家应该非常熟悉,对,Weex也提供给我们了,我们可以愉快的在页面上使用了。
globalevent
最后还是提一下这个globalEvent,Weex和原生通过这个可以通信,这个我们用到的还是挺多的,大家也可以去官网了解一下呦。
就这么多吧,欢迎大家关注我的专栏啊,如果有一点点喜欢,也请点个赞啊~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 小程序中h5页面onShow实现及跨页面通信方案
- 页面间通信与数据共享解决方案简析
- 网络通信2:TCP简单通信
- 网络通信3:TCP交互通信
- vue页面跳转后返回原页面初始位置方法
- Flutter 三种方式实现页面切换后保持原页面状态
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Android编程权威指南(第2版)
Bill Phillips、Chris Stewart、Brian Hardy、Kristin Marsicano / 王明发 / 人民邮电出版社 / 2016-5 / 109.00 元
Big Nerd Ranch是美国一家专业的移动开发技术培训机构。本书主要以其Android训练营教学课程为基础,融合了几位作者多年的心得体会,是一本完全面向实战的Android编程权威指南。全书共34章,详细介绍了8个Android 应用。通过这些精心设计的应用,读者可掌握很多重要的理论知识和开发技巧,获得最前沿的开发经验。 如果你熟悉Java语言,或者了解面向对象编程,那就立刻开始And......一起来看看 《Android编程权威指南(第2版)》 这本书的介绍吧!