第一章：一文了解微信小程序

小程序究竟是什么？

顾名思义，「小程序」本质上与咱们日常常用的 App 和操做系统同样，都是一段电脑程序。你能够将小程序理解为「运行在微信上的 app」。

与普通的 App 不一样的是，小程序的语言使用网页前端的技术栈，而且使用 JavaScript 运行环境，至关因而一个浏览器。

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

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

除了使用层面自己的良好体验，由由于小程序是直接集成于微信中的，因此它还能够配合微信完成传统 App 和 HTML 5 没法达成的功能。

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

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

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

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

直到 2016 年 11 月，小程序平台宣布公测，全部符合资格的组织均可以注册小程序账户。这次公测正式引爆公众对小程序的热情，许多企业连夜注册小程序账户，但愿能够尽快尝试这个新平台。

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

1、小程序有什么特色？

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

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

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

2、了解小程序开发语言

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

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 的简单介绍到这里。

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

开发前准备

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

1、开发者工具

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

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

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

下载好开发者工具以后，咱们天然须要进行安装。macOS 与 Windows 两个版本的开发者工具安装方式有些许差别：

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

3、新建小程序项目

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

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

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

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

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

使用开发者工具进行开发

「微信 Web 开发者工具」主要包含四个部分。

顶部为工具栏，可对开发者工具的账户、窗口显示进行调整，或是执行编译、预览或上传小程序的操做。

左侧为模拟器，开发中的小程序代码，能够直接在预览区中查看模拟运行效果。

右侧上半部分为编辑器，能够在其中浏览小程序工程目录、直接编辑小程序代码。

右侧下半部分为调试器，小程序的运行结果、输出等信息，会在这部分进行显示。

开发者工具提供的功能、界面等都相对清晰、简单，咱们只须要在代码编辑器写好代码，在模拟器就能够看到相应运行效果；若是运行出错，在调试器中，也能找到详细的错误信息。

4、小程序帐号

咱们已经了解如何使用开发者工具来开发小程序、管理小程序项目。此时，若是你尚未注册小程序，你只能在「预览」状态下新建小程序项目，一部分开发功能将没法使用。

那咱们应该如何注册小程序账户呢？注册的时候，须要留意哪些问题呢？在本文中，咱们就来手把手教你们，如何注册一个小程序。

小程序注册流程，与公众号注册流程差很少。

你须要进入 mp.weixin.qq.com，点击右上角的「当即注册」连接，在「账户类型」页面中，选择「小程序」。

点击「小程序」后，你须要填写邮箱、密码等账户基本信息。它们用于你注册后登陆小程序。

须要注意的是，已经绑定其余的公众号、小程序、我的号的邮箱，不能从新注册新的小程序。

也就是说，你在微信里与微信号绑定的邮箱，或是在公众平台注册公众号所用的邮箱，是不能用于注册小程序的。

提交后，填写的邮箱会收到一封确认注册邮件，你须要点击邮件中的确认连接，而后填写并验证小程序的主体信息。

填写主体信息的过程当中，不一样的主体，验证方式也有差别。

若是你是以我的身份进行注册，在「主体类型」一项，你须要点击「我的」。以后，你只须要在弹出的表单中填写资料、完成验证，就能够直接完成注册小程序。

须要注意的是，验证过程当中，你须要验证你的手机号，并使用你本身的微信号扫码确认。

以组织身份注册时，你首先须要根据实际状况，在「主体类型」中选择适合的组织类型。以后，页面会根据你的选择，显示信息登记的表单。

对于企业来讲，小程序能够选择不通过认证而完成注册。填入企业名称以后，页面会显示可用的注册方式，包括小额打款以及微信认证。

可是，未认证的小程序在开发者数量、可用能力方面，会与已经过认证的小程序会有一些差别。

在注册过程当中，页面也会要求填写小程序管理员的信息。

与我的主体小程序注册流程一致，你一样须要提供本身的我的信息，也须要进行短信验证、扫码验证。注册完毕后，你就能够对小程序进行管理。

主体验证经过后，你就能够进入到小程序的后台。以后，你就能够根据页面提示，补充小程序的名称、标志，而后下载开发者工具，开始开发你的小程序。

访问「知晓云」（cloud.minapp.com），学习更对小程序开发课程。