掌握官方教程，五步学会微信小程序开发

terry 2年前 (2023-09-23) 阅读数 75 #移动小程序

最近看微信小程序官方demo，发现这个教程虽然简单，但是80%的微信小程序开发例程都能学会从这里开始是的，你的小程序可以从这里实现从0到1的突破。

在开始之前，让我们先记下 100 个单词的基础知识。

一页 = 4 个文件

小程序的每一页由 4 个文件组成。前两个是最重要的，也是最重要的。首先对这些文件进行简单说明：

js文件——数据源；
wxml文件——页面骨架；
wxss文件-页面装饰效果；
json 文件 – – 可选，页面上的配置部分。

另外，本文的目标是真正想尝试小程序且缺乏经验的开发者，并且他们的英语语言能力至少需要高中证书。另外，为了继续操作，请下载微信开发者工具并注册微信小程序。

有些语言太流行，无法更好地理解。

绑定数据

让我们开始我们的第一个例程。

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

根据小程序的定义，小程序的每个页面都包含一个js文件。在一个js文件中，需要列出本页面需要的数据（上图中红框内的内容）。也就是说，data下提供的数据（请尝试搜索上图中的数据）就是页面应该使用的数据。这称为数据绑定。

“数据绑定”对您来说可能是一个新术语。这里先不要急于理解。我们的目标是能够使用它。一旦你会使用它，你就会明白大多数事情。

如何应用“数据绑定”？只需要两步： 1. 声明； 2.使用它。

声明的格式如下（类似上图的内容）：

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

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

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

注意数据部分。我宣布欢迎提供这些数据。（所谓的数据和学名应该叫变量，不过在我们的教程中大致可以理解。）

第二步是使用。使用的目的是在页面上显示这些数据。方法如下：

{{greeting}}

注意{{ }}之间的部分。我们只需要将我们刚刚定义的数据名称写在两个括号中即可。这种数据使用方法也称为小胡子法（英文为mustache），因为添加的两个大括号可以想象为嘴上的胡须。也许如果你记得胡子，你就会记得这种使用它的方式。

这样就完成了我们的第一个例程——数据连接。不要把事情搞得太复杂！

但是这里有一个问题，我们在哪里使用绑定数据？换句话说，{{greeting}}程序应该用在哪里？

答案就在我们的页面上，即 wxml 文件中。这是我们的下一个例程 - 显示数据。

显示数据

在上一个例程的讲解中，我们有这样一个程序{{greeting}}。这需要使用数据。但这行代码的完整版其实是这样的：

{{greeting}}

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

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

我们知道{{greeting}}部分，但你不知道它前后的代码。那么现在我们解释一下。

在展示数据的时候，我们其实希望展示的内容好看。但如果只是写{{welcome}}，显示的效果并不好：

左边缘红色字段中的文字完全没有装饰效果

为了让显示的数据更加美观，装饰需要{{welcome}}。如何装饰数据。我们需要使用 2 个东西：

标签
样式表

什么是标签？我们通过例子来理解：{{greeting}}两边的和就是标签，分别称为开始标签和结束标签。（看到开始标签和结束标签的区别了吗？）

开始标签可以指定一些属性来修改显示的结果。就像你画画的时候，你可以选择用画笔来创造国画的效果。在上面的示例中，class="your-class" 是标签属性，标签将根据 class="your-class" 属性进行行为。

那么 class="your-class" 属性的完整含义是什么？这意味着该类与样式表中您的类相匹配。是的，等号可以理解为对应。其背后的“自己的类”是样式表中定义的装饰效果。

这是我们的第二个工具出现的地方：样式表。

样式表写在wxss文件中。我们看看怎么写：

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

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

如果你明白代码中英文的字面意思就可以理解了，我定义了单词的颜色为蓝色，位置为中心。

最重要的是这个样式的名字，叫做.your-class，标签中的class属性只指向这个样式，所以里面的数据就会是中间的蓝色文字。（.your-class开头有一个点，是对应class属性的唯一标记，类似的标记也有，后面更多练习中可以理解）

下面是我们前两个这个例程简要介绍了。总结一下：

数据绑定：在Page模块下的js文件中定义数据名称，并使用胡须方法（{{ }}）来使用数据。
显示数据：为wxml中的数据添加标签（如文本标签），添加属性（如类属性）。类对应的样式写在wxss文件中。

然而，这里似乎缺少了一些东西。看来我没有教你wxss最后一步怎么写。根据微信的文档，wxss和css基本是一样的。你可以搜索一下CSS书籍或者等我下一篇实用教程，它会带你一步步写一个可以在线启动的小程序。

如果你循环使用这两个例程，你已经可以解决很多问题了。如果想多显示一条数据，先串联js文件中的数据，然后修饰wxml文件中的数据。下面是连接两个数据的示例代码：

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

显示两个数据的示例代码如下：

{{greeting}}
{{farewell}}

在开发工具中显示如下：

我正在写教程开发工具有过程中更新了，所以界面也变了

可以看到，我在最右边的红色箭头处添加了新的一行代码，然后显示了新的数据。

不过，这次的不同之处在于我使用了命名标签而不是之前的标签。实际上，wxml 文件中可以使用许多不同的标签来显示数据。有些负责显示图像，有些则负责滚动效果。这些都写在微信文档里了，练习的时候可以查一下。

例如，我使用了带有名称的标签，然后显示了一个圆形图标：

借助“数据绑定”和“数据显示”两个例程，我们能够编写一个简单的页面。可以显示，但是没有交互，所以我们进入第三个套路：绑定交互。

绑定交互

绑定交互这个名字听起来是不是和之前的“绑定数据”很像？他们的操作方法也很相似。

绑定交互包含两步：

声明：在js文件中声明交互的名称。
用法：在 wxml 文件中使用此交互。

我们先看“声明”。如何声明交互？（或者如何声明事件使用微信文档？）

请在js文件中写入这几行代码，位于我们之前绑定数据的数据模块的正下方：

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

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

像这样，我们声明一个名为changeWord的交互。本次交互的具体内容是改变告别数据的内容。原来是 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。点击图中所示的绿色按钮，我们的页面就再见了！永不说再见！

除了标签的bindtap属性绑定交互外，还可以使用bindlongtap（绑定长按事件）、bindtouchmove（bindtouchmove（绑定触摸移动）事件）等，各有各的效果。具体内容在活动文档中有描述，您可以自行尝试。

你会看到它们都是以bind开头，就像单词的前缀一样。添加 tap、longtap 和其他后缀可以帮助连接交互。（绑定事件还有一个前缀叫catch，比如catchtap、catchtouchmove等，可以通过组合文档来测试效果。）

至此，我们就可以简单地绑定交互了。然而，绑定交互的基本目的是改变页面的显示，以便用户可以提供反馈。我们来看看第四招：修改显示。

进行交互

就像数据排序后，必须显示数据一样。一旦我们进行了互动，我们就需要让互动变得有意义。交互的执行内容写在声明的交互下面：

 changeWord: function() {
    // 这里写交互的实际内容
  }

这里给出两种交互内容的编写方式，足以解决很多问题：

修改页面数据
弹窗

不。一、更改页面信息。我们在上例程的示例代码中已经看到了：

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

这几行代码的中间部分就是要执行的交互内容：

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

即使你不懂 javaScript 编程语言，也要完整地读完从英文字面意思来理解这几行代码。这三行代码表示我的页面（this）想要将数据（setData）中的再见改为Never Say Goodbye！。

如果你想改变其他数据比如问候语，你也可以这样做：

     changeAnotherWord: function() {
        this.setData({
          greeting: 'Hello, again!'
        })
      }

你会发现很多结构都是固定的。唯一的更改是交互的名称（更改为changeAnotherWord）和要更改的数据（更改为问候语：“Hello，再次！”）。如果您还想更改页面上的数据，请执行相同操作。

我们要介绍的第二种交互方式是弹窗，这是微信内置的弹窗。首先，我们需要进行绑定交互例程： 1、在js文件中声明一个交互； 2. 在wxml 中使用此交互。

声明交互的代码如下（在js文件中），我们使用showConfirmation作为名称：

     showConfirmation: function() {
        var that = this
        wx.showModal({
          title: '提示',
          content: '你确定要更改文字吗？',
          showCancel: true,
          cancelText: '取消',
          confirmText: '确定',
          success: function (response) { 
            that.changeWord()
          }
        })
      }

在微信开发者工具中，如下：

不用担心未知代码到这里，我们继续看使用交互部分：

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

我重写了上一个例程中出现的按钮，使其链接到Confirmation。在微信开发者工具中，是这样的：

写完后，点击“编辑文本”按钮，会出现一个对话框：

箭头连接的两部分是一样的，你发现out

你会看到所有的区别都只在js文件中的showConfirmation下，其他部分都和我们之前的套路一致。那么我们来看看那个未知的代码：

        var that = this
        wx.showModal({
          title: '提示',
          content: '你确定要更改文字吗？',
          showCancel: true,
          cancelText: '取消',
          confirmText: '确定',
          success: function (response) { 
            that.changeWord()
          }
        })

让我们从wx. showModal，这是微信内置的代码表达式。从英文字面上就可以明白什么意思：请微信(wx)显示对话框(showModal)。那么如何使用这个工具呢？微信文档是这样描述的：

我们只需要填写标题、内容、showCancel等创建对话框需要填写的地方，以及空格即可。这样，微信就帮你创建了一个对话窗口。

但是这段代码中有一个地方很难解释，就是var that = this and that.changeWord()。你可能会认为他们是有联系的，因为他们都拥有它。具体意思是：将这个页面存储在那个位置（var that = this）并让那个位置的数据文本发生变化（that.changeWord()）。为了避免误解，我们就到此为止。并且这两行并不影响创建对话框的能力。因为创建对话框只需要做一件事：

使用 wx.showModal

跳转

此时我们可以在一个页面上使用 4 个例程：绑定数据、显示数据、绑定定义交互和更改数据。如果你的小程序比较复杂，是时候跳到下一页解锁新的战场了。

要跳转到下一页，我们只需要最后一个技巧：跳转。

跳跃本质上是一种交互，要实现这种交互，我们可以充分利用前面提到的“绑定交互”和“执行交互”。重复这两个步骤： 1. 在js文件中声明一个交互； 2. 在wxml 中使用此交互。

首先我们在js文件中声明一个名为navigateToLogs的交互：

     navigateToLogs: function() {
        wx.navigateTo({
          url: '/pages/logs/logs'
        })
      }

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

有一些代码我们不知道，比如wx.navigateTo，根据来自。根据之前的经验，你应该能猜到他的意思吧？但在我们谈论它之前，让我们先完成下一步。

在wxml中使用此交互：

    <button bindtap="navigateToLogs" type='default' class="your-button" size='default'>跳转button>

在开发工具中它看起来像这样：

好的，单击“Go”将跳转到下一页。

测试完效果，我们回到未知代码：

    wx.navigateTo({
      url: '/pages/logs/logs'
    })

这次我们是字面意思：请使用微信（wx）导航到（navigateTo）日志下的页面。路径（url：'/pages/logs/logs'）。微信需要url数据，具体说明可以在文档中找到。我们还是可以根据文档来填空。

这里需要解释一件事。新页面名为“/pages/logs/logs”。它从何而来？

如果你看下图红框内的文件结构，你会发现logs page的地址就是pages文件夹下的log文件（共有4个文件，但我们都称之为logs），以标准格式表示，就是刚才提到的 /pages/logs /logs 。而且，根据微信的规定，我们还必须写入一个名为app.json的配置文件，以便微信允许我们跳转到这个路径。

总结

好了，我们已经学会了这里所有的5个套路。如果你能将这些结合起来，不断地使用，你就可以创建一个具有多种功能的小程序：

数据绑定 - 在 js 文件中声明数据名称
显示数据 - 写在 wxml 中数据的位置是显示出来，装饰效果是wxss写的
绑定交互 - 在js文件中声明交互名称
执行交互 - 在js文件中支付数据改变或者显示弹窗
跳转 - 跳转进入下一页，打开新战场

额外-获取微信数据

微信小程序其实有一个隐含的例程，叫做调用微信提供的接口。用微信官方的说法，这就是使用微信的能力。如果没有这些能力，微信小部件就只能称为小部件，而不是“微信”小部件。

而且，上面我们已经看到了一些微信小程序的功能，比如wx.showModal显示弹窗、wx.navigateTo跳转下一页

你发现它的功能都是以wx开头的。有多种选项可供选择，包括获取用户头像以及打开和扫描。它是如何使用的？这实际上是关于检查文档以了解此方法需要哪些数据并将其传递给它。两个字：填空。

最后，简单来说，对于新开发者来说，最大的陷阱可能就是忘记保存。因为我曾经是一个初学者，而且在很多方面我还是一个初学者，甚至还没有开始。希望本教程有所帮助。

让我们互相鼓励吧。

这种类型的标记称为选择器，可以在小程序的wxss文档的选择部分找到
而且这是一个简化版的css，没有使用更复杂的层叠样式
此外，还有两种特殊的交互。为了避免误解，我不会谈论它们，但我们会在后面的教程中使用它们。有兴趣的朋友可以第一时间了解一下：一类是每个标签独特的装订方式，比如便签纸。有一个独特的属性bindchange可用于绑定交互。另一种是页面关闭和打开时绑定的交互，比如onLoad。这种类型的交互从通电开始并指示页面上的事件。直接在js文件中声明，不需要绑定到wxml中的标签。
微信2还提供弹窗互动功能。您可以尝试一下这些文档。
微信提供了wx.navigateTo跳转方法以及其他四个与导航相关的方法。你可以在实践中体会到它们的差异。另外，微信还提供了标签来访问跳转，达到了与wx.navigateTo等方法相同的效果。为了避免误解，我们这里只留下文档的标题，没有详细的例子。