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和原生通過這個可以通信，這個我們用到的還是挺多的，大家也可以去官網瞭解一下呦。
就這麼多吧，歡迎大家關注我的專欄啊，如果有一點點喜歡，也請點個贊啊~