全栈之路-微信小程序-架构总览

  第一阶段是用来学习小程序开发的,这个就相当于PC端的网站吧,只不过现在依靠微信强大的流量来将业务搬移到小程序中,对于企业来说,这是一种很好的发展方向,既减少了开发成本,又减少了推广成本,小程序是很被人看好的,很值得去学习的,主要是写风袖小程序的架构中的特点,梳理一下,并且记录一下电商小程序中的一些特有的知识点,增加点专业的知识。

一、首页

  这个是打开小程序后,首先呈现出来的页面,也是包含了几乎所有的你想给用户展示的,如何将这个首页设计好,这也决定了第一印象吧,第一印象很重要,首页往往是入口类的,这个地方往往是吸引人的眼球的,但是这里面会有很多划分的,我们往往会将入口分为很多种类,方便服务端进行数据库表的设计,易于后期的维护,在电商中,数据库表的设计是非常重要的,很多技巧的东西,这个技巧随着课程的进行,慢慢的积累吧,来学习一下风袖中的首页的排布特点:

1、Banner入口

Banner入口是很复杂的,因为它是多变的,可以设计成很多种选择,比如可以设计成主题入口、活动入口、分类入口,甚至可以设计成商品入口等等,所以Banner入口是单独的一部分,与其他入口区分出来的,我想的是在后台维护的时候,这部分内容应该是单独维护的

2、主题入口

主题入口,当用户点击进去之后就是跟主题相关的商品的列表了

3、分类六宫格

这个就简单了,就是商品的分类信息的展示了,点击进去之后是商品列表的展示

4、活动入口(优惠券入口)

这个在设计图上其实是优惠券入口的,但是其实优惠券也是活动的一种,这里把优惠券归于活动入口之中

优惠券活动详解:(2019年10月30日10:14:40 临时添加)

优惠券是分类别的,你像满减类型的优惠券,折扣类型的,这也会设计一些优惠券的使用条件,像那种全场券还有就是那些品类的券,就是只有在特定种类的商品上才能使用,所以,针对优惠券的这些特点,前端需要做的主要是根据这些,进行核算的功能,一些设计,复杂的业务主要是后端进行处理的,最后,优惠券的使用和领取是两个不同的概念,这个需要进行区分处理的

5、商品长滚动,瀑布流列表

这里是瀑布流展示商品的列表,当然这个是存在分页的,当用户下拉商品列表的时候,可以连续加载更多商品的,至于瀑布流展示的效果如何实现,这里不做过多的说明

6、主题和Banner混合入口

这个是将主题入口和Banner入口混合在一起展示的,在设计图中其实是在热卖榜单那个专题中,上面是主题入口,下面部分是Banner入口(这里是展示商品的Banner)

2019年10月18日15:43:31 未完待续...

二、项目结构

  这个项目结构就是项目的总体的一个如何分层,这里是写的是前端小程序的项目结构,后续还会介绍spring boot项目的结构,等到学习到那里在补充一下。

1、小程序项目分层

这里有一个设计原则,在项目的开始,就是不要把复杂的业务逻辑放在pages文件夹中的js文件中,页面中的js文件就是主要来做数据绑定的,我们将复杂的业务逻辑单独存放与一个抽象出来的model层,其实按照MVC分层模式,pages中的js文件相当于Controller层,就是只是处理数据的分发以及页面中数据的显示,至于如何获取到的数据并不关心,交给model去处理

增加内容:方法命名的规则

(1)获取首页主题的方法,这个方法的命名是根据位置来命名的,比如顶部的获取theme的方法是:getHomePositionA() home->主页 positionA->最上面第一个主题的位置

2019年10月22日14:37:40 未完待续...

2、请求过多的优化

前端页面向服务器发送请求的优化主要存在三种问题(这里以home页面的数据加载来看):

(1)每个数据 都设计成一个http请求

(2)整个home页面需要加载的数据 只设计成一个http请求

(3)有选择性的将一部分请求合并成一个

针对这三个问题,可以从三个维度来综合考虑,来决定如何取舍:

(1)http请求数量

(2)http请求进行了多少次的数据库查询

(3)接口的灵活性和可维护性

三个问题从三个维度综合比较的话,如图:

全栈之路-微信小程序-架构总览

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzwgff.html