1.3 Hello World项目

按照传统惯例，我们应该编写一个Hello World项目。可以先参考下面的视频来编写代码。编写完成之后，我们再来看看这段代码都涉及哪些内容。

要了解如何编写Hello World项目，请访问右侧二维码。

Hello World项目

1.3.1 创建Hello World项目

要创建Hello World项目，首先要启动微信开发者工具，并单击“+”。接下来，要将项目名称修改为Hello World，并将目录中的目录名也修改为Hello World，如图1-3所示。我们需要为每一个小程序都指定一个AppID。为了能够尽快开始编写程序，暂时单击“测试号”，使用自动生成的AppID。最后，将开发模式设置为“小程序”，并将语言设置为“JavaScript”，单击“新建”。

图1-3 创建Hello World项目

1.3.2 设置微信开发者工具

在创建好项目之后，我们先不要急着开始开发，而要设置一下微信开发者工具。在菜单中单击“设置”，选择“通用设置”，并切换到“外观”选项卡。在“外观”选项卡中，我们可以设置微信开发者工具的主题。不习惯深色主题的读者，可以切换到浅色主题，如图1-4所示。

图1-4 设置微信开发者工具的主题

接下来，我们切换到“编辑器”选项卡，按照图1-5所示进行编辑器设置。

图1-5 微信开发者工具编辑器设置

相比于默认设置，我们取消选中“保存时自动编译小程序”。选中“保存时自动编译小程序”，则会在我们每次保存文件时重新编译小程序。这会导致3方面的问题。首先，编译小程序会消耗大量的时间，拖慢保存文件的速度，从而影响我们的开发体验。其次，在开发过程中，我们会经常保存文件，避免丢失代码，而这些还未完成的程序通常不能通过编译，因此，在保存时编译程序会产生大量没有意义的错误，从而分散我们的注意力。最后，每次编译后，模拟器中的内容都会恢复到初始状态，如果我们需要参考模拟器中的内容来编写代码，那么这种行为就会对我们的开发过程造成干扰。

我们还取消选中“自动折行”。由于自动折行可能会导致代码出现类似下面的换行效果：

myObject.functionCall("some parameter").nextCall("some other parameter").lastCall(1024);

我们能看到，自动折行导致单词从中间“断开”了。这显然会影响我们的阅读。同时，自动折行也不能保证换行的结果是意义明确、方便阅读的。因此，我们取消选中“自动折行”，手动对代码换行。上面代码的手动换行结果如下：

myObject.functionCall("some parameter")
  .nextCall("some other parameter")
  .lastCall(1024);

可以看到，我们可以在函数调用处进行手动换行，从而确保换行的结果意义明确，同时方便我们阅读代码。

此外，我们保留了在编译、预览、上传时自动保存所有文件的功能。

1.3.3 微信开发者工具的界面

完成了主题和编辑器设置之后，我们来了解一下微信开发者工具的界面。微信开发者工具的界面主要包括3个部分，即模拟器、编辑器以及调试器，如图1-6所示。

（1）模拟器用于显示和运行微信小程序。1.1节已经提到过，我们可以在模拟器中选择手机的型号。

（2）编辑器用于编写代码。要想在编辑器中打开文件，我们首先需要在编辑器左侧的“资源管理器”中找到需要编辑的文件，双击它，即可在编辑器中编辑。

（3）调试器用于调试微信小程序。我们会在后面的章节介绍如何使用调试器。

图1-6 微信开发者工具的界面

1.3.4 编写WXML代码

我们首先编写WXML代码。WXML用来编写微信小程序的界面。在“资源管理器”中展开pages→index文件夹，双击index.wxml，就可以在编辑器中打开index.wxml文件，文件内容如图1-7所示（为了节省空间，这里关闭了模拟器和调试器）。

图1-7 打开index.wxml文件

接下来，我们删除index.wxml中所有的代码，并替换为如下内容：

<view>
  <button bindtap="button_bindtap">Click Me!</button>
  <text>{{ result }}</text>
</view>

上述代码如果让你觉得困惑的话，那么尝试用“英语”而不是“计算机语言”去理解这些代码，可能会觉得简单一些。将上面的代码“翻译”成中文，差不多就是下面的形式。

（1）视图（view）中有一个按钮（button）和一个文本（text）。

（2）对于按钮（button）来说：

① 绑定单击（bindtap）到button_bindtap函数（本书会在1.3.5节介绍button_bindtap函数）；

② 按钮（button）的内容是“Click Me! ”。

（3）对于文本（text）来说：文本（text）的内容是result变量的值。

上述代码中特别让人费解的部分，可能是“{{ }}”。它的“学名”叫“数据绑定”。知道它的“学名”可能没有让我们理解它的作用是什么。现在，我们只需要知道：

<text>{{ result }}</text>

会让文本显示出result变量的值就可以了。至于result变量的值是什么？我们很快就会知道。

我们不如运行一下微信小程序。单击微信开发者工具顶部工具栏中的“编译”按钮，就可以在模拟器中看到运行效果了，如图1-8所示。

图1-8 微信小程序的运行效果

如果单击“Click Me!”按钮的话，会发现没有任何效果。如果打开调试器，并切换到“Console”选项卡的话，会看到图1-9所示的内容。

图1-9 单击“Click Me!”按钮后的错误提示

图1-9提示的错误是：

Component "pages/index/index" does not have a method "button_bindtap" to handle event"tap".

产生这个错误，是因为我们还没有编写JavaScript代码。没关系，只要能看到“Click Me!”按钮，并且在单击按钮后能够触发上面的错误，就说明 WXML 代码已经没有问题了！接下来，我们编写JavaScript代码。

1.3.5 编写JavaScript代码

在“资源管理器”的pages→index文件夹中，双击index.js，删除其中的代码，并替换为如下的代码：

Page({
  button_bindtap: function () {
    this.setData({
      result: "Hello World!"
    });
  }
})

我们再次尝试用“英语”来理解一下上述代码。

对于页面（page）:button_bindtap是一个函数（function），它的功能是设置数据（setData），即将result变量的值设置为“Hello World!”。

真相大白！button_bindtap实际上是一个函数，它会将result变量的值设置为“Hello World!”。由于我们在WXML代码中使用：

<text>{{ result }}</text>

将文本的内容绑定为result变量的值，因此，button_bindtap函数执行之后，微信小程序中应该会显示“Hello World!”。让我们来测试一下。如果一切正常的话，测试效果如图1-10所示。

图1-10 微信小程序的测试效果

这样我们就顺利地开发了Hello World项目。 2dD6dcoUtYsQ3vveVjul4wMzb2XH7sbipe1DEglGx/8S0zCHP6IpEREZ4alZMNiO