北京华网天下

适配Taro的微信小程序：抢先体验跨端适配

2024-05-21

来源：网络整理

扫描二维码查看——太郎适配的微信小程序：

抢先体验

在跨终端小程序的开发过程中，技术栈很长一段时间都没有完成。与此同时，使用率和内部开发者的呼唤也在不断增加。我们决定加快小程序多端适配步伐。

背景

是一套京东风格的轻量级移动组件库，覆盖主流移动业务场景。目前支持Vue和两大框架。自今年1月版本发布以来，已陆续发布85个版本，迄今已完成60+组件的构建。

今年618期间，我们启动了多端小程序的适配，并选择了Taro基础框架作为底层实现。经过半年的打磨，我们已经完成了所有组件的适配，并集成到了Taro Cli脚手架中，可以为开发者提供便捷的多端小程序能力。

- 适配微信小程序样图

适应太郎后发生了哪些新的变化？

1、当前适配版本基于v3.5.x。 v3.5是Taro团队今年7月推出的一个大版本，支持等，更多详情请看这里：Taro v3.5正式发布：开发体验提升

2、从17个全面升级到60多个组件；

3.为具有多终端能力的开发者发布了单独的NPM包：@/--taro

4. - 官网已支持Taro组件并添加相应示例文档。

芋头适配我们做了哪些工作？

整个《芋头》改编，我们经历了几个阶段：一是调研、剧本打造、改编文档输出；第二，组件分布和适配；第三，升级到3.5.x的适应阶段。综上所述，每个阶段都有一些疑难问题，现介绍如下，供后人参考。

为了让大家更清楚的了解组件库对Taro的适配，我们先来一个全景图。

第一阶段：输出适配文件及待适配清单

第一阶段，我们花了一周左右的时间输出适配文档和适配的东西清单。这里有两个关键点：

1）Taro提供了Web组件适配的插件能力@/-html。这个插件非常重要。基本上搭建了 Taro 和 Web 组件库之间的桥梁，对于 Taro 下的 Web 组件库的应用非常友好；

至此，我们很快就搭建了一个demo。该demo基于Taro Cli构建，直接引用@/-的组件库，快速整理出待处理列表。一方面了解了我们目前的适应情况，另一方面也方便了我们后期的分工。

2）将Taro适配的脚本添加到代码库中，并梳理共建流程，以便贡献者可以快速运行项目并开始共建。为了方便贡献者的开发，我们使用同一目录来承载Taro适配和demo部分；在命令行上，我们只需要关注添加Taro的全局适配，直接运行命令即可。点击参与共建。

yarn add:taro:configyarn dev:taro:weapp

调整 Taro 的流程

组件适配目录结构及命令

第二阶段：组件适配遇到的问题及解决方案

第一阶段完成后，我们很快就进入了第二阶段。第二阶段最大的问题是组件遇到的问题各不相同，有的必须使用太郎的能力。为了方便起见，我们在整个适应过程中输出了一些可适应的通用方法，如下所示。

1. DOM：获取单个元素信息

// useClientRect.ts// web实现export const getRect = (element: Element | Window | undefined) => { if (element && element.getBoundingClientRect) { return element.getBoundingClientRect() }}export const getRectByTaro = async (element: any) => { const res = await element.getBoundingClientRect() return res}

组件实例化_小程序组件开发实例_组件开发模型

有很多组件都会遇到这种问题，所以我们封装了一类方法供用户在其他组件中使用。除了获取单个元素之外，我们还封装了获取多个元素的方法。更多信息请参考源代码。

2. SASS变量的使用：#{}。有这样一类问题，不是按照标准的方式编写的，相对兼容H5，但是在小程序中暴露出来。例如SASS变量的使用。

@for $i from 1 through 24 { .nut-col-offset-#{$i} { margin-left: calc((100 / 24) * #{$i} * 1%); } .nut-col-#{$i} { width: calc((100 / 24) * #{$i} * 1%); }}

3. 使用原生功能。

比如等等，尤其是那些强烈依赖底层能力的。我们将这种依赖封装到组件的基本实现部分中，以尽可能方便开发人员使用。

4.总结。上述大部分场景都将包含在内。由于小程序实现的限制，基于Taro的组件库也会受到框架能力的限制。但在不断的打磨中，我们也尝试采用折衷的方法来减少开发者对组件使用理解的差异。

同时，整个适配过程中我们也会重点关注底层能力的落地和升级。接下来我们就来说说Taro版本升级后的适配工作。

第三阶段：升级到3.5.x，遇到的问题及解决方案

在我们发布了两三个版本之后，Taro 升级到了 3.5.0，支持 PNPM。为此，我们做了两件事：

1.修改项目配置，例如重命名依赖包

2.添加依赖包并升级到

在这里，我们整理了当前使用的依赖库，方便您在项目中使用。

"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7","@tarojs/cli": "^3.5.5","@tarojs/components": "^3.5.5","@tarojs/plugin-framework-react": "^3.5.5","@tarojs/plugin-html": "^3.5.5","@tarojs/react": "^3.5.5","@tarojs/runtime": "^3.5.5","@tarojs/taro": "^3.5.5","@tarojs/webpack5-runner": "^3.5.5","react": "^18.0.0","react-dom": "^18.0.0","react-refresh": "^0.14.0","webpack": "^5.74.0"

在适配 Taro 3.5 的路上我们做了很多事情，因为 Taro 3.5 已经升级了，所以这部分我们下次留着。也欢迎您继续关注我们的官网，我们的首次分享将与官网-资源模块或部分同步。

- 快速入门小程序开发

了解了以上内容后，就可以快速上手了。我们提供两种方法。原项目中可以直接使用安装组件库的方法引入@--taro组件库；如果你现在是新项目，可以直接使用taro cli的脚手架。我们已将此部分作为组件模板集成到脚手架施工项目的模板引入部分中。

老项目：选择安装组件库

安装组件库

npm i @nutui/nutui-react-taro

项目中使用--Taro

import * as React from "react";import * as ReactDOM from "react-dom";import '@nutui/nutui-react/dist/style.css'import { Icon } from '@nutui/nutui-react-taro';ReactDOM.render( <div className="App"> <Icon name="dongdong">Icon> div>, document.getElementById("app"));