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代码。