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。

一、首次打开白屏时间长
二、不能按需加载对应页面js
三、整个app使用相同的执行环境，隐患不少等

通常app都是越作越大，越作越复杂，想一想是否是有点可怕呢。
因此官网也是引导咱们集成Weex到已有的app。

多页面应用

其实原生app本就是多页面的场景，比如浏览器能够开不少窗口，上面那个例子就只是在一个窗口里来回折腾。
说了这么多，那上面那个例子的底部tab一、二、3怎么实现呢，对，这就是多页面的成本，应该有好多跟咱们同样，彻底用Weex开发出一个从无到有的app，考虑了不少，底部这块咱们仍是决定用原生去作，这块咱们是找了原生开发同窗去作了一些支持的，这块听说是原生开发很基础很基础的一部分，大概半天就能搞定，但是后续的扩展性、性能优化、延展性等就好说多了，下面仅提供咱们这边的一个思路。

• iOS: UITabBarController + UIViewController 把tab一、二、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页面很少、轻量等，彻底也是能够用单页面模式的。

最后若是你们有一点点喜欢，对你有一点点的帮助，欢迎点赞收藏啊。