Weex系列(2) —— 页面跳转和通信

news/2024/4/22 5:44:19

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) {});
就可以跳到Weex页面B了

clipboard.pngclipboard.png

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和原生通过这个可以通信,这个我们用到的还是挺多的,大家也可以去官网了解一下呦。

就这么多吧,欢迎大家关注我的专栏啊,如果有一点点喜欢,也请点个赞啊~


https://dhexx.cn/news/show-1646352.html

相关文章

创建型模式:建造者模式

文章首发:创建型模式:建造者模式 五大创建型模式之四:建造者模式。 简介 姓名 :建造者模式 英文名 :Builder Pattern 价值观 :专治丢三落四 个人介绍 : Separate the construction of a complex…

从Vue.js谈谈前端开发的技术栈演变

2019独角兽企业重金招聘Python工程师标准>>> Vue 小结 本次串讲的主要目的在于给我们移动端的同学揭秘下目前前端开发的现状,和一些典型框架或者说是库的产生背景、以及设计思想和解决了什么样的问题。以 Vue.js 为例。此次讲解围绕以下几个方面展开&…

Number String(HDU 4055,动态规划递推,前缀和优化)

点击加号查看代码#include<bits/stdc.h>//前缀和优化版本,不易理解 using namespace std; #define ll long long const ll maxn1100; const ll mod1000000007; ll sum[maxn][maxn]; ll dp[maxn][maxn]; char str[maxn];int main() {str[0]*;str[1]*;scanf("%s"…

bootstrap风格的multiselect插件——类似邮箱收件人样式

在开发颗粒云邮箱的过程中&#xff0c;遇到了一个前端的问题&#xff0c;就是邮箱收件人的那个multiselect的input输入框。不仅能够多选&#xff0c;还要能够支持ajax搜索&#xff0c;把联系人搜索出来。就是类似下面的这个东西&#xff1a; 网上找了很多类似的插件&#xff0c…

python安装教程(Windows系统,python3.7为例)

2019独角兽企业重金招聘Python工程师标准>>> python安装教程&#xff08;Windows系统,python3.7为例&#xff09; 2018年07月02日 20:33:56 duandian01 阅读数&#xff1a;27422 标签&#xff1a; pythonpython安装python入门 1. 在python的官网下载python对应版本&…

手机黑盒测试详细介绍

2019独角兽企业重金招聘Python工程师标准>>> 1、 Release Test Purpose: 测试手机的基本功能是否实现&#xff0c;是否有进一步测试的必要性 Attention: Release Test的Test Case具有一定的典型性&#xff0c;主要是反映手机最基本功能的Test Case 本类测试只需要依…

【原创】Aptana 插件离线安装方式

2019独角兽企业重金招聘Python工程师标准>>> Aptana 网站改版后取消了eclipse 插件的zip直接下载地址&#xff0c;其实aptana 官网仍还提供aptana 插件的zip包下载不过比较隐蔽而已。很多人在线安装时候很慢有时甚至失败&#xff0c;下面提供下aptana eclipse 插件z…

EIGRP基本详细配置

下面我将详细的介绍EIGRP的基本配置&#xff01;拓扑图 如下ip地址表&#xff1a; R1 s0/0 192.168.1.1/24R2 s0/0 192.168.1.2/24 s0/1 192.168.2.2/24R3 s0/1 192.168.2.1/24 连接方式 : Router1 S0/0 <----> Router2 S0/0 Router2 S0/1 <-…

如何在没有https环境下使用webrtc

新版本的webrtc使用需要Https&#xff0c;但是在内网开发调试时&#xff0c;要配置Https环境比较麻烦&#xff0c;下面的方法是教你如何在http下使用webrtc 1&#xff0c;点桌面上的Chrome图票&#xff0c;右键->属性&#xff0c;把目票输入框中的内容换成以下内容 "C:…

汉风辅助购买地址

立即购买主要功能卡密 立即购买脚本六合一卡密 1.购买后没有看到卡密? 请在卡密购买界面有一个忘记卡密 查询卡密支付订单号 就可以查询卡密,订单号是哪个?请查看你付款的支付凭证里面查看,不知道是哪个的自己试试就行. 转载于:https://www.cnblogs.com/xgkj/p/107…