为了账号安全,请及时绑定邮箱和手机立即绑定
慕课专栏

目录

索引目录

零基础实现微信电商小程序开发

原价 ¥ 68.00

立即订阅
02 分类拆解法简介: 助你马上起飞的编程方法论
更新时间:2019-09-16 10:11:32
立志是事业的大门,工作是登堂入室的旅程。——巴斯德

在编写本专栏之前,我跟很多朋友一样(可能你也是其中之一),从来没有开发过微信小程序代码。在此之前,我已经在技术管理的岗位上好几年了,虽然负责过很多微信小程序项目,但自己从未亲自动手开发过一个小程序。

尽管如此,当我使用 “分类拆解法” 来开发本专栏的实战商业项目 “会员制社交电商小程序” 时,我还是很顺利地在工作之余用 20 多天时间就完成了整个项目的开发工作。接下来就让我们一起来看一看 “分类拆解法” 到底是什么。

先来看一个我们每天都在干的事,微信聊天。现在请与我一起打开微信,选择一个你的好友并打开与他 / 她聊天的页面(当然你也可以像我一样打开文件传输助手,免得不小心发错了消息引来朋友一个大大的问号表情)。

我们来研究一下如果要自己编写一个微信聊天页面,该怎么做呢。

非常建议各位同学在阅读以下内容前先打开微信聊天界面,一边阅读内容一边在微信聊天界面中实际操作,以便充分吸收接下来汹涌而至的庞大信息量。

1. 界面分析

首先,我们看到页面分成三个部分(我们称为 “子部件”),分别是:

顶部的昵称区域(图 1 中标记为 ① 的区域);

聊天内容显示区域(图 1 中标记为 ② 的区域);

底部的聊天内容输入区域(图 1 中标记为 ③ 的区域)。

图 1 微信聊天页面示意图

图片描述

在顶部的昵称区域我们能看到三个 “显示元素”,从左到右依次为:返回按钮(一个箭头形状的图标),聊天对象的昵称和更多操作按钮(一个三个点组成的图标)。

其中,返回按钮和更多操作按钮不论我们与谁聊天都是这个样子,我们把这类不会改变显示内容的元素叫做 “静态界面”

第三个元素–聊天对象的昵称,则会因聊天对象的不同而显示不同的昵称,我们把这类会改变显示内容的元素叫做 “交互界面”。因为每个好友只有一个昵称,所以该界面只显示一条内容,即 “单条内容交互界面”

在第二个部分–聊天内容显示区域,该区域显示我们与好友聊天的聊天记录。我们与每个好友聊天的内容不同,所以该区域也是一个 “交互界面”,同时我们与好友的聊天记录有很多条消息,因此该界面为 “多条内容交互界面”

用类似的思路,底部的聊天内容输入区域我们也可以整理出四个显示元素,从左到右依次为一个 “单条内容交互界面”:语音输入图标(交互是指点击后图标会发生变化),一个 “输入界面”:文字输入框,一个 “单条内容交互界面”:表情输入图标(交互是指点击后图标会发生变化),以及一个 “静态界面”:更多输入方式图标。

通过以上分析,我们知道了 “界面” 的类型包括三类,“静态界面”、“交互界面” 和 “输入界面”。“交互界面” 又细分为 “单条内容交互界面” 和 “多条内容交互界面”。

图 2 界面类型

图片描述

到这里我们完成了分析的第一步,界面分析。

但这还没完,对吧。我们不是光看着屏幕就能与好友聊天,我们还得在屏幕上指指点点才行(我们把人的动作定义为 “事件” )。那我们就依次来分析一下如何能在这个页面指点江山呢。

2. 事件分析

2.1 昵称区域

当我们点击顶部昵称区域左侧的返回按钮后,会返回到聊天列表页面。我们也可以这样描述:点击返回按钮 “事件”(的响应结果是),返回聊天列表页面。

同样,点击更多操作按钮 “事件”(的响应结果是),打开聊天详情页面。

而聊天对象的昵称,我们点击后屏幕是没有任何变化的,也即是说聊天对象的昵称没有点击 “事件”。

2.2 聊天内容显示区域

在聊天内容显示区域,我们长按一条消息,会出现复制、转发、收藏、删除等操作按钮,并且当我们此时点击空白区域,刚出现的这些操作按钮会消失掉;我们上下滑动屏幕,会显示更早或最新的聊天消息;我们点击好友头像,会打开好友的个人信息页面。

除此之外,当好友向我们发送消息,系统(系统是指人编写的计算机程序,比如 App 或者小程序。为什么要特指人?你见过动物写代码的吗,嘿嘿)会自动将好友刚发送的消息显示在聊天内容显示区域。

这一发现说明:“事件” 分为两类,人的动作和系统自动执行的动作。

图 3 事件分类

图片描述

因此,聊天内容显示区域的事件包括:

  • 长按消息 “事件”,显示复制、转发、收藏、删除等操作按钮;
  • 点击空白区域 “事件”,如果正在显示复制、转发、收藏、删除等操作按钮,则隐藏这些按钮;
  • 上滑屏幕 “事件”,显示更早的聊天消息;
  • 下滑屏幕 “事件”,显示最新的聊天消息;
  • 点击好友头像 “事件”,打开好友的个人信息页面;
  • 系统自动执行 “事件”,将好友刚发送的消息显示在聊天消息列表最底部。

2.3 聊天内容输入区域

底部的聊天内容输入区域,我们点击语音输入图标,输入框会切换为 “按住 说话” 的语音输入状态,并且图标会变为键盘图标。当我们点击键盘图标,输入框会切换为文字输入框,并且图标会再次变回语音输入图标。

我们点击表情输入图标,会弹出选择表情的界面,并且图标会变为键盘图标。当我们点击键盘图标,选择表情界面会关闭,并且图标会再次变回表情输入图标。

我们点击文本输入框,会弹出文字输入键盘。

我们点击更多输入方式图标,会弹出照片、拍摄、视频通话等操作按钮,再次点击该图标,则会隐藏这些操作按钮。

所以,聊天内容输入区域包括以下事件:

  • 点击语音输入图标 “事件”,切换输入框为 “按住 说话” 的语音输入状态,图标变为键盘图标;
  • 点击由语音输入图标变为的键盘图标 “事件”,输入框切换为文字输入框,图标变为语音输入图标;
  • 点击表情输入图标 “事件”,弹出选择表情界面,图标变为键盘图标;
  • 点击由表情输入图标变为的键盘图标 “事件”,关闭选择表情界面,图标变为语音输入图标;
  • 点击文本输入框 “事件”,弹出文字输入键盘;
  • 点击更多输入方式图标 “事件”,如果已弹出照片、拍摄、视频通话等操作按钮,则隐藏操作按钮,如果操作按钮处于隐藏状态,则弹出操作按钮。

在这里我们只列举了微信聊天页面的一部分内容,还有其它一些动作,如点击语音消息、发送语音等就不一一列举了,同学们可以自己总结一下还有哪些 “界面” “事件”

3. 分析结果

分析了这么多内容,我脑洞中突然浮现出了一些同学开始蒙圈的既视感。

没关系,让我们来总结一下微信聊天页面分析结果,帮这些同学回回魂。

图 4 微信聊天页面分析结果

图片描述

通过上述分析过程(图 4 从左到右的过程),我们就可以相对轻松的把一个很难靠脑袋想清楚的复杂功能(一个面),分类、拆解为多个我们可以清晰思考的多个小功能点(多个点)

如此一来,我们在编程的时候就可以一次聚焦实现一个小功能点。在一个个小功能点实现后,再把它们像搭积木一样组合起来(把一个个点按图 4 从右到左进行拼装),就可以相对简单地完成整个复杂功能的代码编写。

并且,一次聚焦思考一个点该怎么实现,我们更容易想得更全面。同样的编程水平,以这样的思路编写出来的代码,BUG 会更少,代码质量会更高。

4. 分类拆解法简介

4.1 核心思想

“分类拆解法” 的核心思想就是将一个页面进行分类、拆解,理清有多少个分类,以及分类之间的相互关系,然后编写代码逐一实现它们,最后把所有分类组合起来就实现了这个页面完整的功能。

4.2 步骤

“分类拆解法” 简单来说分为三步:

  • 第一步,分类,找出所有的界面、事件;
  • 第二步,拆解,用文字(和 / 或图表)描述界面、事件、数据是什么,以及它们之间的关系;
  • 第三步,编程,将文字(和 / 或图表)翻译为计算机能理解的程序代码。

4.3 分类

分类工作包括:

  • 一个页面包含几个子部件,这些子部件的排列顺序是怎样的;
  • 每个子部件包含哪些显示元素,显示元素中哪些内容是不变的,哪些内容是变化的;
  • 显示元素中哪些内容会响应人的动作;
  • 系统会自动执行哪些动作。

“分类拆解法” 的 “分类” 包括三种:我们作为用户能感知到的 “界面”“事件”,以及我们作为用户看不到而计算机能看到 “数据” 。今天初步讲解了我们能直观感受到的 “界面” 和 “事件”。

图 5 “分类拆解法” 的 “分类”

图片描述

看不到的第三种类型 “数据”,是给计算机看的内容(人看到的是界面,是程序员编写的代码 “翻译” 后的数据),由于它较为抽象,我将在后续的内容中结合实际编程实例来具体讲解。

4.4 拆解

拆解工作包括:

  • 如果用户要达到什么目的,他需要在界面的什么地方做什么动作(触发什么事件);
  • 当用户做了什么动作(触发什么事件),什么数据需要改变;
  • 当什么数据改变了,界面的什么内容需要变化。

4.5 如何学习

如何 “分类”,如何厘清三种类型之间的 “分类关系”,如何进行拆解的具体 “拆解步骤”,以及如何根据分类、拆解后的细化结果一步一步完成程序编写(即 “编程步骤”),是贯穿本专栏的主线每一个编程实例均使用 “分类拆解法” 的方法与步骤。

希望通过不断的重复、强化、实操,在学习完本专栏后,各位同学不仅能具备小程序开发基础能力,更能培养出系统化的编程思维与编程方法。

4.6 如何使用

在实际商业开发中,如果是做项目开发,一般会先由项目经理或需求分析师编写需求规格说明书;如果是做产品开发,一般会先由产品经理编写产品设计说明书。

PS:如果你是基于兴趣想自己写一个程序,或者有自己的创业项目构思,建议你先整理出需求、画出原型,并编写你自己的产品设计说明书,之后再进入开发环节。如果你不知道什么是需求、原型、产品设计,可以去人人都是产品经理这个网站学习一些基础知识。

我们作为开发人员,拿到上述文档后,可以使用 “分类拆解法” 的思路,梳理清楚我们要编程实现的内容包括哪些 “界面”、“事件” 和 “数据”,每一个 “界面” 是什么类型,每一个 “界面” 需要显示哪些 “数据”;每一个动作的 “事件” 响应结果是什么,每一个 “事件” 应该改变哪些 “数据”。

在厘清 “界面”、“事件” 和 “数据” 后,我们按照 “分类拆解法” 的编程步骤逐一击破每个显示元素,每个子部件,每个页面功能,就可以轻松完成整个程序的编写。

4.7 全貌

最后附上 “分类拆解法” 的完整思维导图以及相关概念,供各位同学提前一览全貌。

图 6 “分类拆解法” 的完整思维导图

图片描述

“分类拆解法” 相关概念:

  • 系统:人编写的计算机程序,比如 APP 或者小程序;
  • 数据:给计算机看的内容,人看不到数据,人在界面中看到的是程序员编写的代码 “翻译” 后的内容;
  • 界面:人在屏幕上看到的内容,包含界面的布局、界面中不随数据变化而变化的内容,界面中会根据数据变化而变化的内容;
  • 事件:人在界面上的动作,如手指点击手机屏幕,鼠标点击、键盘输入等,以及系统自动执行的动作;
  • 事件、数据、界面的关系:事件会产生数据变化,数据变化会引起界面中显示内容变化。

下节预告

下一节,我们来聊一聊本专栏的正确打开方式 - 专栏使用方法,专栏内容概览以及有哪些 “臣妾做不到” 的事 - 本专栏不能给你什么。

实践环节

实践是通往大神之路的唯一捷径。

本节实操内容:

  • 参照本节拆解微信聊天页面的思路,使用 “分类拆解法” 分析微信的主页面 - 我们打开微信看到的第一个页面,好友消息列表页面。
}
立即订阅 ¥ 68.00

你正在阅读课程试读内容,订阅后解锁课程全部内容

千学不如一看,千看不如一练

手机
阅读

扫一扫 手机阅读

零基础实现微信电商小程序开发
立即订阅 ¥ 68.00

举报

0/150
提交
取消