乐趣区

关于前端:京东-React-组件库支持小程序开发了

jiezi

作为一款具备京东格调的组件库，咱们始终致力于用心打造更合乎开发者体验的组件库。NutUI-React v1 上线后咱们团队也在一直的优化、测试、应用、迭代相干组件，然而在跨端小程序的开发过程中，React 技术栈迟迟未补齐，同时在咱们批发团体外部 React 开发者的使用率及呼声越来越大，为了让 React 开发中更好的 应用 NutUI，咱们决定放慢 NutUI-React 小程序多端适配的步调。

领先体验

扫码查看 NutUI-React 适配 Taro 的微信小程序：

背景

NutUI 是一套京东格调的轻量级挪动端组件库，笼罩挪动端支流业务场景。目前已反对 Vue 和 React 两大框架。其中 React 版本从往年 1 月发版以来，陆续公布了 85 个大小版本，截止目前已实现 60+ 组件数量的建设。

往年 618 期间，咱们启动多端小程序适配，选用 Taro 根底框架作为底层实现，通过半年的打磨，目前已实现了所有组件的适配，并集成到了 Taro Cli 脚手架中，能够为开发者提供便捷的多端小程序能力。

NutUI-React 适配微信小程序示例图

适配 Taro 后，有什么新的变动？

  1. 目前适配版本以 v3.5.x 为根底，v3.5 是往年 7 月 Taro 团队重磅推出的一大版本，反对 webpack5、react18 等。更多细节能够看这里：Taro v3.5 正式公布：开发体验晋升
  2. 从 React 17 全面降级到了 React18，并笼罩了 60 多个组件；
  3. 公布了独立的 NPM 包，以供多端能力的开发者应用：@nutui/nutui-react-taro
  4. NutUI-React 官网，已反对 Taro 的组件，减少了相应的示例文档。

对于 Taro 适配，咱们做了些什么工作？

在整个 Taro 的适配中，咱们经验了几个阶段，第一，调研、构建脚本和适配文档的输入阶段；第二，组件散发和适配阶段；第三，降级到 3.5.x 的适配阶段。综合下来，每个阶段都有一些难点问题，以下就开展做个介绍，起初人也可做参考。

为了让大家更分明的理解组件库对 Taro 的适配，先给出一个全景图。

第一阶段：输入适配文档和待适配列表

第一阶段中，咱们用大略一周多的工夫，输入了适配文档和待适配列表。这里次要有两个关键点：

1）Taro 提供给 Web 组件适配的插件能力 @tarojs/plugin-html，这个插件很重要，根本建设了 Taro 和 Web 组件库的桥梁，对 Web 组件库在 Taro 下的利用很敌对；

借此，咱们疾速搭建了 Demo。Demo 是基于 Taro Cli 搭建的，间接援用了 @nutui/nutui-react 的组件库，把过后已有的组件 check 一遍，疾速梳理了一份待决事项，一方面理解咱们以后的适配状况，另一方面也便于咱们前期的分工。

2）为 NutUI-React 代码库减少适配 Taro 的脚本，并梳理了共建流程，以便贡献者能够疾速跑起我的项目，开启共建。而为了不便贡献者开发，咱们应用同一个目录，承载 Taro 适配和 demo 局部；命令行上，咱们只需关注增加 Taro 的全局适配并间接运行命令即可。点击参加共建。

yarn add:taro:config
yarn 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
}

遇到这类问题的组件较多，所以咱们封装了一类办法，用户其余组件的应用。除获取单个元素外，咱们还封装了获取多个元素的办法。更多内容可参考源码。

  1. 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%);
  }
}
  1. 应用原生能力。

比方 uploader、Toast 等，特地是像 uploader 这种强依赖底层能力。咱们将这种依赖封装到了组件的根底实现局部，尽量让开发者应用起来不便。

  1. 小结。以上大部分的情景就会被囊括进去，受限于小程序的实现，基于 Taro 实现的组件库也会受限于框架的能力，不过咱们在一直的打磨中，也尽量尝试去采纳折中的方法，缩小开发者对组件应用的差别了解。

同时，咱们也会在整个适配中，关注底层能力的实现及降级。接下来，咱们就说一说对 Taro 版本升级后的适配工作。

第三阶段：降级到 3.5.x，遇到的问题和解决办法

在咱们公布了两三个版本后，Taro 降级到了 3.5.0，反对 React18、反对 webpack5、反对 PNPM。为此，咱们做了两件事件：

1. 批改我的项目配置，如 compiler、alias 重命名依赖包

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/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 也始终在降级，所以这部分，咱们留作下次再细聊。也欢送继续关注咱们的官网及 Github，咱们的第一分享会同步官网 - 资源模块，或 Github 的 Discussion 局部。

NutUI-React 小程序开发疾速上手

通过以上的理解，能够疾速入手理解一下。咱们提供了两种形式，在原有的我的项目中，你能够间接应用装置组件库的形式，引入 @nutui-react-taro 组件库；如果你当初是个新我的项目，可间接应用 taro cli 的脚手架，咱们已将该局部作为组件模板集成到了脚手架的构建我的项目的模板引入局部。

老我的项目：选用装置组件库

装置组件库 
npm i @nutui/nutui-react-taro
在我的项目里应用 NutUI-React-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")
);

新我的项目：应用 Taro Cli 脚手架，选用 NutUI-React 模板 

npm install -g @tarojs/cli
taro init myApp

选用 React 语言，抉择 NutUI-React 模板，可疾速接入 NutUI-React 组件库，且实现了根底适配。

这为应用 Taro 的小伙伴提供了十分便当的形式。

将来倒退

咱们在本次适配中，发现了很多以后组件库的有余，不论是适配的水平、还是交互的形式，或者大家关注的动效问题，咱们都一一在安顿中，目前也在以每周一个版本的形式疾速的迭代，修复已知问题，并着力满足大家更多的利用场景。

同时，咱们的力量也是薄弱的，心愿更多同仁能够参加到共建中，一起为社区打造有长期价值的能力。

分割咱们

如果您在京东站内，退出咚咚群：1025679314

同时，欢送增加微信群，增加 hanyuxinting，回复 React，邀请进群。

咱们的 Github 地址：https://github.com/jdf2e/nutu…

NPM 包地址：https://www.npmjs.com/package…

退出移动版