五个套路看懂微信小程序开发（上）

你或许听说过，快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现，这个教程虽然简单，但对于微信小程序开发来说，80%的套路都能从这里学习到，你的小程序从0到1可以从这里实现突破。

一个页面=4个文件

小程序的每个页面都是由4个文件组成的 ，前两个最重要，是我们的重头戏。先给这几个文件一个简短的解释：

js 文件——数据来源；

wxml 文件——页面的骨架；

wxss 文件——页面的装饰效果；

json 文件——可选，配置页面上的零件。

另外，本文的目标读者是真心想要尝试小程序的无经验开发者，英语水平要求中学及格水平以上。另外，为了你可以动手跟着做，请下载微信开发工具并注册微信小程序。部分语言过于通俗是为了更好的理解。

绑定数据

现在就开始我们的第一个套路。

小程序简易教程 -> 编写代码 -> 创建页面 -> 第二个代码块

依照小程序的定义，小程序中的每个页面都包含一个js文件。在一个 js 文件中，你需要列出这个页面上需要的数据（上图红框中的内容）。也就是说，data下面规定的数据（请努力去上图中找到 data），就是页面上需要用到的数据。这就叫做数据绑定。

「数据绑定」对你来说可能是个新词汇。这里先不急着理解，我们的目标是会用，会用了就能理解一大半了。怎么应用「数据绑定」呢？只需要两步：1，声明；2，使用。

声明的格式是这样的（类似上图中的内容）：

Page({
 data: {
   greeting: 'Hello World'
 }
 //...
})

在微信开发工具中是这样的：

注意看红框中的内容，和上面的代码块是一样的

注意看 data 那个部分，我声明了名字为greeting的数据。（所谓数据，学名应该叫变量，但在我们的教程里可以近似理解。）

第二步是使用。使用的意思是，我们到页面上把这个数据显示出来。方法是这样的：{{greeting}}

注意看{{ }}之间的部分，我们只需要把刚刚定义好的数据名称写在两个大括号里就行了。顺带一提，这种使用数据的方法，叫做八字胡方法（英文Mustache），因为加上的两个大括号可以想象成嘴上的胡子。或许记住了胡子，你就记住了这种使用方法。

这就完成了我们的第一个套路——数据绑定。简单吧！但是这里有一个疑问，我们在哪里使用绑定好的数据呢？也就是问，在哪里使用{{greeting}}这句程序呢？

答案是我们的页面上，也就是 wxml 这个文件中。这就是我们的下一个套路——显示数据。

显示数据

上一个套路的讲解中，我们出现了这样一句程序{{greeting}}。这是在使用数据。但这行代码的完整版其实是这样的：

<text class="your-class">{{greeting}}</text>

在微信开发工具中的样子是这样的：

还是看红框内的内容，也请注意这是在 wxml 文件中

我们对{{greeting}}这一部分已经熟悉，但对于它前面和后面的代码还不熟悉。所以我们现在进行讲解。

显示数据时，我们其实希望显示出来的内容是很好看的。但如果你只写成{{greeting}}，显示出来的效果并不好：

最左边红框中的文字一点装饰效果都没有

为了让显示数据有更好看的效果，我们需要对{{greeting}}进行装饰。怎么装饰数据呢。我们要用2个东西：标签、样式表

什么是标签，我们从例子中来理解：{{greeting}}两边的<text class="your-class">和</text>就是标签，而且分别叫开始标签和结束标签。（你能发现开始标签和结束标签的区别么？）

开始标签可以定义一些属性，以便调整显示的结果。这就像是你画一幅画可以选择用毛笔，来画出国画的效果。在上面的例子中，class="your-class"就是<text>这个标签的一个属性，<text>标签会表现出class="your-class"的规定的样子。

那么class="your-class"这个属性的完整意思是什么呢？他的意思是<text>的 class 对应样式表中的your-class。对，你可以把等号理解为对应。而后面的"your-class"就是我们在样式表中规定好的一种装饰效果。

这里出现了我们的第2个工具：样式表。样式表是写在 wxss 文件中的，我们来看看怎么写：

.your-class {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: blue;
}

在开发者工具中的样子是这样的：

你通过理解代码中英文的字面意思就可以了解到，我把字的 color 定义为蓝色，把位置定义为 center。

最重要的，是这个样式的名字，叫做.your-class，而<text>标签中的 class 属性，正好指向这个样式，所以<text>中的数据会变成中间位置的蓝色字。（在.your-class的最前面有一个点，那是对应<text>中 class 属性的特有标记，还有类似的标记[1]，可以在以后更多的实践中去理解)

到这里，我们的前两个套路就已经简单的介绍完了。总结一下：

• 绑定数据：在 js 文件中的 Page 模块下面定义 data 的名字，并用八字胡方法({{ }})来使用数据。
• 显示数据：在 wxml 中给数据加上标签（比如 text 标签），并且给标签加上属性（比如 class 属性）。class 对应的样式在 wxss 文件中写好。

不过，我们这里好像缺了什么。我好像没教大家怎么写最后一步的 wxss。微信文档说，wxss 和 css 大体上都是一样的。大家可以去找找css的书，或者期待我后续的实践教程，带你一步一步写一个能上线的小程序。

现在，如果你把这两个套路循环用起来，已经能解决很多问题了。想要多显示一个数据，就先在 js文件中绑定这个数据，然后去 wxml 文件中装饰数据。下面是绑定两个数据的示例代码：

Page({
  data: {
    greeting: 'Hello World',
    farewell: 'Goodbye!'
  }
  //其他内容
})

而对应显示这两个数据的示例代码是这样的：

<!--index.wxml-->
<text class="your-class">{{greeting}}</text>
<view class="your-class">{{farewell}}</view>

在开发者工具中显示的样子是这样的：

我在写教程的过程中升级了一次开发者工具，所以界面有变化

大家可以看到，我在最右侧的红箭头处加入了一行新代码， 然后显示出了新数据。但是，这次不一样的是，我用了一个叫做<view>的标签，而不是之前的<text>标签。其实 wxml 文件中可以使用很多种标签来显示数据，有负责显示图片的，有可以负责滚动效果的的，他们都被写在微信文档中，你在实践的过程中可以查看。

比如，我使用了一个叫做<icon>的标签，然后显示出了一个圆形的图标：

有了「绑定数据」和「显示数据」这两个套路，我们已经能够写出一个简单的页面了。能够做到展示，但没有交互，所以我们进入第三个套路：绑定交互。

绑定交互

绑定交互这个名字听起来有没有和之前的「绑定数据」很像？他们的操作方法也很相似。

绑定交互分为两步：

声明：在 js 文件中声明交互的名称。

使用：在 wxml 文件中使用这个交互。

先来看「声明」。怎么声明一个交互呢？（或者用微信文档的说法，怎么来声明一个事件呢？）

请在 js 文件中写下这样几行代码，就在我们之前绑定数据的 data 模块下面：

   changeWord: function() {        this.setData({          farewell: 'Never Say Goodbye!'
       })
     }

在开发者工具中的样子是：

这样，我们就声明了一个叫做changeWord的交互。这个交互的具体内容是，改变 farewell 这个数据的内容。原来是Goodbye!，现在我们要改成Never Say Goodbye!。

而这个声明中function，this，setDate都是什么意思，我们在后面实践中再讲，大家关注的重点是这个声明中最前面的部分，也就是这个交互的名字changeWord

我们已经声明完了这个交互，现在就该进入第2步——使用交互。请在 wxml 中插入这样的代码片段：

   <button bindtap="changeWord" type='primary' class="your-button" size='default'>改变文字</button>

在开发者工具中的的样子是这样的：

这里的重点是bindtap="changeWord"，大家可以看到我们刚刚声明的交互changeWord出现了，那前面的bingtap=是什么呢？他的意思是：把点击事件的交互对应到changeWord。当你点一下图中的那个绿色按钮，我们的页面就会把Goodbye!换为 Never Say Goodbye!

除了利用标签的bindtap属性来绑定交互，还可以用bindlongtap（绑定长按事件），bindtouchmove（绑定触摸后移动事件）等等，他们都有各自的效果。具体内容都被写在事件相关的文档中，你可以亲自试一下。

你会发现他们的开头都是 bind，就好像单词的前缀一样，加上tap，longtap等后缀，就能帮你绑定一个交互。（绑定事件的前缀还有另外一种，叫catch，比如catchtap，catchtouchmove等等，你可以结合文档，试验一下他们的效果）

到这里，我们已经能够简单的绑定交互了。但绑定交互的核心目的是要改变页面上的显示，从而给用户一个反馈。

下期就让我们继续学习后面几个套路：修改显示、跳转及调取数据。