Taro 跨端开发完整安装配置指南从环境检查到多端构建一次跑通【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taroTaro 是一套开放式跨端跨框架方案用 React、Vue3、Solid、Preact 等框架写一份代码再编译到微信小程序、支付宝、字节、QQ、京东等小程序以及 H5 和 React Native。本文带你走完 Taro 安装与配置的全流程——核对环境、装好 CLI、taro init建项目、跑通第一次多端构建并讲清楚config/index.js里那些真正决定构建结果的字段。跟着做你会得到一个能在微信开发者工具和浏览器里分别跑起来的 Taro 跨端项目。 开工前核对清单Node 与包管理器Taro CLI 对运行环境只有一个硬要求Node.js ≥ 18tarojs/cli的 engines 声明。不过 CLI 运行时会对低于 20 的版本打印弃用警告所以推荐直接上 Node 20 LTS。用下面的命令核对node -v npm -v第一条输出类似v20.x.x即达标第二条确认 npm 可用。其余工具按目标平台准备即可检查项建议说明Node.js≥ 18推荐 20 LTS低于 18 时taro init会直接报错包管理器npm 或 pnpm选你熟悉的后文命令以 npm 为例微信开发者工具最新稳定版构建出 weapp 产物后用它预览调试浏览器任意现代浏览器H5 构建的预览载体全部勾完再往下走能省掉后面大半的环境问题。⚡ 安装 Taro CLI 并验证安装只需一条命令它会把taro可执行文件装进全局环境npm install -g tarojs/cli用 yarn 的话对应yarn global add tarojs/cli。装完立刻验证taro --version能打印出版本号就说明装好了如果提示command not found多半是全局 bin 目录不在 PATH 里重装或补 PATH 即可。之后你还能用taro --help看到全部内置命令init、create、build、inspect、doctor、info、update等这些就是后面所有操作的入口。️ taro init 建项目每个选项选什么在项目目录外执行交互式向导会依次问你几个问题taro init my-app各选项的推荐答案帮你少犹豫开发框架React团队用 Vue 就选 Vue3语法风格最接近原生小程序Solid、Preact 也支持是否用 TypeScript推荐选是CSS 预处理器Sass目标平台 platforms至少勾weapp和h5之后随时可补包管理器npm 即可编译工具 compilerWebpack5选 Solid 框架时会自动固定为 Webpack5模板来源与模板默认模板 default不想交互也可以一条命令带参数创建flag 与提示项一一对应taro init my-app --framework react --typescript --css sass --compiler Webpack5 --npm npm执行成功的标志是终端输出创建项目完成并生成my-app/目录。脚手架已按你勾选的平台在package.json的 scripts 里预置了对应的dev:weapp、build:h5等脚本——这就是为什么脚本列表因人而异。模板本体在 packages/taro-cli/templates/default/想弄清脚手架生成了什么可以翻一遍。 跑通第一版构建微信小程序与 H5进项目、装依赖、起构建三步连贯完成cd my-app npm install npm run dev:weappnpm install拉取 Taro 全家桶与框架依赖看到added xxx packages且无 error 即成功。dev:weapp实际执行的是taro build --type weapp --watch产物落在dist/目录构建成功时dist/下会出现app.json、app.js和各页面文件。把这个dist/目录导入微信开发者工具就能真机/模拟器预览——这就是你的第一个微信小程序。H5 同理npm run dev:h5构建完成并启动本地服务后用浏览器访问终端打印的地址即可。其他平台tt、alipay、swan、qq、jd、rn等都是同一套taro build --type 平台的玩法package.json模板里已按所选平台生成对应脚本可参考完整示例 examples/mini-program-example/package.json。开发中新增页面用内置命令不必手写 configtaro create pages/detail它会生成页面文件并自动注册到路由里成功标志是app.config中多了对应条目。上图出自仓库内置的小程序插件示例 examples/build-weapp-plugin/说明 Taro 项目里图片资源可以直接在页面中多端使用。 精读 config/index.js多端构建的开关都在这项目的核心配置集中在config/index.js下面几个字段最常被改动module.exports { designWidth: 750, // 设计稿宽度 deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2 }, framework: react, // 框架 compiler: webpack5, // 编译工具 sourceRoot: src, mini: { postcss: { pxtransform: { enable: true, config: {} }, // px 按设计稿比例转 rpx cssModules: { enable: false } } } }designWidth告诉编译器你的设计稿基准宽度750 是小程序惯例配合deviceRatio决定pxtransform的换算系数——你在样式里写375px小程序端会按 750 基准换算H5 端则保留语义化尺寸。mini/h5/rn三段各自独立h5.publicPath控制静态资源前缀mini.postcss.cssModules开启 CSS Modules改动时留意只影响对应端。alias配置路径别名如/components→src/components与tsconfig.json的 paths 保持一致最省心。一个完整的真实配置可以对照 examples/mini-program-example/config/index.js。 产物在哪、报错先查这三处构建结果与常见问题集中在这几个点自查Node 版本警告终端出现Taro 将不再支持 Node.js 小于 20 的版本时升级 Node 即可不升也能用但会一直提示。taro doctor/taro info前者诊断当前项目配置后者打印完整环境信息提交 issue 前最好先跑一遍留档。taro inspect把最终生效的 webpack 配置打印出来。怀疑配置没生效时它是最快的确认手段——你写进config/index.js的内容都会合并到这份产物里。H5 端口冲突dev:h5端口被占时用taro build --type h5 --port 8081换端口。RN 端样式警告面向 React Native 的样式有一套专门规则见 packages/stylelint-config-taro-rn/比如伪类选择器在 RN 中会被忽略stylelint 会直接提示 用仓库示例项目对照着学想从真实代码里学 Taro 跨端写法examples/ 目录下有一整套可参考的示例mini-program-example是覆盖全平台的大示例custom-tabbar-react、custom-tabbar-vue3演示自定义 TabBarblended-basic等 blended 系列演示 Taro 页面与原生小程序混编subpackage-indie、weapp-independent-subpackages演示分包与独立分包。拿一个最接近你需求的示例 clone 下来读比自己猜快得多。更多内部实现可看 packages/taro-cli/CLI 与脚手架、packages/taro-runner-utils/样式工具想参与源码开发前先读 CONTRIBUTING.md。到这里环境、CLI、项目、构建、排错已经全部打通——下一步建议用taro create加两个页面、再taro build --type h5换个端验证一下把一次编写、多端运行真正跑成习惯。【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
