目录
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页面不多、轻量等，完全也是可以用单页面模式的。
最后如果大家有一点点喜欢，对你有一点点的帮助，欢迎点赞收藏啊。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108810.html
摘要：刚看到这仨页面的时候，我就想着可以用路由，做成三端统一。样式这部分真的三端基本是高度统一的，部分微调一下就可以了，也正是这样，我们后续才能迅速解决和。终于不是谈谈三端统一了，也是真的体验了一次，虽然最后有点出入，但是下次基本是没问题了。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(...
摘要：的方法在安卓底下会崩溃，结果竟然是要在里面设置正确的，因为我是用官网的脚手架搭起来的项目，不知道大家会不会遇到，改一下就可以解决问题了。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3)...
摘要：的方法在安卓底下会崩溃，结果竟然是要在里面设置正确的，因为我是用官网的脚手架搭起来的项目，不知道大家会不会遇到，改一下就可以解决问题了。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3)...
摘要：由于最开始没有一点点原生开发的经验，所以我就直接用的脚手架初始化项目。那下面我们就从最最原始的项目开始吧，序篇太枯燥，自由发挥时间开始啦。执行如下代码，最后会得到如图的项目结构。入口文件等简析进行了初始化。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello Wor...
阅读 2682·2021-09-26 10:19
阅读 2135·2021-09-24 10:27
阅读 2519·2021-09-01 10:42
阅读 2301·2019-08-29 16:09
阅读 2483·2019-08-29 15:17
阅读 1447·2019-08-29 15:09
阅读 632·2019-08-29 11:14
阅读 2300·2019-08-26 13:25
