简易商城小程序全栈开发[mpvue+koa+mongodb]，微信小程序前后端开发教程

接触小程序有一段时间后并且多多少少做了一些项目之后又开始了vue的旅程受其核心思想的影响品牌推广公司受其核心思想的影响对数据/状态管理、组件化、跨平台等都有较高的追求mpvue 是一个使用 Vue.js开发小程序的前端框架由此开始了mpvue踩坑之旅想在提高代码可读性的同时也增加一点vue.js的开发体验。

前端： 微信小程序、mpvue

数据库：mongodb 数据库可视化工具：Robo3T

一个基本的商城小程序包含了前端的首页、分类、购物车、我的(订单)四个tab页后端的数据定义、分类、和存取。各有其色我在下面就相应介绍一些主要功能、对比原生小程序和vue.js所踩到的坑还有后端数据库的功能应用。 想了解或者有何问题都可以去 作品源码 中了解哦。

加入购物车：

购物车全选结算：

地址管理：

1. 谈组件封装

举个栗子说首页由三部分组成:头部轮播推荐+中间横向滑动推荐+纵向滚动商品list。这三部分几乎是所有商城类app必需的功能了。头部的轮播推荐、中间的横向滑动式推荐的封装我们都知道诸如此类的功能组件在各app上基本都少不了最初学vue最先有所体会的便是组件代码复用性高的特点在进行一些组件复用迁移至别的组件或页面时可能都不需要改动代码或者改动少量代码就可以直接使用可以说是相当方便了对于mpvue组件内仍然支持原生小程序的swiper与scroll两者兼容后对于熟知小程序和vue的开发者这项功能可以很高效率地完成。

最后主页面文件就是由一个个组件组成可读性很强了对于初学者来说模块封装的思想是首先就得具备的了。

不过关于组件封装与组合的问题由于最近有研究vue性能优化和用户体验的一些知识点考虑了一个比较严肃的问题：

先看一下常见的vue写法：在html里放一个app组件app组件里又引用了其他的子组件形成一棵以app为根节点的组件树：

而这种做法就引发了性能问题要初始化一个父组件必然需要先初始化它的子组件而子组件又有它自己的子组件。那么要初始化根标签就需要从底层开始冒泡将页面所有组件都初始化完。所以我们的页面会在所有组件都初始化完才开始显示。

这个结果显然不是我们要的用户每次点开页面还要面对一阵子的空白和响应因为页面启动后不止要响应初始化页面的组件还有包含在app里的其他组件这样严重拖慢了页面打开的速度。

更好的结果是页面可以从上到下按顺序流式渲染这样可能总体时间增长了但首屏时间缩减在用户看来页面打开速度就更快了。网上一些办法大同小异各有优缺点所以...本人也在疯狂试验中静待好消息。

标签： divltgt组件