1、前言

大家好，今天为大家带来《产品经理如何搭建一个微信小程序》的讲解。
本文适用于已经工作1~2年且有一定产品基础，但从未接触过微信小程序，希望入行微信小程序产品设计的产品经理。
整个文章体系分为四部分，具体如下表所示。

本文会以一个实际的“微信活动报名程序”为案例进行讲解，在讲解过程中会以实际产品设计中运用到的相关理论与产品方法进行产品分析。
学习完成后，大家可以熟悉产品分析方法与实现策略，掌握从0到1搭建一个微信小程序的产品技能。同时大家在今后的实际工作中，也可以举一反三并在全新的产品设计和实现上有较强的借鉴与参考价值。
在进行产品讲解前，先为大家展示一下微信活动报名小程序。大家可以在微信小程序中搜索“蜜聊读书”免费体验。方便大家直观感受一下产品实例。

2、小程序定义

小程序对大家来说已经不再陌生。它是运行于微信内部的一种功能应用。使用时不需要安装新的应用，在微信中打开即可使用。对于小程序而言，微信就是它的“容器”，而这个“容器”装有各式各样的小程序。用户可以根据需要，扫码、搜索或是其他用户的推荐，从微信中打开自己需要的小程序，满足自己的实际需要。使用完成，关闭即可，也不会占用手机空间。
对于应用提供方而言，因为小程序可以在微信内被便捷地获取和传播，所以是各商家争夺用户的一个非常不错的“战场”。可以同商家的服务号、订阅号进行关联，也可以将小程序的二维码嵌入在文章中，使用户“所见即所得”。小程序相对于手机应用而言，小程序的开发、获取用户和传播成本更低。
小程序的适用范围，按张小龙最初演讲提到的，微信不会为小程序提供专门的应用商店，同用户也没有订阅关系，也不向用户推送消息，也不会做游戏。所以，大家如果一开始是想通过小程序来做游戏，明显就不是很适合了，就需要去研究微信小游戏产品实现了。

3、开发前的准备

小程序在开发前，要完成一些准备工作：

（1）小程序注册

大家可以登录微信平台： https:// mp.weixin.qq.com/
点击“立即注册”后，选择要注册的账号类型为“小程序”。

使用邮箱账号，填写基本的注册信息后，完成注册。需要提及的一个细节是，每个邮箱仅能申请一个小程序。
目前小程序开放注册账号类型主要有：个人、企业、政府、媒体和其他组织。

（2）开发工具

开发微信小程序，使用的是微信提供的一个IDE（Integrated development environment，集成开发环境）。这套IDE已经经历了多个版本的迭代，功能和稳定性已经比最初的版本好太多。不过目前仍然有很多需要完善的地方。我们也相信，随着不断的发展，这套IDE会变得越来越强大，微信小程序的开发，也会越来越流行。
由于开发工具也在不断升级中，在此就不过多介绍了，大家可以到微信平台下载最新版的IDE进行体验。

4、小程序配置

大家下载好IDE后，用已经注册的账号登录IDE，就可以开始微信小程序产品开发了。小程序的运营，离不开小程序的各种参数配置。各种配置参数定义了小程序在运行过程中的各项属性及方式。

（1）全局配置

全局配置是通过「app.json」文件进行配置。在这个配置文件中，决定了页面文件的路径，也就是说所有在小程序中要运行的页面，都需要在这里进行配置，主要配置的参数为：pages，格式为：
"pages": [ "pages/index/index" ],
窗口表现、设置网络超时时间、设置多 tab 。具体涉及20多项配置，细节上大家可以访问「 https:// developers.weixin.qq.com /miniprogram/dev/reference/configuration/app.html 」进行详情查阅。

（2）页面配置

页面配置，主要是配置页面的相关参数，如导航栏标题颜色、标题栏内容、是否开启当前页面下拉刷新等。大家可以在每个页面下的「XX.json」文件中对相应的页面进行配置。详细配置项大家可参阅官方文档「 https:// developers.weixin.qq.com /miniprogram/dev/reference/configuration/page.html 」
不过这里有个细节需要注意的是页面中配置项在当前页面会覆盖「app.json」中“window”（window用于设置小程序的状态栏、导航条、标题、窗口背景色。）参数中相同的配置项。也就是说，你在「app.json」中的“window”配置项设置了窗口背景色为黄色，另一个页面中，你又在的“window”配置项设置了窗口背景色为绿色，则这个页面窗口背景色会显示为绿色。

（3）sitemap 配置

大家知道，微信提供了小程序内搜索功能。小程序及其页面是否允许被微信索引的配置，主要通过程序根目录下的 sitemap.json 文件进行配置。配置文件内容为一个 JSON 对象，大家如果希望自己开发的小程序的某个页面被检索到，可以在“rules”中配置为：【"action": "allow"】。如果没有 sitemap.json ，则默认为所有页面都允许被索引。详细的配置规则，大家可访问「 https:// developers.weixin.qq.com /miniprogram/dev/reference/configuration/sitemap.html#rules 」

5、小程序文件

小程序程序相关的文件，主要有WXML（WeiXin Markup Language）、WXSS (WeiXin Style Sheets)、JS和JSON。json之前介绍过了，主要是些配置参数在里面。接下来进行分别介绍。
（1）WXML
主要用于小程序的页面展示。在实际的小程序开发中，需要结合基础组件、事件接口，从而构建出页面结构。也就是这个页面你要展现什么内容，同用户有哪些交互，例如常见的信息录入，表单提交，下拉刷新等。主要提供了数据绑定、列表渲染、条件渲染、模板、引用等功能。
（2）WXSS
大家如果了解Web产品开发，不难理解WXSS，简单的说WXSS同Web中的Css一样，是一套样式语言，用于描述小程序组件样式。比如，你定义的按钮是蓝色还是绿色、长宽是多少、使用什么样的字体等。语法格式上，同Css相似。这个大家在实际开发中，用到哪一部分的细节，可以继续深入演习。作为初学者而言，我们首先知道WXSS是做啥的就可以了。
（3）JS和JSON
JSON是有关于页面各参数配置的，在此就不多讲了。JS大家也比较容易理解，主要承载业务逻辑。例如，你提交表单信息，把这些信息提交到哪个服务器，下拉刷新从服务器获得哪些数据，这些功能逻辑都在JS中。这就需要大家需要对JS的语法也要有一定的熟悉。

6、主要接口说明

微信小程序的接口很多，我也相信随着微信小程序的功能不断完善，接口会越来越多。作为入门介绍，我们结合要搭建的“微信报名小程序”案例，把我们在实战过程中需要用到的主要接口为大家进行了一个介绍。先让大家有个总体概念，之后随着学习的不断深入，继续掌握更多的接口。

（1）登录认证

主要涉及【wx.login】微信登录接口和【auth.code2Session】登录凭证校验。【wx.login】用于获取登录凭证。小程序调用微信登录接口，若调用成功，微信会返回用户登录凭证给产品服务端，这个凭证有效期只有5分钟，产品服务端要通过获得微信返回的登录凭证，去调用【auth.code2Session】获得用户的OpenID和会话密钥session_key。需要注意的是，小程序下的每个微信用户调用【auth.code2Session】最多为每分钟100次，超出后微信小程序后台会反馈“45011”错误码。

（2）检查登录状态是否过期

检查登录状态是否过期【wx.checkSession】用判断用户登录的有效性，用户经常使用小程序，Session则会一直有效，长时间未使用，则会失效。失效后，就需要用户重新登录。这里有个细节，调用登录凭证校验【auth.code2Session】，会返回openid、session_key和unionid三个值。特别注意的是unionid可以用来区分用户的唯一性，这个唯一是在整个微信体系内的唯一，包括网站、公众号、App，同一个用户，unionid是唯一的。如果你的产品涉及腾讯多个应用的登录，为了便于将用户都关联起来，可以用户unionid进行统一的用户识别。

（3）用户信息

我们在实际使用中，会要求用户提供信息授权，我们所设计的小程序产品就可以从微信后台获取到用户的性别、区域、昵称等信息，不需要用户手动输入了。之前获取用户信息使用的是【wx.getUserInfo】接口，最新的版本中，微信小程序获得用户信息推荐使用【wx.getUserProfile】。

（4）底部加载

我们准备开发的微信活动报名小程序，会涉及到信息列表的翻页，也就是我们经常操作其他产品，查看信息下滑到底部后，信息会自动加载。也就是我们浏览信息到底部时触发。这个时候需要用到【onReachBottom】函数。使用起来还是非常简单的，我们只需要定义【onReachBottom】要执行的功能就可以。具体是否到了底部，微信小程序会自行帮我们判断。

（5）数据缓存

数据缓存涉及的接口有很多，我们本次主要介绍数据的存储【wx.setStorageSync】和读取【wx.getStorageSync】两个接口。使用这两个接口，主要帮助我们将用户登录后，获得的Token储存起来，然后读书，以核实用户的身份。就不用每次频繁地调用微信的用户登录接口了。提升产品运行效率。这里有个需要注意的细节是，单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。这个大家设计和实现小程序产品的时候要注意。

7、小结

今天为大家讲解了小程序的简要定义、开发前的准备、小程序配置、小程序的主要文件以及小程序的主要接口。相信大家对小程序已经有了一个初步的了解。其实小程序虽然用起来大家觉得很容易，但是真正实现起来，而且想要把小程序产品做好，是非常不容易的。涉及非常多的产品细节。而且随着业务场景和需求的不断增多，小程序提供的功能也会越来越丰富。也需要大家的不断学习。希望本文可以抛砖引玉，激发起大家对小程序产品的热情，未来出现越来越多的非常优秀的小程序产品经理，打造卓越的产品，为我们的产品事业增光添彩。

#专栏作家#

王佳亮，中国计算机学会（CCF）会员，专注于互联网产品、金融产品、人工智能产品设计理念分享。