背景
随着业务扩张和各大小程序平台崛起,针对每个平台单独编写代码变得不现实。原生小程序开发存在诸多弊端,如代码组织复杂、规范不统一、模板逻辑表现力弱、依赖管理混乱、ES Next支持不完全以及开发方式落后等。为了使小程序开发更简单高效,我们采用 Taro 作为首选框架。本文将分享 Taro 的实践经验,围绕什么是 Taro、为什么用 Taro、如何使用 Taro 及其设计思想展开,帮助大家全面认识 Taro。本文代码示例基于逐渐成熟的 Taro 3.0。
什么是 Taro
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架开发微信、京东、百度、支付宝、字节跳动、QQ 小程序、H5 及 React Native 等多端应用。它实现了多端统一开发,只需编写一次代码即可适配多端,有效降低多套代码的成本。Taro 的主要特点是开发速度快,能快速解决小程序开发痛点;支持多终端适配,一套代码覆盖小程序、H5、RN 等。
为什么用 Taro
原生小程序开发在应用庞大后暴露诸多痛点,包括繁琐的文件结构、不统一的命名规范、孱弱的字符串模板、混乱的依赖管理、不完全的 ES Next 支持以及落后的工程体系。针对这些痛点,业界提供了多种技术方案,如 mpvue、WePY、Chameleon 和 Taro。通过对比分析,mpvue 多端适配效果不佳且维护停滞;WePY 无法适配多端;Chameleon 在多端适配方面突出但不支持京东小程序且无法转换原生代码;而 Taro 遵循 React/Vue 语法规范,引入现代化开发流程,提供健全的代码检查,并支持最全面的平台,独具代码转换能力,性能优于其他框架。Taro 还支持微信小程序原生代码转换到其他平台,是唯一实现京东小程序适配的框架,具有行业影响力大、社区活跃、京东团队支持等优势,实现“一处编写,多端运行”。
设计思想
Taro 主要采用 React 开发方式,核心思想是通过代码转换和运行时适配,使代码在不同平台上运行并表现一致。以微信小程序为例,Taro 将 JSX 编译为 WXML,其编译原理是对源代码进行语法分析、构建语法树,然后转换语法树并生成目标代码。开发时遵循 React 语法,结合编译原理,将代码转换为小程序可运行代码;同时稍加改动也可生成 Web 端和 React Native 代码。为了抹平小程序和 Web 端在组件与 API 标准上的差异,Taro 定制了一套运行时标准,包括标准运行时框架、标准基础组件库和标准端能力 API,通过在不同端实现这些标准达到去差异化。多端适配基础标准以 React 生命周期和组件 API 为基础,以微信小程序组件为标准,扩展小程序标准 API,架构上实现跨端一致性。
快速上手
初始化 Taro 项目需准备 Node 环境,运行 npm 命令安装 Taro CLI。使用 Taro 编写页面后,可通过运行命令启动不同平台,如微信、百度、京东小程序等,实现多端同步调试。Taro 支持将微信原生小程序转换为 Taro 小程序,便于迁移。Taro 项目由配置文件、入口文件和代码结构组成,基本目录结构包括配置文件、源代码目录和输出目录。完整文档可访问官方网址。
多端适配
多端适配涉及配置文件编写、入口文件管理和差异化处理。每个平台有独立的配置文件,如 project.config.json 用于微信小程序。入口文件根据不同平台配置页面信息,如微信小程序包含全量页面,百度小程序有专门登录页面,京东小程序不支持分包等。差异化配置通过平台特定代码块实现,在 JS 和 CSS 中加入条件编译语法,确保打包时仅提取相应平台代码,不增加包体积。
多端通用解决方案包括样式解析、模块导入导出和组件开发细节。样式上,Taro 统一使用 px,框架自动转换为平台单位;避免使用单数 px 值,1px 边框建议使用大写的 PX。模块导入使用 ES6 import,避免 require JS 文件,但内联图片资源可使用 require。组件开发时,key 值勿用 index,dataset 属性使用小写保持一致。
针对百度小程序,需注意状态更新解构变量、样式转换偏差、组件 height: auto bug、fixed 布局设置完整、mask 组件替代等问题。京东小程序不支持全局覆盖组件样式、分包、canvas API 等,需手动处理存储数据编码、分享 URL 差异等。
多端同步调试可通过配置 outputRoot 实现,方便同时查看多端效果。
生态与规划
Taro 生态包括物流风格的 UI 组件库 Tarot(已适配 Taro 3.0),提供定制化 Taro 模板工程,集成组件库、工具插件、登录适配、网关调用等功能。此外,小程序 Mini Debug 工具开源,支持环境切换、身份 Mock、缓存管理等功能,提高开发测试效率。未来规划包括物流风格的小程序可视化拖拽平台,进一步扩展开发能力。
结语
Taro 3.0 支持 React、Nerv、Vue 等框架,未来将开放拓展能力,适配更多框架如 Flutter。目前框架完善、社区活跃,即使无多端需求,仅用 Taro 开发 H5 也是不错选择,便于未来零成本接入小程序平台。更多 Taro 3.0 实践经验可供交流探讨。