如何搭建一个微信小程序？

在产品开发中，原型设计、交互设计等方面都是必不可少的考量因素，微信小程序的设计也是如此。在微信小程序设计中，产品经理应当根据用户需求、用户体验等方面推动产品功能的实现与优化。

一、前言

大家好，今天继续为大家带来《产品经理如何搭建一个微信小程序》的讲解。

本系列适用于已经工作1~2年且有一定产品基础，但从未接触过微信小程序，希望入行微信小程序产品设计的产品经理。整个文章体系分为四部分，具体如下表所示。上篇文章讲解的是【分析篇】，今天是我们整个系列的【实现篇】。

本文会以一个实际的“微信活动报名程序”为案例进行讲解，在讲解过程中会以实际产品设计中运用到的相关理论与产品方法进行产品分析。学习完成后，大家可以熟悉产品分析方法与实现策略，掌握从0到1搭建一个微信小程序的产品技能。

同时大家在今后的实际工作中，也可以举一反三并在全新的产品设计和实现上有较强的借鉴与参考价值。在进行产品讲解前，先为大家展示一下微信活动报名小程序，使大家直观感受一下产品实例。

当然，这个实例是我自己的实验产品，未来产品功能会有所变化。

同时，由于这个实验的微信小程序是个人主体注册的，像类似于信息发布这样的功能个人主体的小程序是不能有这些功能的。产品在最终的展现上，同原型是有区别的。

二、原型设计

一个产品的实现，离不开原型设计。

产品原型设计是一种低成本的产品实现方案，产品经理可以将产品分析的结果以原型的方式进行呈现。在这个呈现过程中，如果需求提出方或是市场需求发生了变化，需要进行产品更新，在产品实现前，仅需要调整原型即可，避免技术人员改动产品代码造成的人力浪费。

对于产品经理而言，产品原型设计的过程，也是进一步梳理产品逻辑的过程。有些时候，在产品分析阶段，在一些非常细节的地方会考虑得不够周全，在设计原型的过程中会想得更为全面。所以说，产品原型设计的过程，也是产品逐步求精的过程。

由于我们的这个产品功能非常简单，所以产品原型主要有四个页面。

1. 主页面

用户打开小程序，首先为用户呈现的主页。所以首页原型设计要通俗直观，能直接反应出产品的特点。

对于用户而言，用户打开微信活动报名小程序，最想了解的是近期有什么活动。便于用户可以在第一时间找到核心信息，主页为用户展现的是以未来将要召开活动的正序。

同时，如果一天有多个活动，我们可以把时间进行提炼，而不是粗暴地给用户直接显示一个“年-月-日”，而是进一步更友好地提示，是今天、还是明天、还是星期几。

另外，还有两个细节，一个是对活动的状态进行提示，另一个是显示这个活动用户是否已经报名。未报名的活动，用户点击后直接可以报名，已经报名的活动，显示“已报名”，并且报名按钮不可点击。

对于【历史】和【已报名】的两个Tab，也可以复用主页面，从而减少产品实现的工作量，提升产品上线效率。

2. 我的

我的页面中，承载着产品通用的管理功能，例如我们常见的用户资料编辑、信息创建与管理、产品版本信息等都在【我的】页面里，算是比较通用的一个功能。

我们这个活动报名的小程序功能比较简单，所以【我的】页面原型设计也比较简单，仅需要体现核心信息就可以。

像用户的头像，可以从微信授权中获得，同步用户微信头像，免去了用户上传头像繁琐。同时用户的一些基本的信息也可以在用户授权的情况下，帮助用户进行同步，便于产品为用户提供更好的服务。

点击【编辑】后，用户可进一步编辑自己的信息。另外的几个功能菜单，也是围绕用户创建活动、管理活动和报名活动服务的。点击后，进入相应的功能页面。

3. 个人资料

用户可以在个人资料页面录入自己的真实姓名、工作单位和岗位，便于活动成员间相互认识，为后续产品互动打下基础。

由于我们这个是书友会活动报名的小程序，用户可以为自己定义一个书友会学号，便于读书讲座活动进行用户统计。

对于产品原型设计而言，本文展示的也仅是非常基础的页面。实际的产品实现过程中，每个输入字段的异常提示，也应该有相应的页面原型展示。

如果你所在的公司是一个比较成熟的公司，有一套完善的产品规范，大家已经约定俗成，那么产品经理在设计原型时，就便捷高效了许多。只要在产品文档中描述清楚，哪些字段有哪约束、产品页面会有哪些异常、分别会出现什么样的提示即可。产品展现上，沿用公司产品规范即可。

4. 创建活动

用户可以创建活动，输入活动标题、活动开始时间和活动内容。必输的字段加红色的星号显示，以便进行强调。

对于开始时间，由于是要输入日期和时间，如何设置两个输入框，分别输入日期和时间，页面展示比较琐碎，用户输入也要点击两次。

因此，我们设计了一个组合输入，用户点击后，可以在弹出的微信时间控件中，一次性完成日期和时间的选择。从一个小细节上，增加产品的用户体验。未来创建活动功能还可以继续扩展，增加图片、音视频的发布支持。

至于未来创建活动会有什么功能，其实也是随着用户的实际使用需求，逐步迭代的。目前的产品实现所遵循的是MVP（Minimum Viable Product，最小可实现产品）思想。先满足用户的核心需求。如果过分追求产品功能的大而全，投产了之后又没有用户使用，反而是一种浪费。

三、交互设计

交互设计是产品在设计阶段必然要考虑的一个方面。好的产品交互设计，可以向用户传达一种正向的理念，让用户在潜移默化中感受到你对他的重视及关怀。

交互设计即要考虑全局也要考虑细节。全局是用户在使用一个产品的全过程中，非常流畅顺滑，产品信息指向明确，操作清晰；而细节上，小到一个按钮的反馈、文案提示的字体和配色，都要精准。这也是我们常说的产品要不断打磨。

以次微信活动报名小程序为例，在产品实际实现过程中，虽然已经考虑了许多产品交互上的细节，但是发现每次再回头来看，产品仍然还是会有需要完善的地方。

这也就是说，这个世界上并没有真正完美的产品，产品的功能实现与完美也需要有一个平衡。过度追求完美，为了一个非常微的、且用户十年也感受不到的交互投入大量的人力和时间，明显也是不合适的。我们可以在一定范围内追求为用户提供更好的产品。

四、功能实现

理论上产品经理不需要太在意产品的编码实现，因为这是软件架构师或是软件开发工程师需要考虑的事情。

而现实中，优秀的产品经理往往也都有技术背景，像大家比较熟知的苹果创始人乔布斯、微软创始人比尔·盖茨、Facebook创始人马克·扎克伯格、小米创始人雷军以及微信之父张小龙都有过程序开发经历。所以产品经理懂技术，一定是一个加分项。

产品功能通过程序代码实现过程中，对程序结构的有效组织、逻辑清晰，本身也是一种产品设计。通常程序使用的MVC（Model-View-Controller，模型-视图-控制器）模式，可以突出程序的层次感和可维护性。

对于微信小程序而言，我们可以将一些通用的方法类抽象出来，使得满足面向对象的编辑思想，即封装、继承、多态，从而为小程序未来的扩展打好基础。

以下就是我们的微信报名小程序的开发结构，当然目前我们的微信报名小程序功能非常简单，程序结构也并不复杂。当未来我们要进行其他功能扩展的时候，我们还会抽象出很多公共类。程序结构也会进行调整。代码实现的细节，大家如果有兴趣，可以随时与我交流。

五、异常处理

异常处理是产品开发必不可少的一个环节。产品经理对异常处理的定义，要从产品实际场景出发，结合多年的工作经验，对产品可能出现的异常环节进行识别处理，以提升产品的健壮性。

很多时候，产品经理之所以资深，最主要的一个原因是走过的路多，踩过的坑也多，经验也多。这些都是产品经理的隐性知识，这也是为什么好的产品经理比较昂贵的原因。从表面上看，都是实现了产品的功能，这是大家都可以看得见的地方，而产品经理的昂贵之处往往在于大家看不见的地方。

对于微信活动报名小程序产品而言，我们可以定义几个方面的异常，从而进行有针对性的处理。当然处理的细节，就不在此多讲了。

1. 微信小程序服务端异常

接口频次限制、服务返回错误、处理超时、参数不正确、版本不支持、接口调用错误、授权认证异常等。

2. 微信小程序应用端异常

网络异常、存储异常、内存异常、字段参数异常、带宽限制、内存异常、代码本身的异常、权限异常、数据异常等。

六、小结

产品经理在设计微信小程序产品时，不仅仅是解决了用户的痛点（满足用户核心需求），还要给用户带来了爽点（极致的用户体验）。而极致的用户体验，其中有一个非常重要的细节就是对给用户的提示信息的友好，以及对产品异常处理的到位。

给用户的提示信息要恰到好处，不能没有，也不能过多而给用户造打扰。

异常处理要明确，告诉用户出现问题信息的同时，还要让用户知道如何去处理，不让用户感到迷茫。

而这些细节，需要产品经理对微信小程序的各项功能参数非常熟悉，知道微信小程序在哪个地方的交互会出现哪些问题。

微信活动报名小程序这个产品，其实功能非常简单，但即便是这样，如果要做到极致，有非常多的产品细节要考虑。所以在今后的工作中，产品经理不论是在设计小产品还是大产品，都可以借鉴本文的产品设计思路。即便是大产品，也可以分解成一个个小的产品功能进行实现。

莫听穿林打叶声，何妨吟啸且徐行。我们今天就先讲到这里，感谢大家的阅读。

作者：王佳亮

来源：佳佳原创