推荐下载
-
2020-05-12 浏览：737
-
2020-05-06 浏览：518
-
2020-05-08 浏览：505
-
2020-04-04 浏览：501
-
2020-05-12 浏览：495
简易商城小程序全栈开发(mpvue+koa+mongodb)
发布时间:2020-10-13接触小程序有一段时间后并且多多少少做了一些项目之后，又开始了vue的旅程，受其核心思想的影响，对数据/状态管理、组件化、跨平台等都有较高的追求，mpvue 是一个使用 Vue.js开发小程序的前端框架，由此开始了mpvue踩坑之旅，想在提高代码可读性的同时，也增加一点vue.js的开发体验。
技术栈前端： 微信小程序、mpvue
后端：koa
数据库：mongodb 数据库可视化工具：Robo3T
商城小程序开跑一个基本的商城小程序，包含了前端的首页、分类、购物车、我的(订单)四个tab页，后端的数据定义、分类、和存取。各有其色，我在下面就相应介绍一些主要功能、对比原生小程序和vue.js所踩到的坑还有后端数据库的功能应用。 想了解或者有何问题都可以去 作品源码 中了解哦。
成果分享 一、前台页面及功能展示首页：
加入购物车：
购物车全选结算：
地址管理：
1. 谈组件封装
举个栗子说，首页由三部分组成:头部轮播推荐+中间横向滑动推荐+纵向滚动商品list。这三部分，几乎是所有商城类app必需的功能了。头部的轮播推荐、中间的横向滑动式推荐的封装，我们都知道，诸如此类的功能组件，在各app上基本都少不了，最初学vue最先有所体会的，便是组件代码复用性高的特点，在进行一些组件复用迁移至别的组件或页面时，可能都不需要改动代码或者改动少量代码就可以直接使用，可以说是相当方便了，对于mpvue组件内仍然支持原生小程序的swiper与scroll，两者兼容后，对于熟知小程序和vue的开发者，这项功能可以很高效率地完成。
最后主页面文件就是由一个个组件组成，可读性很强了，对于初学者来说，模块封装的思想是首先就得具备的了。
<template> <div class="container" @click="clickHandle('test click', $event)"> <div class="swiperList"> <swiper :text="motto" :swiperList="swiperlist"></swiper> </div> <div class="navTab"> <div class="recTab"> <text> —— 为你推荐 ——</text> </div> </div> <scroll></scroll> <div class="hot"> <span> —— 热门商品 ——</span> </div> <hot :v-text="motto"></hot> <div class="fixed-img"> <img :src="fixImg" alt="" class="fix-img"> </div> </div> </template> 复制代码不过关于组件封装与组合的问题，由于最近有研究vue性能优化和用户体验的一些知识点，考虑了一个比较严肃的问题：
先看一下常见的vue写法：在html里放一个app组件，app组件里又引用了其他的子组件，形成一棵以app为根节点的组件树：
<body> <app></app> </body> 复制代码而这种做法就引发了性能问题，要初始化一个父组件，必然需要先初始化它的子组件，而子组件又有它自己的子组件。那么要初始化根标签，就需要从底层开始冒泡，将页面所有组件都初始化完。所以我们的页面会在所有组件都初始化完才开始显示。
这个结果显然不是我们要的，用户每次点开页面，还要面对一阵子的空白和响应，因为页面启动后不止要响应初始化页面的组件，还有包含在app里的其他组件，这样严重拖慢了页面打开的速度。
更好的结果是页面可以从上到下按顺序流式渲染，这样可能总体时间增长了，但首屏时间缩减，在用户看来，页面打开速度就更快了。网上一些办法大同小异，各有优缺点，所以...本人也在疯狂试验中，静待好消息。
**2.Class、Style的绑定 **在不同父组件中引用同一子组件时，但是各自需要接收绑定的动态样式去呈现不同的样式，在绑定css style样式这一关上，踩了个大坑：mpvue居然不支持用object的形式传style，起先处于样式一直上不去的抓狂当中,网上对于mpvue这方面的细节也少之又少，后来查找了许多地方，发现class和style的绑定都是不支持classObj和styleObj形式，就尝试用了字符串，果然...改代码改到怀疑人生，结果你告诉我人生起步就是错误，怎能不心痛？...
