当前位置:首页 > 新闻资讯 > 小程序开发

简易商城小程序全栈开发(mpvue+koa+mongodb)

日期:2018-07-27 20:47 编辑:leo 来源:互联网 标签:商城小程序开发 浏览:1449次

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

技术栈

前端: 微信小程序、mpvue

后端:koa

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

商城小程序开跑

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

成果分享

一、前台页面及功能展示

首页:




加入购物车:



购物车全选结算:



地址管理:



1. 谈组件封装

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

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

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

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

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

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

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

**2.Class、Style的绑定 **

在不同父组件中引用同一子组件时,但是各自需要接收绑定的动态样式去呈现不同的样式,在绑定css style样式这一关上,踩了个大坑:mpvue居然不支持用object的形式传style,起先处于样式一直上不去的抓狂当中,网上对于mpvue这方面的细节也少之又少,后来查找了许多地方,发现class和style的绑定都是不支持classObj和styleObj形式,就尝试用了字符串,果然...改代码改到怀疑人生,结果你告诉我人生起步就是错误,怎能不心痛?...

3. “v-for嵌套”陷阱

在做vue项目的时候难免会用到循环,需要用到index索引值,但是v-for在嵌套时index没办法重复用,内循环与外循环不能共用一个index。

4.this指向问题与箭头函数的应用

这是vue文档里的原话:All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.

意思是:在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它的Vue实例,即(new Vue)。 mpvue里同理。 我们都知道,生命周期函数中的this都是指向Vue实例的,因此我们就可以访问数据,对属性和方法进行运算。

5.onLoad与onShow

在进行首页点击商品跳转到详情页时,onLoad()无法获取更新数据。

首先虽然onLoad: function (options) 这个是可以接受到值的,但是这个只是加载一次,不是我想要的效果,我需要在本页面(不关闭的情况下)到另外一个页面在跳转进来,接收到对应商品的数据。

所以需要将代码放在onshow内部, 在每次页面加载的时候都会进行当前状态的查询,查询对应数据的子对象,更新渲染到详情页上。

了解小程序onLoad与onShow生命周期函数:

onLoad:生命周期函数–监听小程序初始化,当小程序初始化完成时,会触发 onLoadh(全局只触发一次)。

onShow:生命周期函数–监听小程序显示,当小程序启动,或从后台进入前台显示,会触发 onShow。

有关“后台数据库及数据存取”可以查看原文链接

作者:mosa

原文:https://juejin.im/post/5b548ce8e51d45191d79f8a6?utm_source=tuicool&utm_medium=referral

延伸阅读:

本站文章,部分来源互联网,部分为原创,如有侵权请联系我们,如您转载请注明来自:https://www.e1000u.net/news/86.html