北京华网天下

NutUI-React 适配 Taro 的微信小程序：跨端开发的新体验

2024-06-22

来源：网络整理

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

抢先体验

在跨终端小程序的开发过程中，技术栈长期未完成，同时内部开发者的使用率和调用量不断增加，我们决定加快小程序多端适配的步伐。

背景

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

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

- 适配微信小程序示例图片

适应Taro之后，发生了哪些新的变化？

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

2.由17个全面升级为，覆盖60多个组件；

3. 发布了单独的npm包，方便具备多终端能力的开发者使用：@/--taro

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

我们为 Taro 的适应做了什么？

在整个 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 的流程

组件适配目录结构及命令

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

第一阶段完成后，我们很快进入了第二阶段。第二阶段最大的问题是各个组件遇到的问题各不相同，有些需要用到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"));