使用Taro搭建微信小程序（第一章-创建项目与页面）

在微信小程序的开发领域，Taro框架以其跨平台能力和便捷的开发体验受到许多开发者的青睐。Taro CLI作为Taro框架的重要组成部分，为开发者提供了一套完整的命令行工具，用于快速创建和管理微信小程序项目。本教程将引导您从零开始，使用Taro CLI搭建微信小程序项目，并添加一个基本的登录页面。

创建项目

安装 Taro CLI

首先，我们需要安装 Taro CLI。在命令提示符中输入以下命令：

bash 复制代码

npm install -g @tarojs/cli

这里的 npm 是 Node.js 的包管理工具，用于安装和管理 JavaScript 代码包。-g 参数表示将 Taro CLI 安装为全局模块，这样我们可以在任何目录下使用 taro 命令。

CLI（Command Line Interface）是一个工具，它允许开发者通过命令行与计算机进行交互。使用 CLI，可以快速执行各种操作，例如创建新项目、创建新页面、启动开发服务等。安装成功后，命令行会显示相关的提示信息，表明 Taro CLI 已经准备好使用。

创建项目文件夹

接下来，我们需要选择一个文件夹来创建项目。打开文件资源管理器，进入我们希望存放项目的目录。在该目录的地址栏中输入 cmd 并按回车，这样会自动打开命令提示符，并将当前路径设置为选择的目录。这一步骤可以让我们在正确的位置直接输入后续命令。

初始化项目

在命令提示符中，我们输入以下命令以初始化一个新的 Taro 项目：

csharp 复制代码

taro init

在这里，taro 是我们刚刚安装的 Taro CLI 的命令。执行此命令后，系统会提示我们输入项目的名称和选择模板等信息。请根据提示逐步完成项目的初始化过程。

需要注意： 在选择模板时，使用键盘的上下箭头来选择 react-NutUI 作为 UI 组件库。

请耐心等待项目初始化完成。这个过程可能需要几分钟，具体时间取决于我们的网络速度和计算机性能。

启动项目

初始化完成后，使用 VSCode（或其他代码编辑器）打开项目文件夹。在编辑器的终端中，输入以下命令以启动项目：

arduino 复制代码

npm run dev:weapp

这条命令会启动开发服务器，并在本地生成一个可供预览的小程序。如果在启动过程中遇到错误提示，例如 Cannot find module '@babel/preset-react'，请执行以下命令来安装缺少的模块：

kotlin 复制代码

pnpm i @babel/plugin-proposal-class-properties @babel/preset-react -D

成功运行后，项目会在我们的文件夹中生成一个 dist 目录，里面包含了编译后的文件。这些文件是小程序运行所需的最终代码。

修改项目配置

现在，我们需要配置小程序的 appid。打开项目根目录下的 project.config.json 文件，找到 appid 字段，并将其替换为我们自己在微信公众平台注册的小程序的 AppID。这一步是至关重要的，因为小程序的 AppID 用于唯一标识我们的应用。

使用微信开发者工具

最后，打开微信开发者工具，选择"打开项目"并导航到我们刚刚生成的dist目录。选择该目录后，我们应该能够在开发者工具中看到项目的效果。

点击右下角的"确定"按钮侯，我们可以看到在微信小程序开发者工具中的效果：

创建页面

我们可以通过命令行快速创建新的页面。使用以下命令在终端中创建一个名为 login 的页面：

lua 复制代码

Taro create --name login

执行该命令后，系统将在 src/pages 目录中创建一个名为 login 的子目录。该目录下将包含三个重要的文件：

login.tsx：这是页面的主要组件文件，包含了页面的结构和逻辑。
login.scss：这是页面的样式文件，用于定义该页面的样式和布局。
login.config.ts：这是页面的配置文件，包含了该页面的相关配置选项。

同时，系统还会自动修改 src/app.config.ts 文件，在其中增加 "pages/login/login" 的配置，以便于小程序能够识别并加载新的登录页面。

按钮与事件

现在，我们将在登录页面中添加一个按钮。该按钮将从 @nutui/nutui-react-taro 包中导入。请在 login.tsx 文件中添加以下代码：

tsx 复制代码

import { Button } from "@nutui/nutui-react-taro";

// ...

<Button
    size="large"
    block
    color="#0ed582"
    onGetPhoneNumber={handleGetPhoneNumberButtonClick}
    type="primary"
    openType="getPhoneNumber"
  >
    微信一键登录
  </Button>

在这段代码中，我们使用了 NutUI 提供的 Button 组件，并设置了一些属性以定义按钮的外观和行为。特别注意 onGetPhoneNumber 属性，它用于处理用户点击按钮后获取手机号码的事件。

将鼠标悬停在 onGetPhoneNumber 属性上，我们会发现 Taro 贴心地为我们提供了相关的注释和 TypeScript 类型声明，帮助我们更好地理解该属性的用法。

为了确保事件处理程序的参数类型正确，我们需要从 @tarojs/components 依赖包中导入 BaseEventOrig 和 ButtonProps。然后，在事件参数中将类型声明为 BaseEventOrig<ButtonProps.onGetPhoneNumberEventDetail>。这样，当我们在代码中输入 event. 时，IDE 会自动提供智能提示，帮助我们更快地编写代码。

调整页面顺序

接下来，我们需要调整页面的顺序，将 login 页面放在第一个位置。打开 src/app.config.ts 文件，找到页面配置部分，将 login 页面移到列表的最前面。这样，在小程序中，用户将首先看到登录页面。

查看效果

完成上述步骤后，打开微信开发者工具，选择我们的项目并查看效果。我们应该能够在工具中看到新添加的登录页面和按钮的效果，用户可以通过该按钮进行微信一键登录。

总结

通过本教程，您已经掌握了如何使用Taro CLI搭建微信小程序项目，并添加了一个基本的登录页面。在这个过程中，您学会了如何安装Taro CLI、创建项目文件夹、初始化项目、启动项目、修改项目配置、使用微信开发者工具，以及添加按钮和事件处理程序。

Taro CLI提供了一套强大的命令行工具，使开发者能够更加高效地管理微信小程序项目。通过这些工具，您可以快速创建、修改和部署小程序，大大提高了开发效率。

此外，本教程还介绍了如何使用NutUI组件库来添加美观的按钮和处理用户事件。NutUI是一个流行的React组件库，它提供了丰富的组件和样式，可以帮助您更轻松地构建小程序界面。

在实际开发过程中，您可能需要根据项目需求调整和扩展小程序的功能。Taro框架提供了丰富的API和插件，可以帮助您实现各种复杂的功能。

最后，希望本教程能够帮助您快速上手Taro框架，并开始您的微信小程序开发之旅。祝您开发顺利，项目成功!