小程序冷启动01 - 磨刀不误砍柴工

工欲善其事 必先利其器

前两天生病，现在基本好转，今天继续小程序冷启动之旅。

在前一篇的《小程序冷启动00 - 小程序的前生今世》一文中，谈到小程序的概念、应用场景以及为什么你需要学习小程序。这篇文章主要聊聊开发小程序的准备工作及开发环境的搭建。

对于一名非程序猿（媛）来说，一听到开发程序，或许内心就会产生莫名的恐惧感。一是对程序的抽象概念无法理解；二是对代码的迷糊。既然是零启动，所以先谈谈与程序有关的基本概念，消除一些人的内心恐惧。

什么是程序？

程序，顾名思义可以理解为处理业务的既定方法或先后顺序，比如法律程序、处理程序等。但在计算机领域，程序是英文的program的中文翻译，意指一组计算机指令，这组指令通过计算机执行可以获得预期的结果。这个与非计算机领域的程序概念类似，都要经过一些步骤的执行，都会有一个预期的结果。

举个例子，计算1到100的和。你会先构思一个计算方法，比如先求1加2，其和加上3，其和再加上4……，最后一直加到100。这其中的每一步都可以想象为一个指令，将这所有的指令组合起来，就是一个计算1到100之和的程序。

当然关于程序，还有更加专业的定义与解释，但对于初学者，暂时可以不用关注。

什么是程序语言？

程序是由一组指令构成，用来表示和描述指令的方法就是程序语言。到目前为止，能被计算机识别和执行的语言已高达上千种，而且这个数量还在不断地增加。但各种语言的使用率相差很大，下图是一个目前主流的语言统计情况：

TIOBE：2017年5月全球编程语言排行榜

从图中可以看出，使用率最高的是Java，其次是C，再次是C++

那么代码是什么呢？代码就是程序语言的具体的表现形式，包括语法与语义两部分，这点与我们常用的汉语与英语是完全一样的。

到目前为止，想必你对程序概念已经有了个清晰的认识，希望可以消除你内心对程序的恐惧和陌生感。

小程序使用什么语言开发？

开发小程序主要用到三种语言：HTML、CSS以及Javascript。不过细心的你可能会发现，HTML和CSS这两种语言都没有在上图的语言排行榜出现，难道它们不够主流不够流行吗？

不是的。HTML全称为超文本标记语言（HyperText Markup Language，简写为HTML），顾名思义，它是一种对文本的标记，即对文本组织和排列的定义和描述，但不会对文本和数据进行处理。在计算机领域，凡是不能对数据进行处理的语言，都不能当作程序语言对待，因而HTML虽然也带有语言二字，但无资格进入程序语言的行列，当然你也无法在榜单上看到它，虽然它是目前使用最广泛的语言（没有之一）。

同样，CSS全称为层叠样式表（Cascading Style Sheets，简写：CSS），用来表现HTML或XML（另一中标记语言，类似HTML）样式的语言，它也不对数据进行处理，所以也不被当作程序语言看待，虽然也是被使用最广泛的语言之一。

如果说HTML是对文本的标记和组织，那么CSS就是对HTML标记的描绘。正如画一幅画，可能会先画出动物的轮廓，然后在轮廓的基础进行着色，最终才能完成一副维妙维肖的动物作品。HTML就是勾勒轮廓的过程，CSS就是选择各种不同颜色进行着色的过程。

HTML和CSS最主要的用途在于网页设计。所以当你打开一个网页时，你应该首先要想到它是主要由两部分组成，一个是HTML，另一个是CSS。下图是一个简单的包含HTML和CSS的页面。

Hello World

其对应的HTML和CSS为：

HTML与CSS

关于HTML及CSS的更多介绍与学习，文末有推荐学习指南。下面来介绍一种真正的程序语言Javascript。

随着互联网的兴起，Javascript被使用的越来越广泛，在上图的排行榜中位居第七。在网页设计中，它用来处理页面的动态内容与交互。比如你想在一个页面中计算123乘以123的值，就可以通过Javascript代码来实现，将结果及时显示和反馈给你。目前基于Javascript有各种前端开发框架，但对于小程序开发，暂时不需要关注那些框架，简单基础的Javascript就可以满足。文末同样有给出Javascript的入门与学习指南。

至此，关于程序的相关概念及小程序所使用的语言全部介绍完毕。现在开始介绍小程序开发所要做的基本工作。

1. 注册一个小程序帐号

在微信的公共平台上选择小程序入口，填写相关的信息，作为开发练习，建议注册个人类型的小程序。如果没有邮箱需要，可以先注册一个免费邮箱，推荐163和QQ邮箱。

注册步骤

2. 获取AppID

在注册完成之后，登录帐号，在设置页面中的开发设置中找到AppID，保存在一个记事本里，创建小程序时会用到。

找到AppID

3. 安装微信开发工具

下载微信小程序开发工具，注意根据你电脑的操作系统选择相应的下载版本，一般来说windows系统选择windows 64，苹果电脑选择mac。

版本选择 安装完成启动时，要求扫描登录

4. 了解微信开发者工具

扫描登录之后，选择新建项目。然后填写刚才获取的AppID，给项目取个名字，选择项目存放的路径，最后确认新建项目。开发工具的具体使用，在编写代码的过程中介绍。

新建项目 新建项目 编辑，调试与项目

到这里，开发小程序的准备工作已经完成，接下来就可以进行小程序的开发。不过在开发之前，需要明确想要设计一款什么样的小程序产品，所以在下一篇会介绍一些产品设计的基本知识，并着手开始编写一些简单的代码。

开发程序是个实践与积累的过程，关靠看和想无法学会编程，一定要动手写代码去试试，去摸索，只有趟过坑，你才会真正成长。

今天给大家的作业就是花几天的时间去了解和掌握HTML、CSS及Javascript基础知识。

教程推荐：
HTML/CSS教程：http://www.w3school.com.cn/html/
Javascript教程：http://www.w3school.com.cn/b.asp，仅看基础部分。

在学习过程有什么问题，可以后台给我留言或发私信给我，我尽量及时回复。