Weex系列(3) —— 单页面还是多页面

目录

• 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、不能按需加载对应页面js
3、整个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页面不多、轻量等，完全也是可以用单页面模式的。

最后如果大家有一点点喜欢，对你有一点点的帮助，欢迎点赞收藏啊。