源码一览：

3.0官网：#/

小程序多端适配设计初衷

在跨端小程序的开发过程中，我们发现没有合适的组件库可以使用。 尤其是在做电商商城场景的业务时，没有符合京东App规范的组件库为我们的小程序项目提供支持。 为了填补这一空白，让组件库给更多开发者带来便利，我们决定在3.0中加入小程序多端适配的能力。

如何适应

Taro 在小程序跨端开发方面表现突出。 Taro 3x 也在 2020 年 11 月宣布支持 Vue3，因此我们可以利用 Taro + Vue 技术栈来达到小程序适应多终端的目的。

Taro 的特点如下：

- 可实现微信小程序原生代码到微信平台、百度平台等的转换；

- Taro框架是唯一实现京东小程序适配的框架；

- 支持/Vue语法，更好支持组件化和集成；

- 行业影响力大，社区活跃，长期支持有保障；

- 支持多端同步调试，可适配主流小程序

如果能够将 Taro 的这些特性和能力加入到组件库中，并且相互之间的功能能够打通，那么组件库中小程序跨端开发的梦想就可以实现。 在队长的带领下，小伙伴们孜孜不倦，反复尝试和探索，细化了适应方法。 从易到难，有以下四点：

- Taro自兼容：现有3.0组件中， 、 、 等9个组件可以直接在Taro中使用。

- 样式适配：两端的样式和css选择器存在一些差异，需要进行相应处理。

- DOM API 的差异化处理：获取元素的方式不同会导致 Taro 端组件的功能失效。 此类组件需要在 DOM 获取层面进行调整。

- 深度适配：这也是工作量最大的部分，需要调用Taro或者微信原生能力重写组件。 对于 、 、 、 等交互复杂的组件，我们需要基于 Taro 进行一层封装，以达到适配的目的。

对于每个组件，我们在原组件的目录结构中添加一个 .taro.vue 文件，专门处理 Taro 兼容性。 对于demo和文档，我们在官网文档中增加了tab切换，方便查看不同环境下的使用方法和对应的demo。

当然，如果你想在小程序环境下查看效果，除了官网demo显示的二维码之外，还可以将我们项目中-taro下的vue目录复制下来，启动后查看效果。

用法

导入并在项目中使用。

# Vue3 项目

npm i @nutui/nutui@next -S

# NutUI 小程序多端项目

npm i @nutui/nutui@taro -S

3.0的技术亮点：

1.拥抱Vue3

介绍Vue3新特性API等

突破性变革，全面升级

采用组合API语法重构，结构清晰，功能模块化

组件事件单独提取，增强代码可读性

使用新功能重构安装类组件

2. 升级构建工具至Vite 2.x

弃用并推出下一代前端构建工具Vite。 启动速度从30秒提升到30秒左右，将极大提升开发效率。

3.充分利用

采用3.0作为主要开发语言，解决前端应用复杂度不断增加的背景下组件难维护、难扩展的问题。

视觉体验全面升级

3.0 根据最新的京东App 10.0规范，结合众多零售应用场景，对组件进行了重新布局和设计

- 减少冗余控制

- 帮助移动设计者快速复用基础组件

- 建立细节的通用设计标准

- 提高接口的模块化性和通用性

- 建立对接设计和开发的基本标准

- 提高产学研输出对接效率，减少输出工作量

- 基于京东设计语言系统构建场景

- 精细骨骼重构主流程，打造“场景动线”，体验更流畅

问卷调查

为了给您提供更好的服务，希望您能抽出几分钟的时间告诉我们您的感受和建议。 我们将对您的信息严格保密。 本次调查是一项有奖调查。 完成问卷的用户即可赢取京东欢乐周边礼品。

问卷链接：#//?id=

推出日期

3.0“小程序多端适配”功能预计于2021年7月12日发布。

您对使用易开发小程序感到兴奋吗？ 敬请关注！

项目地址：

其他开源

欢迎开源项目联系我们