小程序到底是什么？

顾名思义，「小程序」本质上与我们平常经常使用的 App 和操作系统一样，都是一段电脑程序。你可以将小程序理解为「运行在微信上的 app」。

与普通的 App 不同的是，小程序的语言使用网页前端的技术栈，并且使用 JavaScript 运行环境，相当于是一个浏览器。

但是，小程序也并非是单纯的 HTML5。与普通的 HTML5 不同的是，小程序具有高级的硬件处理接口（例如蓝牙、重力感应等），同时运行环境也更接近原生应用，效率更高。

正因体积小，小程序才可以做到「即开即用」——对于用户感知来说，小程序几乎是点击后等待一两秒，就可以使用，就像是打开网页链接一样，使用后，用户甚至不需要额外管理小程序。

除了使用层面本身的良好体验，由因为小程序是直接集成于微信中的，所以它还可以配合微信完成传统 App 和 HTML 5 无法达成的功能。

例如，分享卡片可以携带相应微信群信息，当用户从微信群进入小程序，开发者可以了解到用户从哪一个群进入小程序。

小程序是如何发展起来的？

在 2016 年 9 月，有部分开发者收到了微信的邀请，尝试新的「小程序」平台，引发大量关注。

在此前，张小龙曾在公开场合宣布，微信将会推出「应用号」平台。外界普遍猜测，「小程序」即此前张小龙所提到的「应用号」。

直到 2016 年 11 月，小程序平台宣布公测，所有符合资格的组织都可以注册小程序帐户。此次公测正式引爆公众对小程序的热情，许多企业连夜注册小程序帐户，希望可以尽快尝试这个新平台。

2017 年 1 月 9 日，小程序正式开放使用。截止今日，市面上已有不计其数的微信小程序。微信用户也已经逐渐习惯使用小程序，小程序变为他们的「微信生活」中，不可或缺的一部分。

一、小程序有什么特点？

在前面，我们提到：小程序既不是网页，也不是 App，它是一种融合了网页和 App 两者特点的新应用形态。

相比较于 App 和网页，小程序具体拥有以下特点：

随时加载，随时使用拥有强大接口和能力易学、易开发

二、了解小程序开发语言

今天的教程，我们将不讨论有关小程序开发的具体内容，我们将会为大家带来更基础的一些东西，帮助大家在未来快速上手开发小程序。

1. 视图描述语言

你在小程序中看到的文字、图片、按钮等，都被称做「视觉组件」。

在小程序中，想要控制这些视觉组件，我们需要使用到 WXML、WXSS 两种语言。如果你不了解它们，你可能会认为「微信创造了新的编程语言」。

但实际上，WXML 和 WXSS 都是从以往就有的语言演变的。

1） WXML

WXML 的全称是微信标记语言（WeiXin Marked Language），从名字中我们就知道，它其实是由 XML 和 HTML 演变而来的。

WXML 的作用是描述小程序页面中应该有什么视觉元素。它的语法并不复杂。最简单的 WXML 代码如下所示：

<text>Hello World</text>

它的意义是，在小程序页面中显示 Hello World 的文字（text）。

2） WXSS

WXSS 的全称是微信样式表（WeiXin Style Sheet），它的?语法与 CSS 没有什么区别。

它的作用是，定义页面中的元素的样式是怎样的。?例如：

text{
  color: red;
}

它的意思是，将 WXML 中元素的字体颜色（color）修改为红色（red）。

3） WXML 与 WXSS 协同使用

将 WXML 和 WXSS 放在一起用，我们就可以自由控制小程序中的视觉元素展示方式、样式了。

如果你有一组元素需要使用同样的样式，或是有一个特定的元素需要使用某个格式，那么你可以使用类（Class）和 ID 特性。

使用类，你可以针对一组同类视觉元素，修改样式。例如，我们希望将小程序中的所有用户名都显示为红色，我们可以这样写：

<!-- WXML -->
<text>知晓程序</text>
 
/* WXSS */
.username{
  color: red;
}

2. 逻辑语言

通过视图层，用户就可以与小程序产生交互。但小程序的逻辑处理（包括网络数据交互、运算、逻辑判断等），都需要用 JavaScript（JS）语言写成的代码完成。

我们先从页面逻辑入手，编写简单的 Hello World 程序来接触 JS 代码。

Page({
  onLaunch(){
    console.log('Hello World!')
  }
})

运行它，我们就可以在控制台中看到结果了。

只需简单几行代码，就是一个完整的小程序 JS 程序。调用 JS 函数很简单，只需要写函数的名字，并在后面括号中附带参数，就可以调用。

函数名(参数 1, 参数 2, …)

有关于小程序开发的三种语言 WXML、WXSS 和 JS 的简单介绍到这里。

请注意，本篇只是对这些语言语法的基础讲解。虽然本教程会在未来的课程中教授更深层次的内容，但同时我们也建议，没有前端开发基础的同学，可以先去学习一些基础的前端开发。

开发前准备

工欲善其事，必先利其器。在正式开发小程序之前，我们还需要做一些准备工作。

一、开发者工具

首先，我们就来初步认识小程序的开发环境和必备软件：「微信 Web 开发者工具」。

二、下载、安装开发者工具

我们可以到到 mp.weixin.qq.com 下载这个工具。由于官方文档不断在变化，所以地址随时有可能会变更。微信关注「知晓程序」公众号，回复「工具」，就可以随时获取最新的开发者工具下载地址。

下载好开发者工具之后，我们自然需要进行安装。macOS 与 Windows 两个版本的开发者工具安装方式有些许差异：

Windows 版下载好安装程序后，直接双击打开进入安装流程。安装完毕后，一般可在桌面即可启动开发者工具。 macOS 版下载好镜像文件后，直接拖动到「Application（应用程序）」文件夹中，在 LaunchPad 就可以启动开发者工具。大家可以根据相应提示，安装、启动开发者工具。

三、新建小程序项目

安装完毕后，我们就可以在开发者工具中，新建小程序工程项目了。

如果是首次启动「微信 Web 开发者工具」，你需要使用微信号扫描二维码进行登录。在开发过程中，登录的微信号将会用于微信开放能力相关接口（例如，获取用户资料、发送模板消息等）的调试。

登录完成后，我们就进入项目类别选择的窗口。在这一步，我们选择「小程序项目」。

首次点击「小程序项目」时，开发者工具会直接要求我们新建一个小程序项目。

项目目录：在这个字段中为小程序工程选择一个文件夹，用于存放小程序项目的代码。 AppID：如果你已经有一个小程序的 AppID，可以在这里将它填入。如果还没有，可以选择下面的「点此体验」链接。项目名称：为小程序项目起一个名字。这个名字只针对开发者工具中识别，不会影响小程序本身对外显示的名字。确认无误，点击「确定」，就可以新建小程序项目。之后，我们就进入「微信 Web 开发者工具」的主界面。