微信小程序：三个月学习开发实录

一、引言

因为工作的原因，我接触到了微信小程序。这是一个我从未接触过的领域，在这之前，我是从事 C++ 桌面端开发的，对于前端知识可以说是一无所知的，不仅仅对于 Html、CSS 没有一个宏观上的概念，甚至于 JavaScript 都没有相对深入的了解。

一方面来源于兴趣，另一方面来源于”玩“的心态，我接下了新员工课题中微信小程序端的开发任务。这是一个非常简单的小程序，对于需求方来说，就是一个简单的展示信息、录入信息、修改信息的小程序而已。当然，这篇博客不会以这个项目为主题而详细阐述这个小程序的开发过程，如果这样，这篇博客也就太没有参考性了。

对于阅读这篇博客的读者来说，我希望能与你们分享的是，在接触微信小程序三个月不到的时间里，我是怎样熟悉微信小程序的开发环境的，怎样快速学习微信小程序的技术架构的，以及怎样开始上手开发一个微信小程序的。

对于这篇博客的读者，我对于你的假设：

1. 你可以完全不懂前端开发
2. 你拥有至少一种程序设计语言的开发经历
3. 你对于微信小程序也抱着“玩”的心态

那么，来吧，一起来了解下微信小程序吧。

注：因为我仅仅接触微信小程序三个月不到的时间，本篇博客难免会有一些不足之处，希望谅解：）

再注：本篇博客中很多地方或多或少都引用了于连林著作的《实战微信小程序:JavaScript、WXML与Flexbox综合开发》这本书

二、什么是微信小程序

我们要接触微信小程序的开发，那么首当其冲的就是，我们要去了解，什么是微信小程序。那么，什么是微信小程序呢？

微信小程序，简称小程序，其英文名为 Mini Program。

只要我们可以打开腾讯的微信，我们就拥有了能够运行微信小程序的环境。

张小龙曾说：“让创造发挥假值，好产品应该是用完即走，微信应该是给用户提供便利，而非浪费时间。希望用户在微信里看到的都是自己愿意看到的东西，也希望用户能够留出更多的事件去做其他的事情”。

腾讯微信的产品经理张小龙对于微信小程序的定义，已经深深的嵌入在了微信小程序的方方面面，那就是 不需要下载安装，用完即走。

对于微信来说，其旗下已经不仅仅微信小程序这么一个生态产品了。同样的产品，还有订阅号、服务号。那么问题来了，他们的区别是什么呢？

订阅号主要的功能是帮助企业或个人在微信中向用户传达咨询消息，为企业或个人提供一种新的信息传播方式。

服务号可以帮助企业和组织在微信中向用户提供服务，为企业和组织提供了更强大的业务服务与用户管理能力，同时还提供了让用户直接与企业的客服进行沟通等功能。

对于我们开发者而言，这种近乎官方的定义实在不够直白，简而言之

订阅号和服务号都是以微信的主体聊天界面为基础，所以它们的界面和功能早就约定好了规则。

而微信小程序允许开发者自定义界面，还可以根据开发者的产品需求自定义功能，从而打破了订阅号和服务号一成不变的规则。

可以说，微信小程序继承了微信的用户广、成本低的优势，对于腾讯来说，这是一个打开线上对线下的大门的重磅产品。对于腾讯来说，微信小程序何其重要。那么，对于我们开发者来说，学习微信小程序，又有什么好处呢？

三、学习微信小程序的好处

微信小程序的开发，在技术上的分类，应该是属于前端的领域。在如今前端技术争奇斗艳，你方唱罢我登场的百家争鸣的环境下，微信小程序诞生了。

微信小程序诞生的背景，是前端技术飞速发展技术相对成熟的今天。学习微信小程序，对于我们，尤其是我这种从来没有接触过前端技术，并且还在苦苦挣扎于 2011 版的 C++11 标准的学习的人来说，无疑是滑动了时间的进度条，看到了现代前端技术的一点点璀璨的亮光。

但，即使是这么一点点亮光，已经足以让我沉迷。

微信小程序的原生开发框架非常完善，得益于腾讯官方完善的文档、Demo 以及持续更新的努力。学习微信小程序，我们能够接触到现代的前端技术框架，能够仅仅只付出一点点成本就可以获得掌控整个项目的快感。

微信小程序，确实很 小，但是五脏俱全。

四、开发环境

话说了那么多，让我们来看看，究竟如何上手开发一个微信小程序。这里，我引用了腾讯官方的小程序开发指南的网址：

小程序开发指南

详细的介绍，在这篇指南中都有。这里我简单概述下：

1. 申请 AppID

   对于我们开发者而言，想要开发微信小程序，首当其冲的就是申请 AppID。这个 AppID，将会与腾讯开发者工具中的一系列服务绑定，并且在你新建或者打开一个项目的时候请求填入。一般来说，公司的项目，则需要以公司的名义申请 AppID，个人的项目，则也可以使用个人信息申请 AppID。

2. 安装开发者工具

   微信开发者工具，也就是微信小程序的开发 IDE。这是一个非常小巧的开发工具，支持公众号和小程序的开发。对于开发者而言，比较恶心的是，微信开发者工具必须要与微信号绑定，因此每次登录需要微信扫描二维码登录。

   在这个开发者工具中，有手机模拟器区域、代码编辑区域、调试区域以及基本的功能按钮。基本能够满足开发者的开发需求。就我的开发经历而言，在 Win10 上开发，偶尔会出现卡死的情况，其他都还挺满意的。

开发环境都完善好了，剩下的，就是学习微信小程序的开发了。

五、如何学习小程序

这里，我大力推荐于连林的这本书《实战微信小程序:JavaScript、WXML与Flexbox综合开发》。

这本书的作者，不像其他微信小程序书籍的作者一样，总是会假设你有前端开发的经验。而看这本书，不需要你有任何的前端基础，甚至于 JavaScript 的基础都可以没有，因为作者会一步一步的教你。

这本书的组织架构也非常的清晰，从 IDE 的讲解，到 JavaScript 语言的介绍，再到 WXML、WXSS 以及 Flexbox 布局，再到微信小程序的组件介绍、API 介绍，可以说涵盖了微信小程序开发的方方面面。

如果你也是跟我一样的前端小白，非常建议这本书入手。以我的看书速度，大概两三周看完就能实战了。

另外，微信小程序官方出了一个 Demo，这个 Demo 展示了微信小程序所有的组件和接口案例，可以在这个网址中获取到源代码（对于开发者而言，是最好的参考资料！）：

体验微信小程序

六、微信小程序的技术架构

使用腾讯微信官方的微信小程序开发体系，也就是简单的：

WXML，类似于 HTML，书写页面的框架布局；

WXSS，类似于 CSS，书写页面的渲染逻辑；

JavaScript，书写页面的各个逻辑处理。

可以说，微信小程序的开发的学习，也是围绕着这三个方面来的。

1. JavaScript 学习

   如果把微信小程序比如一个人，那么 WXML 就是骨架，WXSS 就是血肉，而 JavaScript 就是神经网络。JavaScript 在微信小程序中起到了控制程序和页面逻辑的作用。

   对于一个微信小程序而言，分为 App 也就是整个程序域和页面域的概念。页面的逻辑一般都是在页面的 js 文件中书写。在页面的 js 文件中，我们控制页面的控件的各个事件的响应，以及对接接口，以及控制页面跳转等等逻辑。

   微信小程序的开发，对于 JavaScript 的应用，应该只是初级的，可以说不需要对于 JavaScript 有太多深入的了解，就可以玩转微信小程序中的 JavaScript 的开发。

2. WXML

   类似于 HTML，我们需要学习微信小程序中的布局语言。WXML 的学习，也是在实践中才能领会的更深。比如界面显示的数据，是如何与 JavaScript 交互的，这些内容，都是在这一块需要掌握的。

3. WXSS

   类似于 CSS。这一块的学习应该是比较痛苦的，因为渲染本来就是一个很经验很需要美感的工作。不过这一块可以不用花太多时间，因为对于 WXSS，我们需要更多的投入时间在 Flexbox 布局中去。

4. Flexbox 布局

   微信小程序通过 Flexbox 布局模型对组件进行排列。相比普通的布局方式，Flexbox 更容易实现宽高适合屏幕的布局，使用起来更加灵活。

   这一块与 WXSS 的内容结合紧密，需要编写代码实际查看效果才能领会其中的奥秘，这一块的学习的难度应该是最大的 。

5. 开发基础

   微信小程序的整个项目架构，如何全局配置程序信息、如何配置页面信息、如何注册程序、如何注册页以及如何封装全局变量和函数，都是需要学习的。

6. 组件

   当我们掌握了上述的技术栈之后，我们已经拥有了编写微信小程序所有的技术。接下来学习的，就是微信小程序自己定义的一些组件的使用。

   微信小程序为开发者定义了七类基础组件和客服会话按钮，我们可以照着案例一点点学习。

7. API 接口

   学习完了组件，我们就要学习微信小程序中提供的一些 API 接口。微信小程序提供了大量的接口，比如网络相关的、多媒体相关的、文件相关的、设备相关的、界面相关的等等。

学习微信小程序的过程，应该还算是比较轻松愉快的。相关文档和 Demo 都是非常完善的，只需要找一本微信小程序的书籍，以及官方的 Demo 源码，自己上手修改调试几番，就能对微信小程序有一些深入的了解。

七、上手开发

上手开发微信小程序并不是一个很困难的事情。在我看完了于连林的那本书之后，在开发微信小程序的过程中，基本没有遇到过太过于烦扰的问题。

微信小程序已经设计的如此成熟，以至于在开发过程中，你能遇到的问题如果查询 API 文档都解决不了的话，也就两种了：

1. 布局问题

   布局真的是一个比较难的问题。在 WXSS 中可能随便修改一个数值，整个界面的布局就全部混乱了。这一块，只能通过自己的不停试错才能变得游刃有余。

2. 逻辑问题

   这一块也是只能通过自己的聪明才智，去思考如何解决现在的逻辑问题，该如何设计，有哪些解决方案，什么方案最好，以及如何实现等等。

开发完了微信小程序，是可以上传到腾讯后台的，通过微信小程序后台管理平台，可以体验、发布程序。只需要添加指定的体验者微信，就可以发送微信小程序的二维码给他们进行体验测试。发布也不难，只是需要将所有的接口全部替换为 Https 的，并且提交申请，审核后你的小程序就可以发布了。

八、总结

接触微信小程序三个月以来，觉得这还是一门挺有意思的技术。

对于个人开发者而言，只需要投入一些时间，就可以上手开发自己喜欢的东西，买个服务器，写点服务端后台代码，就可以自己维护一个小程序了。

当然，在这方面我还是刚刚接触，还有好多坑没有踩过，希望能够在日后的工作生活中继续体会。