小程序 block_【我们的第一个微信小程序】第一篇：微信小程序初探

什么是微信小程序？

在之前的文章里我们曾经实现了一个完整的猜数字游戏，但是这个游戏有个问题，就是每次玩的时候我们都要把代码复制到浏览器的控制台里运行才行，而且这就要求得有一台电脑。那我们可不可以把这个程序做成一个App放到手机上呢？这样我们就可以很方便地在手机上打开来展示给其他人，或者在聚会上玩一玩了。

接下来我们就会学习微信小程序，也就是可以在手机的微信App里打开的程序。

我们先来看看微信小程序长什么样子。

安装小程序开发工具

第一步：下载安装程序

• 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

第二步：打开下载下来的文件

第三步：安装微信开发者工具

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

https://open.weixin.qq.com/connect/confirm?uuid=011oAhvUtrOhna2V (二维码自动识别)

创建第一个微信小程序

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

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

最后一个“AppID”就是我们的小程序的“身份证号”了，这里我们直接点击下面红框里的“测试号”三个小字让程序自动生成就好了。

好的，万事俱备，我们可以点击右下角的绿色“新建”按钮创建我们的第一个小程序项目了。

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

右边的下半部分我们很熟悉了，和我们在浏览器里用的控制台所在的“开发者工具”很相似，在这个里面也能做一些类似的操作。但是我们原先用过的一些浏览器内置对象和内置函数在这个里面就没有了，毕竟那些是浏览器自带的，但是小程序没有这些功能。

右边的上半部分是小程序里代码文件显示和修改的地方，也就是我们写程序的地方。左侧是一个文件夹/文件的树形目录，在上面单击一个文件之后，这个文件就会显示在右边来提供给我们修改了。

猜猜我是几？（小程序版）

要写一个小程序，我们先来看看小程序里都有什么。把文件编辑窗口左侧的树形目录全都打开，我们可以看到下面的这些文件。第一个是一个叫pages的文件夹，它里面放着的是另外两个文件夹index和logs，这两个文件夹分别代表一个页面。pages文件夹中放的就是小程序里面的页面，每个子文件夹是一个页面，所以index是一个页面，logs是另外一个页面。

每个页面里都有四个长得很像的文件，它的后缀都是一样的，只是前面的文件名不一样，因为这些文件的文件名都和他们所在的文件夹名字是一样的。这四种文件分别是：

1. .js文件，这个是我们目前最熟悉的了，它里面放的就是我们的JavaScript代码；
2. .json文件，一般以json结尾的文件在小程序里都是用来保存配置的文件，里面有这个页面的一些基础信息；
3. .wxml，这个是用来定义页面布局的文件，我们后面会详细介绍；
4. .wxss，这个是定义页面样式的文件，样式就是为了让页面更好看的一种东西，可以把它当成网页的美图秀秀，这个我们会在之后的文章里做详细的介绍。

下面其他的一些js文件、json文件和wxss文件我们暂时不用理会，以后需要的时候就自然会用了。接下来我们重点要学的就是页面中的这四种文件。

wxml文件

我们在刚创建的小程序项目里其实已经可以看到页面了，在左下角我们可以看到当前预览窗口里面显示的页面是在哪个文件里的，像现在项目里预览窗口显示的首页的文件地址就是pages/index/index。我们可以在窗口右边上半部分的目录里找到pages/index/index.wxml这个文件，然后单击文件来打开它。

打开之后我们就可以看到下面这个画面了，右边就是index.wxml这个文件的内容。

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

<view>
  <view>
    <button> 获取头像昵称 </button>
    <block>
      <image></image>
      <text>{{userInfo.nickName}}</text>
    </block>
  </view>
  <view>
    <text>{{motto}}</text>
  </view>
</view>

大家可以仔细看看这些标签的排列有什么规律。

在上面我们可以看到好几种标签，有<view>、<text>、<block>、<button>，他们各自表示的是:

1. <view>，一般视图容器，也就是说它代表的就是页面中空白的一部分，没有什么特殊的功能，但我们可以用代码去修改它，也可以往它里面塞其他东西；
2. <text>，代表一段文本，在上面的代码中微信号的昵称和下面的“Hello world”这些文字都是用<text>标签来表示的；
3. <block>，这个元素只是拿来包装里面包含的多个元素的，也同样没有其他功能；
4. <button>，这个元素代表一个按钮，按钮是可以点击的。

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

1. 普通标签，写法是一对尖括号<>中带有标签名的开始标签<xxx>和一个标签名前面带有/的结束标签</xxx>，比如<view>标签体</view>或者<text>标签体</text>

• 标签体里可以包含普通的文字，也可以包含其他标签，如果一个标签a的标签体里包含了标签b，那么标签b就被称为标签a的子标签。

1. 自闭合标签，还有一种标签的写法就是不需要结束标签，而是在开始标签的最后加上一个/，比如<button />。这样的标签就不能有本来应该在开始标签和结束标签之间的标签体了，所以也不可能有任何的子标签了。

• 但是自闭合标签还是可以有标签属性的，就是在尖括号<>里的那些xxx=yyy格式的代码，这些标签属性也是非常有用的，我们会在以后慢慢接触到

这里还要提到的一点是，对于在标签体里被包含的标签来说，开始和结束标签都必须在同一个标签体里。也就是说如果这么写的话就是错误的了：

<view>
    <text>
</view>
    </text>

一定要写成这样：

<view>
    <text>
    </text>
</view>