企业官网建设流程全解析

Taro快速上手教程：5分钟从零创建你的第一个Taro小程序项目（新手指南）

【免费下载链接】taro开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taro

Taro 是一款开放式跨端跨框架解决方案，支持使用 React / Vue / Nerv 等框架开发微信、京东、百度、支付宝、字节跳动、QQ 小程序以及 H5、React Native 应用。本指南面向新手，教你在 5 分钟内从零创建并运行你的第一个 Taro 小程序项目，一套代码即可适配多端 🚀

一、Taro 是什么？为什么推荐新手使用？

简单来说，Taro 解决的是"多端重复开发"的痛点：

项目仓库位于 crates/ 与 packages/ 目录，其中核心 CLI 在 packages/taro-cli/。

二、开始前的环境准备

创建 Taro 小程序前，只需确认 3 样东西：

1. Node.js v18.0.0 及以上—— Taro CLI 会在启动时强制校验，版本过低会直接报错（见 project.ts）
2. 包管理器：npm / yarn / pnpm 任选其一
3. 微信开发者工具：用于运行预览编译出的小程序产物

三、一条命令创建 Taro 小程序项目

在终端执行以下命令（以 npm 为例）：

npm create @tarojs/app my-app --typescript

• my-app：你的项目名称
• --typescript（简写--ts）：使用 TypeScript 模板

如果你不想指定参数，直接运行npm create @tarojs/app，CLI 会进入交互式问答，依次让你选择：

• 📦 项目模板来源
• 🧩 前端框架（React / Vue3 / Nerv）
• 🎨 样式方案（sass / scss / less / stylus / 无）

创建逻辑源码可参考 createApp.ts，默认模板位于 templates/default/，脚手架生成的首页就是打印 "Hello world!" 的 index.jsx。

四、认识 Taro 小程序项目结构

创建完成后，项目核心目录如下：

my-app/ ├── config/ # 编译配置（开发/生产环境） │ ├── dev.js │ ├── index.js # 全局配置入口 │ └── prod.js ├── src/ # 源码目录 │ ├── pages/index/ # 首页页面（jsx + 样式 + 页面配置） │ ├── app.config.js # 全局窗口与页面路由配置 │ ├── app.js # 应用入口 │ └── index.html # H5 端页面模板 ├── babel.config.js ├── package.json └── project.config.json # 微信开发者工具项目配置

几个新手最常打交道的文件：

• app.config.js：注册所有页面路径，新增页面后必须在这里登记
• config/index.js：全局编译配置，其中designWidth: 750定义了设计稿宽度，配合pxtransform实现 rpx 自适应（第34-41行）

五、编译并运行你的 Taro 小程序

进入项目目录，执行开发编译命令：

npm run dev:weapp

它实际执行的是taro build --type weapp --watch，会持续监听文件变化并自动重新编译（脚本定义参考 package.json）。

最快运行步骤：

1. 编译输出到dist/weapp目录
2. 打开微信开发者工具 → 导入项目 → 选择dist/weapp
3. 填入任意测试 AppID，即可看到 "Hello world!" 页面 ✅

💡 提示：修改src下任何代码后保存，终端会自动重新编译，开发者工具中刷新即可看到效果。

六、一套代码跑多端：常用编译命令速查

Taro 的精髓在于切换目标端只需改一个参数：

多端编译能力由 packages/ 下的各平台插件提供，例如微信端插件 taro-platform-weapp/、H5 端插件 taro-platform-h5/。

七、新手常见问题（FAQ）

Q1：创建项目时提示 Node 版本过低？升级到 v18.0.0+ 即可，Taro CLI 会硬性拦截低版本（校验代码）。

Q2：页面尺寸在手机上显示不正确？检查 config/index.js 中designWidth是否与设计稿一致（默认 750），并确认已开启pxtransform。

Q3：新增页面后开发者工具看不到？在src/app.config.js的pages数组中登记新页面路径，并重新等待 watch 编译。

Q4：想看完整的多端示例工程？仓库examples/目录提供了大量可运行示例，比如功能齐全的 mini-program-example/、含轮播交互的 swiper-effect/、列表页示例 taro-list/，都可以对照学习。

八、下一步学习建议

完成本文后，你已经掌握了 Taro 小程序的完整生命周期：环境准备 → 一键创建 → 结构认知 → 编译运行。建议接着做三件事：

1. 把首页 "Hello world!" 改成自己的第一个业务页面
2. 切换执行npm run dev:h5，体验同一份代码在浏览器中运行
3. 阅读 examples/README.md 了解官方示例清单

从这 5 分钟开始，你的一套 Taro 代码就可以同时通向小程序、H5 与 App 了，祝开发顺利 🎉

【免费下载链接】taro开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taro