【愚公系列】《微信小程序与云开发从入门到实践》009-组件与小程序API基础

🚀前言

在微信小程序的开发过程中，组件和API是构建高效、灵活应用的核心要素。组件化设计不仅能够提高代码的复用性和可维护性，还能帮助开发者快速构建出复杂的用户界面。而小程序API则为开发者提供了丰富的功能接口，使得应用能够与用户的设备和微信生态系统无缝对接，提升用户体验。

本篇文章将详细介绍微信小程序中的组件概念及其使用方法，带你了解常用组件的特点和应用场景。同时，我们还将深入探讨小程序API的基础知识，解析如何通过API调用实现数据交互、网络请求、用户权限等功能。

无论你是刚刚入门的小程序开发者，还是希望提升技能的资深工程师，这篇文章都将为你提供实用的知识和技巧，帮助你在小程序开发的道路上更进一步。让我们一起探索组件与小程序API的世界，开启高效开发之旅！

🚀一、组件与小程序API基础

一个小程序往往有很多个页面组成，一个页面又有很多个模块组成，每个部分中可能又有很多元素组成。这里说的元素是组件，模块是组件，页面也是组件。简单的组件通过组合和扩展成复杂的组件，复杂的组件组合成完整的页面。因此，在小程序开发中，组件是至关重要的。API是指小程序框架内部提供的一些基础功能，例如之前使用的页面导航跳转就是框架提供的API。本节将带领读者认识API的基本格式。

🔎1.认识组件

🦋1.1 组件概述

在小程序中，组件是视图层的基本组成单元。它们是构建页面的主要模块，能够实现各种功能和表现。组件通常通过开始标签和结束标签来使用，标签内通过属性来设置组件的样式和功能，组件的内容则放在两个标签之间。

🦋1.2 组件分类

小程序组件可以分为两类：

1. 框架自带组件：小程序开发框架提供了丰富的自带组件，涵盖了常见的页面元素，如文本、图片、列表等。后续章节将详细介绍这些组件的应用。
2. 自定义组件：当框架自带组件无法满足需求时，开发者可以通过自定义组件来实现特定的功能和样式。自定义组件具有更高的灵活性，允许开发者根据具体需求进行定制。

🦋1.3 组件使用语法

在小程序中，组件通常由开始标签和结束标签组成，组件的配置通过标签的属性来进行设置。组件的内容放置在开始标签和结束标签之间。需要注意的是，组件的属性名称必须遵循小写字母命名规范，多个单词之间使用点号（.）连接。

示例：

<view class="container" style="color: red;">
  <text class="title">Hello, World!</text>
</view>

在这个示例中：

• <view> 和 <text> 是小程序的组件，class 和 style 是它们的属性。
• 属性名称遵循小写字母加点分隔符命名规则，如 class 和 style。

🦋1.4 组件的内置属性

所有小程序组件都内置了若干常用属性，这些属性通常用于设置组件的样式、功能或行为。例如，<view> 组件常用的属性包括 class、style 等，用于设置样式类和行内样式。

示例属性列表

这些属性为开发者提供了高度的可定制性，能够控制组件的外观、行为及与用户的交互。

🦋1.5 自定义组件

当框架自带组件无法满足需求时，开发者可以通过自定义组件来实现更复杂的功能。自定义组件允许开发者定义自己的组件结构、样式和逻辑，使其具备特定功能和样式定制性。例如，开发一个特定样式的按钮、一个复杂的交互式表单等，都可以通过自定义组件来完成。

🔎2.小程序框架 API

🦋2.1 小程序 API 概述

小程序开发框架提供了丰富的 API 接口，这些 API 的功能涵盖了网络请求、媒体处理、文件操作、数据存储、位置获取、设备控制、界面交互等多个方面，帮助开发者实现各种小程序功能。

🦋2.2 wx 全局对象

在小程序的运行环境中，所有的 API 都挂载在一个名为 wx 的全局对象上。大部分操作都通过这个对象来调用，例如页面跳转、获取用户信息等。

示例：

wx.redirectTo({
  url: '../logs/logs'
});

在上面的示例中，wx.redirectTo 是用于页面跳转的 API，它通过 wx 对象进行调用。

🦋2.3 API 命名规则

小程序的 API 命名非常规范，通常可以通过 API 的名称来大致判断它的功能：

• wx.on*：以 on 开头的 API 多为监听事件相关的接口，用于注册事件监听器。
  • 示例：wx.onPageNotFound，用于监听小程序页面未找到的事件。
• wx.get*：以 get 开头的 API 多为获取数据相关的接口，用于获取全局或系统信息。
  • 示例：wx.getUserInfo，用于获取用户的基本信息。
• wx.set*：以 set 开头的 API 多为设置数据相关的接口，用于保存或者修改全局数据。
  • 示例：wx.setStorage，用于将数据存储到本地缓存。

🦋2.4 异步 API 和回调函数

大多数小程序 API 都是异步的，即调用时不会立即返回结果，而是通过回调函数来处理结果。因此，API 调用通常需要传入回调函数，用于处理成功或失败的响应。

示例：

wx.getStorage({
  key: 'userInfo',
  success: function(res) {
    console.log('获取成功', res.data);
  },
  fail: function(err) {
    console.log('获取失败', err);
  }
});

在这个示例中，wx.getStorage 是一个异步 API，用于从本地存储中获取数据。调用时传入了 success 和 fail 回调函数来处理成功和失败的情况。

🦋2.5 常见的回调参数

大部分异步 API 都会接受一些常见的回调参数，这些参数主要用于处理 API 执行后的返回结果。常见的回调参数包括：

这些回调参数可以帮助开发者对异步操作的结果做出响应，比如数据的获取、存储操作的成功与否等。

🦋2.6 API 分类

小程序提供的 API 按照功能可以分为以下几大类：

1. 网络相关：用于网络请求，如 wx.request 发起 HTTP 请求。
2. 媒体相关：处理音频、视频、图片等多媒体功能，如 wx.chooseImage 选择图片。
3. 文件相关：文件存储和操作，如 wx.getFileSystemManager 进行文件操作。
4. 数据存储：用于本地存储和缓存操作，如 wx.setStorage 设置数据。
5. 位置相关：获取地理位置，如 wx.getLocation 获取当前位置。
6. 设备相关：控制和获取设备信息，如 wx.getSystemInfo 获取设备信息。
7. 界面交互：控制界面交互和视觉效果，如 wx.showToast 弹出提示框。