是京东风格的组件库。我们一直在努力打造更符合开发者体验的组件库。NutUI-Reactv1上线后，我们的团队一直在不断优化、测试、使用、迭代相关组件。然而在跨端小程序的开发过程中，React技术栈却迟迟没有完成。与此同时，我们零售集团内部的React开发者的使用率和呼声越来越高。为了在React开发中更好的使用NutUI，我们决定加快NutUI-React小程序的多端适配步伐。扫描二维码查看NutUI-React适配Taro的微信小程序抢先体验：背景NutUI是一个京东风格的轻量级移动端组件库，覆盖主流移动业务场景。目前支持Vue和React两种框架。其中，自今年1月发布React版本以来，先后发布了85个大小版本，至今已完成60+个组件的构建。今年618期间，我们开始了多端小程序的适配，选择了Taro基础框架作为底层实现。经过半年的打磨，我们已经完成了所有组件的适配，并集成到TaroCli脚手架中，可以为开发者提供便捷的多端小程序能力。NutUI-React将微信小程序示例图片适配到Taro后，有什么新变化？当前适配版本基于v3.5.x。v3.5是Taro团队在今年7月份推出的一个大版本，支持webpack5、react18等，更多详情可以看这里：Tarov3.5正式发布：开发体验从React17全面升级到React18，涵盖60多个组件；为具备多端能力的开发者发布了独立的NPM包：@nutui/nutui-react-taroNutUI-React官网，已经支持Taro组件，并添加了相应的示例文档。我们对太郎改编做了什么？在太郎的整个改编过程中，我们经历了几个阶段。第一，研究、构建脚本和适配文档的输出阶段；第二，组件分发和适配阶段；三、升级到3.5.x适配匹配阶段。总结起来，每个阶段都有一些难点问题。以下作一介绍，可供后人参考。为了让大家对组件库适配Taro有更清晰的认识，先放一张全景图。第一阶段：输出适配文档和待适配列表在第一阶段，我们花了大约一周左右的时间来输出适配文档和待适配列表。这里有两个关键点：1）Taro提供了插件能力@tarojs/plugin-html用于web组件适配。这个插件非常重要，基本上是在Taro和web组件库之间架起了一座桥梁。Web组件库在Taro下应用非常友好；有了这个，我们很快就搭建了一个Demo。demo是基于TaroCli搭建的，直接引用了@nutui/nutui-react的组件库，查看当时已有的组件，快速整理出一个pendingitem列表。一方面可以了解我们目前的适应情况，另一方面也方便我们后期的分工。2）在NutUI-React代码库中加入Taro适配脚本，梳理共建流程，方便贡献者快速上手项目，开始共建。为了方便贡献者的开发，我们使用同一个目录来存放Taro适配和demo部分；在命令行上，我们只需要关注添加Taro的全局适配，直接运行命令即可。点击参与共建。yarnadd:taro:configyarndev:taro:weapp适配Taro的流程组件适配目录结构及命令第二阶段：组件适配遇到的问题及解决方案第一阶段完成后，我们很快进入第二阶段，两个阶段，最大的问题第二阶段是组件遇到不同的问题，有些没有办法，需要借助太郎的能力。为了方便起见，在整个适配过程中，我们输出了一些适配的通用方法，示例如下。DOM:获取单个元素信息//useClientRect.ts//webimplementationexportconstgetRect=(element:Element|Window|undefined)=>{if(element&&element.getBoundingClientRect){returnelement.getBoundingClientRect()}}exportconstgetRectByTaro=async(element:any)=>{constres=awaitelement.getBoundingClientRect()returnres}遇到这种问题的组件有很多，所以我们封装了一类方法，可以让其他组件使用。除了获取单个元素，我们还封装了获取多个元素的方法。更多内容可以参考源码。SASS变量的使用：#{}。有一种问题属于书写不规范。在H5下兼容比较好，但是在小程序下就暴露了。比如SASS变量的使用。@for$i从1到24{.nut-col-offset-#{$i}{margin-left:calc((100/24)*#{$i}*1%);}.nut-col-#{$i}{width:calc((100/24)*#{$i}*1%);}}使用本机功能。比如uploader、Toast等，尤其是uploader，对底层能力的依赖性很强。我们将这种依赖封装到组件的基础实现部分，尽可能方便开发者使用。概括。以上场景大部分都会包含，受限于小程序的实现，基于Taro的组件库也会受限于框架的能力。但是，我们正在不断打磨并尝试使用折衷方案。减少开发人员对组件使用差异的理解的方法。同时，我们也会在整个适配过程中关注底层能力的实现和升级。接下来说一下太郎版本升级后的适配工作。第三阶段：升级到3.5.x，遇到的问题及解决方案在我们发布了两三个版本后，Taro升级到3.5.0，支持React18、webpack5、PNPM。为此，我们做了两件事：1、修改项目配置，比如编译器、别名、重命名依赖包2、添加依赖包，升级到react18在这里，我们整理了目前使用的依赖库，可以方便你在项目中使用。"@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/运行时”：“^3.5.5”，“@tarojs/taro”：“^3.5.5”，“@tarojs/webpack5-runner”：“^3.5.5”，“反应”：“^18.0.0”,"react-dom":"^18.0.0","re??act-refresh":"^0.14.0","webpack":"^5.74.0"在适配Taro3.5的路上，我们做了很多事情，因为太郎3.5一直在升级，所以这部分，留到下一次吧。也欢迎大家继续关注我们的官网和Github。我们的第一次分享会同步到官网-资源模块，或者Github的Discussion版块。NutUI-React小程序开发快速入门经过上面的了解，大家可以快速上手。我们提供两种方法。在原有项目中，可以直接使用安装组件库的方式导入@nutui-react-taro组件库；如果你现在是新项目，可以直接使用tarocli的脚手架。我们将这部分作为组件模板集成到脚手架构建项目的模板导入部分。旧项目：选择安装组件库安装组件库npmi@nutui/nutui-react-taroUseNutUI-React-Taroimport*asReactfrom"react";import*asReactDOMfrom"react-dom";import'在项目@nutui/nutui-react/dist/style.css'import{Icon}from'@nutui/nutui-react-taro';ReactDOM.render(
