探讨小程序产品设计。首先，我们将了解如何去做小程序的产品设计，包括我们的案例产品设计过程。随后，我们将介绍如何做小程序的架构设计。第三部分，我们将尝试开发爱小喵商城的实例，回到开发者工具并带着大家一起查看整个开发过程。最后，我们将会探讨小程序本身提供给开发者的一些接口功能，并针对其中关键点进行点评。在接下来的第四部分，我们将一起研究小程序开发者工具提供的接口功能，了解其中一些关键点。
爱小喵商城是我们为这次课程特意用的一个案例，我们将在第一个部分讲解它的产品设计过程。我们可能会讲四个主要的部分，第一个呢，我们会讲一下它的上层构思是什么样的，然后介绍它的功能结构图。接下来，我们对其中的主要流程，也就是商城的一个下单流程，可能会给大家看一下它的流程图，我们会画个流程图。最后是商城原型的展示。
在爱小喵商城的构思中，我们有明确的目的，首先为了教学，让大家理解电商小程序的制作过程。电商小程序之所以被放在第三课的位置，是因为它是电商领域中的小程序，而小程序作为一种新型应用形式，需要掌握一定的开发技能。
“爱小喵商城：简洁、高效与用户友好的商城设计”
爱小喵商城是一个功能相对全面、用户交互相对复杂一点的案例，大家平时经常使用APP或者购物网站，因此借助这样一个案例来讲解可能会比较合适。在设计过程中，我们考虑要设计多复杂，然后参考了一些东西，比如截的两幅图。我首先参考了某宝的图，某宝的图看起来太过于复杂了，其实我不太喜欢这种风格。然后参考了另外一张图，我觉得另外一款产品，它的简洁风格还是比较好的。但是我们的案例可能也不需要像演示展示这些部分，我们的案例可能中心上面一个大banner图，能够轮播，然后下面可能会有商品列表。
“爱小喵商城构思简单易行”
爱小喵商城的构思非常简单，就是做一个标准商城购物的流程案例，最好简洁大方。我们建议使用小程序实现，但独立小程序缺乏服务端支持，很多功能都无法实现。为了解决这个问题，我们之前介绍了服务端设计的重要性，但目前我们还没有学过服务端设计，也没有人可以帮助我们一起做服务端的。
“爱小喵商城开发指南：功能结构图与操作流程”
我们决定开发一个通用的服务端，可以给所有的学员提供服务。每个人都可以用自己的账号登录进来，使用自己的服务端去写小程序，实现与爱小喵商城的接驳，每个人开发的小程序看到的都是自己想要的商品。为此，我们还制作了一个通用服务端，让大家下载第一课案例时，看到的就是爱小喵商城的商城后台，它的背后是为大家开发的服务端。稍后，我会演示服务端的操作方法，今天的内容有点多，我们将详细讲解爱小喵商城的程序部分。功能结构图是我们为爱小庙上层设计的一个功能结构图，在上面，我们按照功能层次设置了各个功能，最上面是按小喵，可能分为首页、购物车、我的和登录注册流程，首页下面是商品列表和轮播图，商品列表上会有商品的详情，加入购物车，购物车下面是商品列表和结算功能，在我的下面是订单列表和支付功能。在这张图上，我们强调的是功能，有哪些功能要做，而不是对应的页面。在小程序架构设计时会涉及页面。
在开发一个小程序或小系统时，我们需要设计其中主要部分的操作流程或用户流程。大家可以看到，这是一个非常简单的商城下单的流程，用户进来后，我们会首先浏览商品的列表。当用户去点击把它加入购物车的时候，我们要判断用户是否已经登录，如果用户没有登录了，我们就去进入用户登录的流程。如果用户已经登录了，我们就会将商品加入购物车，然后询问用户是否去结算。用户如果选择不去结算，我们继续回到商品浏览列表，它可以继续去浏览其他商品。如果用户选择要结算，那我们就会进入到下一页，进行用户的购物车中选择所要结算的商品，用户把选择商品选择完之后，填写自己的收货地址，提交订单前往支付，支付完成到结束。这就是爱小喵商城的下单流程。
爱小苗电商小程序下单流程图简单易懂，但需考虑更多实际因素。
爱小苗给出的电商小程序下单流程图虽然非常简单，但在实际应用中，还需要考虑很多因素。例如，当用户填写收货地址时，如果该用户已经购买过货品，我们需要判断它是否已有收货地址，并将常用收货地址或最近的购买记录收货地址列出来。这个案例的讲解主要是帮助大家理解，一个实际的或完善的购物APP实际上还会有更多的部分。一般来说，我们设计一个外部程序或APP，需要进行功能结构的设计，并将主要流程画出。之后，我们可能进入原型的设计阶段。这次爱小mmr商城的原型我们做了一个简单的演示，这些案例都放在课程三的下载包里面。课程三的下载包在哪里下载？等节课结束时，会告知大家。我们可以开始来看一下这个原型图，我们提供的下载包里面会有H小L的原型图，这些图使用X导出。对于学员中有很多做产品经理的来说，赖艾小喵的原型图可能会非常简单。但是，对于那些没有设计或开发经验的同学来说，我们还是需要稍微讲一下圆形。圆形的设计不会过于注重美观，主要考虑的是实用性。
爱小喵的首页的布局、流程和元素展示如下：以下是爱小喵的首页：下面有三个icon。这个地方是一个班图、轮播图的地方。这个区域将展示每页，目前计划展示15个商品，每行展示三个。这是商品的详情页。在详情页中，我们可以定义我们的电商模型，比如定义商品型号、颜色分类、商品详情、头图、购物车和对购买数量进行增减的操作。在订单确认页中，我们列出了订单确认的状态，比如添加收货地址。这是订单确认页。大家可以看到这是添加收货地址的状态。爱小喵的订单确认页和商品详情页展示了电商模型的基本概念和操作。
然后我们收货地址列表页，这是对常用收货地址所保存新增收货地址的页，把收货地址填进来去支付的页。
购物车页和订单列表页，这是爱小苗的一个简单的原型。我相信对于产品同学来说，这些原型可能已经足够简单了。但如果没有这方面的经验，也可以参考课程下载包中的原型。在设计原型之后，我们可能会将原型交给设计师或UI设计师，让他们来制作我们需要的设计图。这些设计图会显示在课程下载包中，与圆形设计不同，显得更加美观。最后，我们的工程师会根据设计图制作出相应的小程序。这个圆形设计就讲到这里，我们接下来进入下一个部分。本节课的第二部分是小程序架构设计，我们将首先了解小程序的基本架构。
在交互设计之后，我们知道了小程序有多少个页构成。我们可以看到这些都是我们设计出来的页，对吧？我们一共有九个页。这是首页，商品详情页，登录页，购买页，购物车列表页，地址列表页，新增收入收货地址页，支付页和这个页。每个页都会在小程序的设计中被加进来，我们需要为这些小程序设计的页留位置，然后呢，每个页上设计的很多元素啊，或者这些东西我们都要在在每个页的设计代码去体现。在这，我想跟大家提一下，就是我们的小程序啊，它的工作逻辑哈，我们在这里看到的这些图片，除了我们这些界面元素啊，这些图片，这些商品的图信息全部都是从服务器来的。先前我们介绍了我们为这次的大家的案例呢，我们做了一个服务端，就是爱小喵的商城。
在商城的服务端中，所有的数据都可以按照自己的喜好手动上传到服务端去，然后编写小程序时，需要填写商城ID，在小程序的访问代码中访问服务端，就能获取到上传到服务端的商品和商品信息。进行登录时，登录的注册信息也会被送到服务器去保存，本地缓存中也有小程序和商品信息，用户下次打开小程序不需要再次注册或登录。如果现在将商品添加到购物车，商品购物的信息就不会提交给服务器，保存在服务器中，点击购物车列表页时，小程序会访问服务器，从服务器抓取对应客户的商品信息，显示在界面中。小程序和服务器之间一直在进行沟通，像小程序这样的小程序，包括收货信息、订单信息等都是保存在服务器上的。小程序和APP之间可以同步数据，因为小程序和APP都是平级的，并通过API访问同一个数据库。商城管理系统中的商品来自于商城管理系统，操作人员通过商城管理系统对数据库进行增删改查，添加新的数据，例如添加新的商品、删除商品或调整商品库存等等。商城管理系统的管理员实际是后台管理员，通过商城服务器来管理这些信息。小程序用户并不是直接访问服务器的，而是访问API服务器和数据库服务器。拓扑图显示的是小程序用户、API服务器、数据库服务器和商城管理的服务器，以及系统管理员。
小程序用户通过微信小程序访问服务器，微信小程序通过微信提供的API访问服务器。在代码演示中，用户可以使用微信小程序访问服务器上的数据。数据库的设计是服务端开发的一部分，但由于本文主要介绍了如何使用API访问数据库，所以未详细描述数据库的设计。接下来，我们将一起查看数据库的设计。
在数据库设计方面，爱小喵数据库设计的文档提供给大家，可以打开该文档查看其目录结构和表格结构。在该文档中，可以看到有很多表格，每一张表都代表着一种数据或一系列数据。例如，一张表可能包含一系列的相同结构的数据，而另一张表可能包含不同的数据类型。这些表格的结构可以帮助加深对小程序和数据库的理解。
爱小喵数据库设计文档还提供了一些有用的信息，例如如何连接数据库和进行查询。用户可以使用这些功能来获取和操作服务器上的数据。如果用户需要更详细的信息，可以查阅相关文档或参考教程。
每条数据的内在结构类型都可以看作是一个表，每个表都存储了一款商品的所有相关信息，例如商品的标题、价格、数量、介绍等。每个商品都有一个唯一的ID，用于标识它。在商品表中，我们有一个记录字段，用于存储商品的信息。每个记录都对应着一款商品，因此每个商品都有一条记录。这些表可以供我们参考，但我们只需了解它们所代表的数据类型和用途即可。数据库设计是服务端设计的一部分，我们只需了解其中的几个表即可，而下面的权限和登录控制表则无需关注。
