共计 1785 个字符，预计需要花费 5 分钟才能阅读完成。
目录
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) —— 先这么多吧想到再写。。。]
时间总是过得那么快，一周又过去了。天越来越冷了，感觉跟要冬眠似的，越来越懒得动脑了，哈哈哈，下面开始进入我们的主题吧。
单页面应用
单页面应用（single page web application，SPA），大家应该很熟悉了，现在好多页面都采用的是这种模式，优缺点网上一搜一箩筐，支持的框架也有很多，react 全家桶、vue 全家桶等。
Weex 的上层语言有 vue，所以我们是不是也可以用 vue 全家桶来打造一个 App，官网的回答是可以的。
用 weex 脚手架初始化项目，选项 vue-router 后面竟然跟了一个 (not recommended) 不推荐的。
demo 如下图，这个例子很简单，就不上传代码了，其实官网有一个很典型的例子 weex-hackernews(https://github.com/weexteam/w…，用了 vuex 和 vue-router，感觉入了 weex 这个坑的（doge），应该都看过研究过这个例子吧。官网有一个 使用 Vuex 和 vue-router，大家也可以点进去看一下。
然后我们来简单分析一下吧
一个 bundlejs
上面的例子，虽然有三个 tab，还有一个 page3，感觉好多页面的样子，像 web 一样，最后打包只有一个 js，是不是感觉到一丝不对的气息，是啊，这么一个大的 app 就这么一个 js。
1、首次打开白屏时间长 2、不能按需加载对应页面 js3、整个 app 使用相同的执行环境，隐患很多等
一般 app 都是越做越大，越做越复杂，想想是不是有点可怕呢。所以官网也是引导我们集成 Weex 到已有的 app。
多页面应用
其实原生 app 本就是多页面的场景，好比浏览器可以开很多窗口，上面那个例子就只是在一个窗口里来回折腾。说了这么多，那上面那个例子的底部 tab1、2、3 怎么实现呢，对，这就是多页面的成本，应该有好多跟我们一样，完全用 Weex 开发出一个从无到有的 app，考虑了很多，底部这块我们还是决定用原生去做，这块我们是找了原生开发同学去做了一些支持的，这块据说是原生开发很基础很基础的一部分，大概半天就能搞定，可是后续的扩展性、性能优化、延展性等就好说多了，下面仅提供我们这边的一个思路。
iOS: UITabBarController + UIViewController 把 tab1、2、3.js 的路径分别赋值给 UIViewController，之前也有分析过 WXDemoViewController 大家可以去看看。
UIViewController * weexVC = [[WXDemoViewController alloc] init];((WXDemoViewController *)weexVC).url = url;
Android: 这个用的是 Fragment，网上搜 weex Fragment，会出来好多有参考价值的文章，大家可以去了解一下，我就不截图了，怕有版权之类的。
navigator
感觉这个词在我前面的文章里也是多次出现过了。是啊，底部 tab1 对应 tab1.js 渲染完页面，怎么进去到相应的 page.js 呢，就是我上一篇讲的了，用的基本就是 navigator 了，而且在 page.js 对应的页面，我们也是可以使用 vue-router 的。
这个当然是用原生的模块组件封装的，有兴趣的可以看看 WXNavigatorModule.m 这个文件，所以页面的进退、切换等效果也都是极佳的，个人感觉完全超过单页面应用。
小结
读完文章的不难发现，我的观点就是偏向于多页面应用。各有所需，大家完全可以根据自己的场景来选择，如果你的 app 页面不多、轻量等，完全也是可以用单页面模式的。
最后如果大家有一点点喜欢，对你有一点点的帮助，欢迎点赞收藏啊。
