全栈之路-微信小程序-架构总览
第一阶段是用来学习小程序开发的,这个就相当于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)接口的灵活性和可维护性
三个问题从三个维度综合比较的话,如图:
重点的话,这里着重考虑的应该是http请求了多少次数据库的查询这个维度,因为当用户数量庞大的时候,减少一次数据库的查询,为整个项目的性能提升是很有帮助的,但是灵活性和可维护性也是不可或缺的一个点,综合考虑之下,应该是有选择性的合并http请求
补充:这里还介绍了一个JavaScript中的函数式编程,因为一直做的是Java项目,对于这个函数式编程,没有太多的了解,具体有什么优点和缺点,不是很清楚,但是在JDK8 提供了函数式编程,其实就是那种箭头函数,感觉用起来很方便,以后需要重视一下!
举个小例子,函数式编程的优势之处:
// 普通的从数组中选取特定的元素代码
let themeA = null;
for (let theme of themes){
if (theme.name == 't-1'){
themeA = theme
}
} // 函数式编程的代码
const themeA = themes.find(t => t.name === 't-1')
很显然,函数式编程的代码简洁并且可读性更好啊,但是有什么缺点的话,以我现在的水平还是不是很清楚,适当补补这个知识点!
2019年11月1日10:51:01 补充,未完待续...
3、sku的开发
sku是这个项目中最难的一部分,sku的开发中存在很多的技巧以及难点,这里只是记录一下概要,详细的会单独进行记录的
(1)规格值的提取
至于规格值的提取中,大致思路是这样的:
分析接口返回的数据 --> 构建二维数组 --> 利用矩阵的转置思想处理二维数组 --> 得到数据并且进行去重
2019年12月5日10:42:49 补充,未完待续...(鬼知道一个月的时间,我干了点什么,反正没认真学习...)
全栈之路-微信小程序-架构总览的更多相关文章
- 全栈之路-微信小程序-SKU开发(代码)
SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几 ...
- 全栈之路-微信小程序-SKU开发(分析)
SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看! 一.从思路说起 1.SK ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 全栈开发工程师微信小程序-上(下)
全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...
- 全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...
- 全栈开发工程师微信小程序 - 上
全栈开发工程师微信小程序-上 实现swiper组件 swiper 滑块视图容器. indicator-dots 是否显示面板指示点 false indicator-color 指示点颜色 indica ...
- 全栈开发工程师微信小程序-下
app.json { "pages": ["pages/index/index"] } index.wxml <text>Hello World&l ...
随机推荐
- leetcode-40-组合总和②
题目描述: 方法一:回溯 class Solution: def combinationSum2(self, candidates: List[int], target: int) -> Lis ...
- 阿里云ECS发送邮件失败
阿里云发送SMTP邮件失败 N多测试发现 阿里云服务器不能用25端口发邮件,配置465端口阿里云发送邮件是成功的 修改mail.rc 里的smtp 端口为465 配置如下 set from=*** ...
- RabbitMQ 连接不上
问题 [org.springframework.amqp.AmqpIOException: java.io.IOException] 解决 username: guest password: gues ...
- Unity 手机屏幕适配
////如有侵权 请联系我进行删除 email:YZFHKM@163.com 1.游戏屏幕适配 屏幕适配是为了让我们的项目能够跑在各种电子设备上(手机,平板,电脑) 那么了解是适配之前首先要了解两个知 ...
- TopCoder[SRM513 DIV 1]:PerfectMemory(500)
Problem Statement You might have played the game called Memoria. In this game, there is a board ...
- SpringCloud学习笔记(六):Feign+Ribbon负载均衡
简介 官网解释: http://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-feign Feign是一个声明式WebS ...
- MindManager全部快捷键(官方英文文档+中文翻译)
MindManager全部快捷键 [中文翻译版] ------------------------------------------------------------- 导图文件 创建一个新的导图 ...
- Java中循环体的初步了解以及另一种随机数的获取方法
Math中的相关操作 随机数 Java中除了可以直接导入Random类,获取随机数,还可以通过本身自带的Math方法去获取随机数.Math.random()可以产生随机小数,区间范围为[0.0,1.0 ...
- 工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox
原文:工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox 1. 背景 因为最近在使用wpf开发桌面端应用,在查看页面需要把TextBox和Combox等控件设置为只读的.原本是个很简 ...
- JS规则 确定你的存在(变量声明) 声明变量语法: var 变量名; 一次声明多个,中间用逗号隔开var num1,mun2 ;
确定你的存在(变量声明) 我们要使用盒子装东西,是不是先要找到盒子,那在编程中,这个过程叫声明变量,找盒子的动作,如何表示: 声明变量语法: var 变量名; var就相当于找盒子的动作,在JavaS ...