Weex系列(2) —— 頁面跳轉和通訊

Weex · 發表 2018-11-14 19:08:31

摘要： Hello World專案之後就在想著這個系列接下來該怎麼寫，那就先簡單擬個目錄吧，一方面督促自己能堅持下去，一方面如果大家有興趣的話，也請多多關注我的專欄，順手點個贊啊~~ 目錄 Weex系列(序) —— 總要知道原生的一點東東(iOS) Weex系列(序) ——...

Hello World專案之後就在想著這個系列接下來該怎麼寫，那就先簡單擬個目錄吧，一方面督促自己能堅持下去，一方面如果大家有興趣的話，也請多多關注我的專欄，順手點個贊啊~~

ofollow,noindex" target="_blank">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後面的值。

Weex系列(2) —— 頁面跳轉和通訊

目錄

入口

iOS

Android

Native -> Weex

Weex -> Native

Weex -> Weex

webview -> Weex

bundlejs路徑地址傳參

BroadcastChannel

storage

globalevent

您可能也會喜歡…