Taro小程序跨终端开发实战介绍——实现多终端定制

背景
最开始，我们只做微信小程序。随着我们业务的不断拓展，随着各种大大小小的程序平台的兴起，我们瞄准了每一个平台。为所有人编写代码是不现实的。此外，原有的小程序开发模式也存在诸多弊端。
为了简化和增强小程序的开发，我们使用Taro作为主要参考框架。我们整理了使用Taro的实践经验。主要内容围绕什么是Taro、为什么用Taro、如何使用Taro（正确姿势）以及Taro背后的一些设计思想，让大家能够充分了解Taro。
Taro3.0已经逐渐成熟。我们的项目已经更新到Taro 3.0，所以本文的代码示例基于Taro 3.0。

什么是Taro Taro

是一个针对多种终端的统一开发框架。有了taro，就可以支持React开发方式了。通过编写可以同时在多个终端上运行的代码，您可以创建可以在各种小程序、H5甚至React Native中使用的多终端应用程序。
Taro 官方介绍：Taro 是一个开放的跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架微信/京东/百度/支付宝/字节跳动/QQ 小程序/H5/React Native和其他应用程序。当今市场上有各种高端形状。 Web、React Native、微信小程序等各种终端非常受欢迎。当业务需求同时要求不同终端设备上的性能时，需要针对不同的终端设备编写多套代码。成本显然非常高。目前，只需要编写一套代码就能适应多终端的能力是非常有必要的。

其主要特点是： 快速：能够快速开发小程序：解决小程序开发的各种痛点；多：可实现多终端适配：一套代码即可适配小程序、H5、RN等多终端；

为什么使用Taro
随着应用程序的增长和变得越来越复杂，原生应用程序开发的问题领域逐渐显现：
• 复杂的代码组织：编写页面文件结构很麻烦（四个（这么多））
•定义不一致：组件和方法的命名标准不一致，拼写不同，React、Vue等语法结构不一致
•弱字符串模型：逻辑表达弱，不支持eslint
依赖管理•：缺少npm包依赖管理
•不完整的ES Next：仅支持部分ES Next语法，不支持较新的ES2020和ES2021+
•落后的开发方式：前端设计体系不完整，webpack、css预处理等. 缺失，前端相对落后，不利于个人成长

可选技术方案 可选技术方案
针对上述微信小程序开发模式痛点，业界也给出了一些方案：

对比分析

mpvue是美团开发的框架。很多终端适配效果不佳，且该问题长期无人维护；
WePY是腾讯开发的组件化框架，但无法适配多终端；
Chameleon 非常擅长定制多个终端。缺点是不支持京东widget，无法转换原生widget（要使用只能重写项目）；
Taro 的优秀特性遵循 React/Vue 语法规范，引入现代化的开发流程，让开发更加关注核心代码，并提供完善的代码检查方法。

多终端需求

Taro支持最全面的平台，具有独特的转换功能，在性能方面优于其他框架。总结功能如下：
可以实现微信小程序原始代码到微信平台、百度平台等的转换；
Taro框架是唯一实现京东小程序定制的框架；
支持React/Vue语法，更好地支持组件化和TypeScript；
具有较大的行业影响力和活跃的社区。由京东内部优秀团队开发，框架有保障支持。研发团队是我们可靠且非常支持的工作；
更完善的用户界面组件库，支持多端同步调试，可适应多种终端；

在一处编写，多终端运行

设计思想
以React开发方式为主

使用React编写多终端的应用程序
❝❀：让代码能够运行在不同平台
运行时定制：让代码在不同平台上执行相同

以微信小程序为例 以微信小程序为例

JSX

WXML Taro 代码翻译原理

Taro的翻译原理：是对输入的源代码进行语法分析，形成语法树，然后对语法树进行变换，然后解析生成目标代码的过程。

第一个是Parse，它将代码解析成抽象语法树，然后遍历并替换AST（这个对于UI来说其实并不陌生，可以类比DOM树的功能），以及最后生成，它根据新的 AST 创建编译后的代码。

在开发过程中，我们遵循React语法标准，结合翻译原理的思想，对代码文件进行一系列的转换操作，最终得到可以在Widget中运行的代码。 React 最初是为了解决 Web 开发而创建的，因此只需稍微修改代码就可以创建直接在 Web 端运行的代码，而同样属于 React 语法系统的 React Native 也可以轻松提供支持。同样，对于其他平台如免安装、百度小程序等，通过对源码进行编译转换，也会得到该平台下对应的语法代码。

可见，小程序与Web组件标准、API标准存在较大差异。这些差异无法仅通过翻译代码来消除。例如，小程序在编译时无法直接编译。之所以使用，是因为尽管它们看起来有些相似，但它们的组件属性却截然不同。仅依靠代码翻译无法实现一致性。同样的，很多API也面临同样的情况。针对这种情况，Taro推出了定制的运行时标准，以消除不同平台之间的差异。

这套标准主要由三部分组成，包括标准运行时、基础组件库、标准的最终用户界面。运行时框架和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/

多终端适配

编写多终端配置文件
•微信配置文件project.config。 json，文件内容可以自定义微信小程序设置、运行目录和appid等；
•百度小程序配置文件project.swan.json内容与微信类似； ？每个平台的页面配置信息不同：
•微信小程序页面完整，有微信登录页面（其他平台不需要）；
•百度小程序有自己的登录页面，百度并不支持所有页面。必须是隐藏的，如：图片裁剪、达达城内部打印、打印等；
• 京东小程序：不支持批量发货，不需要登录页面，不支持分包，必须写在主包中；

差异化配置
不同平台下载对应文件：
各平台详细配置信息：
地图类型；
频道信息；
请求头信息；
。 。 。

如果要启用特定于平台的 js 代码块进行代码分离，请将以下语法添加到任意 js 代码中：

如果要启用特定于平台的 css 代码块，请将以下语法添加到any css- 到代码中：

提示：代码打包时不会增加包大小，针对不同平台解包对应的代码。

多终端适配案例
典型多终端解决方案：

风格分析：
微信是rpx，百度小程序vw，京东小程序px；
Taro 在整个帧中均匀地使用 px 处理转换为与平台对应的像素，所以不要使用奇数作为 px 值；
1像素（pixel）的边框通常会转换为平台对应的单位，无法显示。可以使用较大的PX单位，例如：1PX；
百度mini、京东mini不支持外部类目，其他小程序也可能不支持。避免使用它；

模块的导入导出：

导入模块需要Es6导入。不要使用对JS文件的请求（某些平台不支持）；
可通过require动态导入内部本地图片资源；导入URL外部资源必须使用https，部分平台或模板不支持http；
可能需要导入小程序插件，但必须是多平台定制和兼容性处理；

组件开发信息：

组件的key值不要使用索引，必须先提取对象的id属性；
组件渲染条件取长度属性页，不更新。
数据集问题：百度和微信接收到的数据不同，所以需要使用小写来保持代码一致：驼峰式这样：data-goodsIndex={index}，微信将其全部小写转换为Goodindex，百度保持驼峰式大小写，正确写法：data-goodsindex={index};

百度小程序开发注意事项：
更深层次空间未更新时，需要对变量进行解包；
Vw风格在转换时有一个偏移量，以保证风格的通用性。性；
个别元件高度：车上有错误，不写也没关系；
中间线的高度有偏差，使用flex比较安全；
修复布局设置为left:0,bottom:0bottom,无默认值写入有问题（默认是居中渲染）；
当mask组件层级较深时，状态可能无法更新，可以使用tt-modal代替；
图像裁剪、语音识别、打印功能等基于原生API 不支持；
状态更新必须显式设置 null，例如隐藏列表组件： this.setState({list: null}) {list && };

京东小程序开发注意事项：
不支持组件样式全局覆盖。如果要兼容就必须单独写，并加上join样式名；
不支持小程序分包。页面路由信息必须单独配置；
showModal 弹窗无法自定义验证颜色属性；
storagesync不支持存储json数据，读取需要手动JSON.parse；
不支持canvas绘画API：微信自定义分享图片裁剪、订单条码等功能无法使用；
不支持同层渲染，原生组件中只能使用Cover组件。 H5是ios嵌入的，如果URL有参数，必须手动进行urlencode；
H5页面使用widget webview，不具备所有京东app webview功能，部分功能不支持；
京东小程序分享网址与其他小程序分享网址不同。注意路径差异

例如：shareURL：京东小程序：page/index/index 微信小程序：/pages/index/index

多端同步调试
配置index.js：outputRoot : dist/ ${process.env.TARO_ENV}

生态与设计
物流风格Taro UI组件库-Taro t（适配Taro temp.Taro 3.0）项目定制Taro模板项目

模板项目的主要特点：
• 根据要求包含Tarot 组件库和组件使用示例
•登录适用于多种终端。苹果终端会自动启用京东无线登录扩展，h5终端会自动进入无线组合登录的M页面d等。
•网关呼叫适配多终端，并附带示例；
•包括更高级的API和使用示例，例如TypeScript和Redux；
•其他功能不断更新中...

Mini小程序调试工具

MiniDebug是多端小程序调试工具，旨在提高小程序开发和测试效率的工具库

功能介绍：主要功能有环境交换、身份哈希、应用数据获取、位置模拟、缓存管理、扫描、H5跳转、版本更新等。工具子页面如下图所示：

目前已在 GitHub 上开源（欢迎提出问题）：https://github.com/jdlfe/mini...

物流风格小程序可视化拖拽平台（设计（中文）
京东商城已实现小程序可视化拖拽平台：https://ling.jd.com/atom/cms/...

结论：
Taro V3.0.0目前支持React、Nerv、Vue三种类型的框架开辟了未来扩展的可能性，允许开发者通过Taro扩展框架支持（例如：Flutter可以适配）。