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了