前言

不得不说，uniapp是个非常强大的开源框架，而且最友好的是语法基本与vue2相同，这让我用着非常得心应手，唯一不足的地方在于他的配套编辑器Hbuilder感觉不是很好用，当然，Hbuilder可以一键运行到微信开发者工具这个体验还是非常不错的，作为一个vscode选手，使用起Hbuilder，感觉各个方面都很别扭，去年写app还是用的apicloud，这个编辑器就是改的vscode，基本和vscode一模一样，版本控制也非常方便，因为有云端后台，但是吧，那会儿还是用的html5，并且还是抄的网上的模板，用html写个app页面，这难度可想而知，随便一个页面都是四五千行，还特别麻烦。今年冤大头本人又来搞大创了，决定从头好好搞张皮。

进度

写这篇文章的时候刚刚把前端搞定，后端啥的再说，反正用flask，Django也用了好多次了，想必不是啥麻烦事，且今日上班闲着没事摸鱼顺手画了一下后端api设计图（狗头）

uniapp项目结构

直接上官方定义

嫌太多没关系，上来先把pages components清空，hybrid platforms wxcomponents也删了，相信我们简单的demo用不到这些，组件还是先全放在components就好，这样就清爽多了，全部清空后再，自己慢慢加。

页面结构

相信用uniapp的人都是为了做小程序或者app吧，它的一键编译到好多个平台真的是绝绝子啊。
那么首先谈一谈软件或者小程序的页面逻辑，普遍来说，都是这种方案。

• 一个底部导航
• 三四个主页面（点击底部的导航切换的页面）
• 剩下的多个杂七杂八的分页面
  uniapp很贴心的考虑的这一点，我们可以在pages.json里面直接配置底部导航栏,但是基本上是满足不了我们花哨的需求的，比如微信小程序的中间凸起的图标，app可以但是微信小程序不支持，这就需要自定义tabbar了,方法也有很多种。

每个页面加一个tabbar

一开始我尝试的就是最无脑的，在每个页面加一个自定义底部导航栏，样式当然想做成什么样就什么样，然后定死在底部，perfect！为了良好的交互，跳转页面的同时需要导航的图标跟变化，比如颜色变化啥的，一开始还用的vuex全局变量进行跳转页面改变颜色，其实仔细想，每一个页面的底部导航栏都只有一种情况，比如第一页的导航栏，永远是第一个图标亮，这也。连导航栏动态改变都不需要考虑的，定死定死，这也太easy了，路由跳转还是用原生的switchTab跳转，只是将原生导航栏底部隐藏而已。可是这样就出现一个致命问题，那就是第一次跳转会出现闪动，这也很好理解，第一次加载时，每一页的导航栏都不是同一个，需要重新加载，问题吧也不是什么特别大的问题，但是强迫症犯了，这能有良好的用户体验吗？不能，改！

官方自定义tabbar

这个是Dcloud专门为微信小程序等设计的，但是需要自己用微信小程序语法去写一个tabbar，算了算了太麻烦

图鸟UI式tabbar

其实本来准备学微信小程序语法写tabbar的，但是突然偶然间看到了一种全新的方式，就是所有内容都放在一个页面上，所有页面都当做组件注册进来，然后tabbar的作用就是将打开的页面显示，其他页面隐藏就好

最终前端页面架构

因为本来小程序功能就不多，整个小程序加起来才几M，放在一页就是加载稍微慢一点，这样tabbar永远在这个页面上，不会切换，而且最重要的是，不需要再写四份代码了。经过测试，一点也不卡顿
搞定了tabbar，接下来就是写每一个页面了，想要的uview里面基本上都有，需要做的就是无脑缝合，但是作为一个缝合新手，还是缝了很久

最终缝合效果

完结撒花✿✿ヽ(°▽°)ノ✿