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

时间 2019-11-08

标签 weex 系列页面通讯繁體版

原文原文链接

Hello World项目以后就在想着这个系列接下来该怎么写，那就先简单拟个目录吧，一方面督促本身能坚持下去，一方面若是你们有兴趣的话，也请多多关注个人专栏，顺手点个赞啊~~css

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) —— 先这么多吧想到再写。。。]

大体就是这个顺序吧，可能会微调，那下面就开始这一章吧。html

入口

标题上加了官网怎么集成Weex到已有应用的连接，里面提到了很重要的入口方法。vue

iOSjava

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的值：一、取得是上面options的bundleUrl值二、若是这个值不填，取得就是咱们赋给renderWithURL的url地址。因此若是咱们加载服务器上的一个页面js，而后这个页面又想跳回到本地的一个页面js，那么在服务器页面取bundleUrl的时候取得就是http的一个地址，是取不到咱们想要跳到本地页面js绝对前缀地址的，有点绕，最后就讲讲咱们App的思路吧。我作的两个App页面所有都是用vue写的，因此首页、tab页等页面js确定是得打在包里面的，咱们也有作过拉新的活动页，这个页面就能够放在服务器上，支持热更新啊，就遇到了上面的跳转问题，我是全局取了一个bundlejs的绝对地址，在服务器上的页面也就是咱们的拉新活动页面里面直接用这个地址就跳回到本地的页面了web

- (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}];
}

Androidapache

在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地址?后面咱们加的参数的json

/**
 * 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);

下面就来讲说几种常见的跳转吧segmentfault

Native -> Weex

也就是用开头咱们提到的两个方法，而后把咱们的bundlejs地址传入就能够打开Weex页面了服务器

Weex -> Native

这个我这边用的不多，大概思路就是，拦截处理，iOS用Scheme、[[UIApplication sharedApplication] openURL:weburl];吧，Android用intent-filter吧。weex

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了

webview -> Weex

这也是比较常遇到的一个跳转，大体思路和Weex跳原生相似，也是一个拦截处理，这一块就放在后面Weex系列(7) —— web组件和webview这个章节讲吧。

页面通讯这块用的比较多的大概有下面几种。

bundlejs路径地址传参

就如标题描述的同样，weex.config.bundleUrl拿到相似A.js?a=1&b=2，和解析网页地址同样，拿到A传给B的a、b后面的值。

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

目录

入口

Native -> Weex

Weex -> Native

Weex -> Weex

webview -> Weex

bundlejs路径地址传参

BroadcastChannel

storage

globalevent