共计 3551 个字符，预计需要花费 9 分钟才能阅读完成。
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 和原生通过这个可以通信，这个我们用到的还是挺多的，大家也可以去官网了解一下呦。
就这么多吧，欢迎大家关注我的专栏啊，如果有一点点喜欢，也请点个赞啊~
