什么是微信小程序？

在上一篇文章中，我们实现了一个完整的猜数字游戏，但是这个游戏有一个问题，每次玩的时候，我们都要把代码复制到浏览器控制台里才能运行，而这需要一台电脑。那么我们能不能把这个程序做成一个 app 放在手机上呢？然后我们就可以在手机上很方便地打开它，展示给别人看，或者在聚会上玩。

接下来我们来了解一下微信小程序，也就是可以在手机微信App中打开的程序。

我们先来看一下微信小程序长啥样。

安装小程序开发工具

步骤 1：下载安装程序

第 2 步：打开下载的文件

步骤3：安装微信开发者工具

第四步：打开微信开发者工具，用微信扫描二维码登录

（自动二维码识别）

创建你的第一个微信小程序

打开“微信开发者工具”之后，可以看到如下界面，我们点击右边的+号，就可以创建我们的第一个小程序了。

创建项目的界面如下，我们只需要填写前三项信息即可，第一项是项目名称，接下来我们来实现一个“猜猜我是谁？”的小程序版本，我们就取名为“-me”吧。第二个“目录”是项目保存的文件夹，我放在了D盘的文件夹里，大家可以放在自己喜欢的位置，点击右侧的绿色箭头，打开文件夹选择框。

最后的“”是我们小程序的“身份证号码”，这里我们只要点击下面红框里的“测试号”三个小字，就可以让程序自动生成。

OK，一切准备就绪，我们可以点击右下角的绿色“新建”按钮来创建我们的第一个小程序项目。

新建项目之后会自动打开编辑窗口，这个窗口主要分为以下几个部分，左边是一个类似手机端的预览窗口，我们可以在上面看到小程序的效果，而且这个界面都是可以点击的，和实际在手机上运行几乎一模一样。

右边下半部分我们很熟悉，跟我们在浏览器里使用的控制台所在的“开发者工具”很像，在里面我们也可以进行一些类似的操作。这个里面没有什么内置对象和内置函数，毕竟那些都是浏览器内置的，但是小程序没有这些功能。

右上部分是小程序中代码文件的展示和修改的地方，也就是我们编写程序的地方，左侧是一个文件夹/文件的树形目录，点击上面某个文件之后，该文件就会显示在右侧，提供我们修改。

猜猜我是什么？（小程序版）

要写一个小程序，我们先来看看小程序里都有些什么。打开文件编辑窗口左侧的所有树形目录，我们可以看到以下几个文件。第一个是一个名为的文件夹，里面还有另外两个文件夹和日志。这两个文件夹分别代表一个页面。文件夹中存放的是小程序里的页面，每个子文件夹都是一个页面，所以它是一个页面，另一个是另一个页面。

每个页面有四个文件，看上去非常相似。它们都有相同的后缀，但由于文件名与文件夹名相同，因此文件名的前面有所不同。这四个文件分别是：

.js文件，也就是我们目前最熟悉的，里面装的是我们的代码；.json文件，一般以json结尾的文件，用来保存小程序中的配置文件，里面装的是这个页面的一些基本信息；.wxml，这个是用来定义页面布局的文件，我们后面会详细介绍；.wxss，这个是定义页面样式的文件，样式就是为了让页面看起来好看点的东西，你可以把它看成是网页端的，我们会在后面的文章里详细介绍美图秀秀应用在网页端的布局。

下面的其他js文件、json文件以及wxss文件我们暂时不用关注，以后需要用到的时候自然会用到，接下来我们重点学习页面中的这四个文件。

wxml文件

我们其实在刚刚创建的小程序项目中是可以看到页面的，在左下角我们可以看到当前预览窗口显示的页面是在哪个文件中，比如当前项目预览窗口显示的首页的文件地址就是//。我们可以在窗口右上方的目录中找到//.wxml文件，然后点击该文件就可以打开。

打开之后我们可以看到如下图所示，右边是.wxml文件的内容。

在这个文件中，我们可以看到很多尖括号，这些东西我们称之为标签。比如，它就叫做视图标签。尖括号里的不同名字就是不同的标签，每个标签的用途也不同。尖括号里的第一个字就是标签名，标签名后面的 xxx=yyy 就叫做标签属性。如果我们把上面代码里的所有标签属性都去掉，我们就能看得更清楚了：

获取头像昵称 {{userInfo.nickName}} {{motto}}

您可以仔细观察一下这些标签的排列模式。

我们可以看到上面有好几个标签，其中包括、、、、它们分别的含义是：

，一个普通的视图容器，也就是它代表了页面的空白部分，本身没有什么特殊的功能，但是我们可以用代码来修改它，或者放其他的东西在里面；代表一段文字，上面的微信昵称，下面的文字“ ”，都是用标签来代表的；该元素只是用来封装其中包含的多个元素，本身同样没有什么其他的功能；该元素代表一个按钮，它是可点击的。

在wxml中，可以有各种各样的标签，一般有两种形式：

普通标签是一对起始标签，起始标签的名称用尖括号括起来，结束标签的名称前面有一个 /，例如标签主体或自闭合标签。还有一种方法可以编写不带结束标签的标签。例如，在起始标签的末尾添加一个 /。这样的标签不能有主体，主体应该位于起始标签和结束标签之间，因此不可能有任何子标签。

这里需要提一下的是，对于标签体中包含的标签，开始和结束标签必须位于同一个标签体中。换句话说，这样写是错误的：

必须这样写：