背景我们一开始只做微信小程序。随着我们业务的不断扩大，各种大小程序平台的兴起，每个平台都写一套代码是不现实的。而且，原生的小程序开发模式有很多缺点。为了让小程序的开发更简单高效，我们将Taro作为首选框架，我们整理了使用Taro的实践经验。主要内容围绕什么是Taro，为什么要用Taro，Taro怎么用（正确使用的姿势），以及Taro背后的一些设计思路展开，让大家对Taro有一个完整的认识。Taro3.0已经逐渐成熟，我们的项目已经升级到Taro3.0，所以本文的代码示例都是基于Taro3.0的。什么是TaroTaro是一个多端统一开发框架。使用taro可以支持React的开发方式，编写一次可以在多个终端上运行的代码，生成多个可以在各种小程序、H5甚至ReactNative中使用的应用。Taro官方介绍：Taro是一个开放的跨终端跨框架解决方案，支持使用React/Vue/Nerv等框架开发微信/京东/百度/支付宝/字节跳动/QQ小程序/H5/React等应用本国的。现在市面上的终端形式多种多样，流行的有Web、ReactNative、微信小程序等终端。当需要同时在不同终端执行业务需求时，需要针对不同终端编写多套代码。成本显然非常高。这个时候，只用一套代码就可以适配多种终端的能力就显得极为必要了。其主要特点是：快速：可以快速开发小程序：解决小程序开发的各种痛点；multiple：可实现多终端适配：一套代码可适配小程序、H5、RN等多种终端；为什么要用Taro随着应用越来越大越来越复杂，原生小程序开发的痛点也逐渐暴露出来：复杂的代码组织：繁琐的文件结构写一个页面（多达四个）规范不统一：组件、方法命名不一致约定俗成，写法多样，语法结构不一致像React、Vue弱字符串模板：弱逻辑表达，不支持eslint混乱的依赖管理：缺乏npm包依赖管理不完整的ESNext：只支持部分ESNext语法，而比较新的ES2020和ES2021+不支持。落后的开发方式：前端工程体系不完善，缺少webpack打包、css预处理等。DisadvantageoptionaltechnicalsolutionsOptionaltechnicalsolutions针对以上微信小程序开发模式的痛点，业界也给出了一些备选方案：对比分析mpvue是美团自研的框架，多端适配效果不佳，以及问题已解决很久人工维护；WePY是腾讯开发的组件化框架，但无法适配多终端；Chameleon在多终端适配方面表现突出，缺点是不支持京东小程序，不能转换原生小程序（想用只能重写项目）；Taro的优秀特性沿用了React/Vue语法规范，引入现代开发流程，让开发更专注于核心代码，提供完善的代码检查方法。多终端需求Taro支持最全面的平台，具有独特的转换能力，性能优于其他框架。总结的特点是：可以实现微信小程序到微信平台、百度平台等的原生代码转换；Taro框架是唯一一个实现了JD小程序框架的程序适配；支持React/Vue语法，更好的支持组件化和TypeScript；强大的行业影响力，活跃的社区，京东内部优秀团队开发的框架，有保障的支持，可靠的研发团队非常支持我们的工作；更完善的UI组件库，支持多端同步调试，适配更多终端；一处编写，多端运行设计思路主要采用React开发方式使用React编写多端应用核心思想代码转换：使代码在不同平台上运行运行时适配：使代码在不同平台上具有相同的性能以微信小程序为例以微信小程序为例JSXWXMLTaro代码编译原理Taro的编译原理：就是解析输入的源代码，构造语法树，然后将语法树转换再解析生成的过程目标代码。首先是Parse，将代码解析（Parse）成抽象语法树（AbstractSyntexTree），然后遍历（traverse）并替换（replace）AST（这个其实前端不陌生，可以相比于DOM树的操作），最后生成（generate）根据新的AST生成编译后的代码。开发时遵循React语法标准，结合编译原理的思想，对代码文件进行一系列的转换操作，最终得到可以在小程序中运行的代码。React最初是为了解决web开发而产生的，所以对代码稍作改动也可以直接生成运行在web端的代码，而同样属于React语法体系的ReactNative也可以非常方便地提供支持。同理，其他平台，如快应用、百度小程序等，也可以通过对源码的编译转换，获取平台下相应的语法代码。可以看出，组件标准和API标准在小程序和web上存在着很大的差异，而这些差异并不能仅仅通过代码编译来磨平。比如编译的时候不能直接编译小程序，因为虽然它们看起来有些相似，但是它们的组件属性却有很大的不同。仅靠代码编译是无法做到一致性的。同样，很多API也面临同样的情况。针对这种情况，Taro采用了一套自定义的运行时标准来抹平不同平台之间的差异。这套标准主要由标准运行时框架、标准基础组件库、标准终端能力API三部分组成。运行时框架和API对应@taro/taro，组件库对应@tarojs/components。终端实现这些标准，从而达到去差异化的目的。多端适配基础标准基础框架（生命周期、组件API）：基于React的生命周期、组件API、小程序特性作为补充标准组件库（View、Button）：基于微信小程序组件，每个终端模拟实现标准Api(request,setState)：扩展小程序标准Api，每个终端模拟实现多终端适配基础架构图如下：快速上手初始化项目环境准备：需要node环境，运行npm命令：开始使用Taro写入页面：运行项目多平台启动命令示例：如果同时查看三个终端效果：分别运行以上命令；微信原生小程序转换Taro小程序Taro项目组成Taro项目目录结构基本目录结构：比较完整的多终端项目结构：完整文档请访问：https://taro-docs.jd.com/多终端适配Multi-终端配置文件编写?微信配置文件project.config.json，文件内容可以自定义微信小程序的选项、运行目录和appid等；?百度小程序配置文件project.swan.json内容与微信类似；?京东小程序配置文件project.jd.json内容与微信类似；独立配置文件，方便运行调试；多终端入口文件针对每个平台有不同的页面配置信息：?微信小程序页面已满，有微信登录页面（其他平台不需要）。?百度小程序有专门的登录页面，百度不支持一些需要隐藏的页面，如：图片裁剪、达达城市、打印等；加载不同平台对应的文件：每个平台差异化的配置信息：地图类型；渠道信息；请求头信息；..代码差异化处理平台特定的js代码块实现，任意js代码添加如下语法：平台特定的css代码块实现，任意css代码添加如下语法：提示：打包时代码不会增加包体积，提取不同平台对应的代码。多端适配案例的一些典型的多端通用解决方案：风格分析：微信是rpx，百度小程序vw，京东小程序px；Taro统一使用px通过frame处理转换为对应平台的像素，所以px值不要使用单数；1px（像素）的边框通常会换算成平台对应的单位，这样会导致无法显示。可以使用大写的PX单位，例如：1PX；百度小程序和京东小程序不支持externalClasses，其他小程序也不一定支持。避免使用它；模块导入导出：导入模块需要使用ES6导入，不要使用require到JS文件（部分平台不支持）；可以使用require动态导入内联本地图像资源；导入外部资源的url必须使用https，部分平台或机器类型不支持http；小程序插件的导入可以使用require，但需要多平台适配和兼容性处理；组件开发细节：组件键值，不使用索引，必须先解构对象的id属性；组件渲染条件取长度属性页面不更新；数据集问题：百度和微信获取方式不同，必须使用小写保持代码一致：这种驼峰：data-goodsIndex={index}，微信会转为全小写goodsindex，百度会保持驼峰，正确的写法：data-goodsindex={index};百度小程序开发注意事项：当更深层次的状态不会更新时，需要解构变量；向vw风格转换有偏差，保证风格的通用性；个别组件height:auto有bug，不写也没关系；line-height有居中偏差，使用flex更安全；fixedlayout要在底部设置left:0,bottom:0，不写默认会有问题（默认会渲染在中间）；mask当组件层级较深时，可能不会更新状态，可以使用tt-modal代替；图片裁剪、语音识别、打印功能等依赖原生API，不支持；状态更新需要显式设置为null，比如list组件隐藏：this.setState({list:null}){list&&
