【Taro】如何启动微信小程序开发环境

Taro 是一款跨平台开发框架，能够帮助开发者一次编写代码，并部署到多个平台。本文将详细介绍如何在本地启动 Taro 项目，并在微信小程序开发者工具中进行调试。

一、Taro 简介

1. 什么是 Taro？

Taro 是一个多端开发框架，支持通过一套代码构建微信小程序、H5、React Native 等平台的应用。Taro 基于 React 或 Vue 开发，通过编写统一的代码，开发者可以轻松地在多个平台上发布应用，提升开发效率。Taro 还提供了强大的 CLI 工具和一整套组件库，帮助开发者快速开发和构建跨平台应用。

2. 为什么选择 Taro？

Taro 提供了一种高效的开发方式，能够帮助开发者减少跨平台开发的工作量。它通过抽象出多个平台的差异，提供统一的接口和组件，使得开发者能够专注于业务逻辑的实现，而不是各个平台的细节处理。

二、Taro 微信小程序开发环境的准备

在开始开发之前，确保你已经完成以下环境的配置：

1. 安装 Taro：确保已全局安装了 Taro CLI 工具。可以使用以下命令进行安装：

   npm install -g @tarojs/cli
   

2. 安装微信小程序开发者工具：下载并安装微信开发者工具，确保其已安装并可以正常运行。可以通过 微信开发者工具官网 进行下载。

3. 创建 Taro 项目：如果还没有 Taro 项目，可以使用以下命令创建一个新的项目：

   taro init my-taro-app
   

   然后根据提示选择模板（推荐选择 React 或 Vue 模板）。

三、启动微信小程序开发环境

1. 执行开发命令

在项目根目录下，运行以下命令启动开发模式：

# 使用 npm
npm run dev:weapp

# 使用 yarn
yarn dev:weapp

这个命令会启动 Taro 编译过程，并且进入观察模式（watch），每次代码发生变化时会自动重新编译。

2. 配置微信开发者工具

打开 微信开发者工具，点击 添加项目，选择你的 Taro 项目的根目录。

在开发者工具中，需要做以下设置以确保项目能够顺利运行：

• 关闭 ES6 转 ES5：Taro 已经默认处理了 ES6 转 ES5，因此需要关闭该功能。
• 关闭样式自动补全：关闭上传时的自动补全功能，避免编译时出现错误。
• 关闭上传时样式压缩：关闭上传时样式的自动压缩，避免出现样式问题。

设置 —> 项目设置，即可找到下图

3. 查看效果

一旦运行了 npm run dev:weapp（或 yarn dev:weapp），Taro 会将编译结果生成到项目的 dist 文件夹中，微信开发者工具会自动加载该文件夹的内容。

按照以下步骤将项目添加到微信开发者工具中进行预览：

1. 打开 微信开发者工具。
2. 点击 添加项目，选择项目的根目录作为项目路径。
3. 选择项目后，开发者工具会自动识别并加载编译后的内容，展示小程序效果。

可以实时预览小程序的效果，并进行调试。

四、命令解析

1. npm run dev:weapp

此命令会运行 taro build --type weapp --watch，并进入开发模式。每次代码更改时，Taro 会自动重新编译生成的文件，并且微信开发者工具会实时更新。

2. npm run build:weapp

此命令会执行 taro build --type weapp，将代码构建成微信小程序的可发布版本。这个命令适用于构建并准备发布小程序时使用。

3. 全局安装 Taro CLI

如果你希望直接使用 Taro CLI，可以通过以下命令进行构建和开发：

# 启动开发模式
taro build --type weapp --watch

# 直接构建项目
taro build --type weapp

这两个命令分别用于启动开发模式和生成小程序代码。

4. 使用 npx 运行

如果你不想全局安装 Taro，也可以使用 npx 命令直接运行：

# 启动开发模式
npx taro build --type weapp --watch

# 直接构建项目
npx taro build --type weapp

五、注意事项

1. 开发者工具的配置

在使用微信开发者工具时，确保以下设置：

• 关闭 ES6 转 ES5：避免冲突，因为 Taro 会自动处理 JavaScript 的转译。
• 关闭上传时样式自动补全：可能会导致样式出现问题。
• 关闭上传时样式压缩：避免样式文件在上传时被压缩。

2. 确保正确的文件结构

在开发过程中，确保项目的文件结构正确，特别是 src 和 dist 文件夹。dist 文件夹会包含最终生成的微信小程序代码，而 src 文件夹包含源代码。

3. 调试和日志

如果开发者工具未自动刷新，可以手动点击 重新加载。同时，查看命令行中 Taro 输出的日志，以便快速发现和解决问题。

推荐：

• JavaScript
• react
• vue

---