共计 1828 个字符，预计需要花费 5 分钟才能阅读完成。
源码领先看：https://github.com/jdf2e/nutui
NutUI 3.0 官网：https://nutui.jd.com/3x/#/
小程序多端适配
设计初衷
在跨端小程序的开发过程中，咱们发现没有适合的组件库能够应用，尤其在做电商商城类场景的业务时，没有合乎京东 App 标准的组件库为咱们的小程序我的项目提供反对。为了填补这一空白，同时让 NutUI 组件库可能为更多的开发者带来便当，咱们决定在 NutUI 3.0 中 减少小程序多端适配的能力。
如何适配
Taro 在小程序跨端开发中有着出众的体现，Taro 3x 在 2020 年 11 月也发表反对了 Vue3，所以咱们能够采纳 Taro + Vue 的技术栈来达到在小程序中适配多端的目标。
Taro 的特点能够如下：
– 能够实现微信小程序原生代码转换到微信平台，百度平台等；
– Taro 框架是惟一一款实现京东小程序适配的框架；
– 反对 React/Vue 语法，更好地反对组件化和 TypeScript；
– 行业影响力大，社区沉闷，长期反对有保障；
– 反对多端同步调试、可能适配支流小程序
若能将 Taro 的这些特点与能力增加到 NutUI 组件库中，实现彼此性能买通，就能够实现 NutUI 组件库跨端开发小程序的幻想。在团队大牛的率领下，小伙伴们不眠不休，进行着重复的尝试与摸索，提炼出适配办法，从易到难有如下四点：
– Taro 自兼容：现有的 3.0 组件中 checkbox、radio 及 steps 等 9 个组件可间接在 Taro 中应用。
– 款式适配：两端的款式及 css 选择器有一些区别，须要做针对性解决。
– DOM API 的差异化解决：获取元素的办法不同，会导致组件在 Taro 端的性能生效，对于这类组件须要在 DOM 获取层面上进行调整。
– 深度适配：这也是工作量最大一部分，须要调用 Taro 或微信原生能力对组件进行重写。如 picker、swiper 及 backtop 等交互较为简单的组件，咱们要在 Taro 等的根底上做一层封装来达到适配的目标。
针对每个组件，咱们在原有组件的目录构造中新增 .taro.vue 文件来专门解决 Taro 兼容。针对 demo 和 文档，咱们在官网文档处减少了页签切换，来不便查看不同环境下的应用办法以及对应的 demo。
当然，如果您想在小程序环境下查看成果的话，除了官网 demo 会展现二维码之外，您还能够 copy 咱们我的项目中的 mobile-taro 下的 vue 目录，启动后能够查看成果。
应用形式
引入 NutUI，即可在我的项目中应用。
# Vue3 我的项目
npm i @nutui/nutui@next -S
# NutUI 小程序多端我的项目
npm i @nutui/nutui@taro -S
对于 NutUI 3.0
技术看点：
1. 拥抱 Vue3
引入 Vue3 新个性 Composition API、Teleport、Emits 等
破坏性变更，全面降级
采纳组合式 API Composition 语法重构，构造清晰，性能模块化
组件 emits 事件独自提取，加强代码可读性
应用 Teleport 新个性重构挂载类组件
2. 构建工具降级为 Vite 2.x
弃用 webpack，引入下一代前端构建工具 Vite。启动速度由原来 30s 晋升到 500ms 左右，将大幅晋升开发效率。
3. 全面应用 TypeScipt
NutUI 3.0 应用 TypeScript 作为次要开发语言，在前端利用复杂度一直飙升的大背景下，应答组件不易保护且难于扩大的问题。
视觉体验全面降级
NutUI 3.0 依据最新公布的 JD App 10.0 标准，联合批发泛滥的利用场景，对 NutUI 组件进行重新整理和设计
– 缩小冗余控件
– 帮忙挪动端设计师疾速复⽤根底组件
– 建设通⽤的细节设计标准
– 进步界⾯的模块化通用水平
– 建⽴设计与开发对接的根底规范
– 提⾼产研输入对接的效率，升高输入工作量
– 基于京东设计语言体系，构建场景
– 骨骼精细化重构主流程，构建“场景动线”，让体验更晦涩
问卷调研
为了给您提供更好的服务，心愿您能抽出几分钟工夫，将您的感触和倡议通知咱们，咱们会对您的填答信息严格窃密。本次调研为有奖考察，残缺填答问卷的用户可抽取 京东 joy 周边礼品。
问卷链接：https://get.jd.com/#/survey/i…
问卷链接：https://get.jd.com/#/survey/i…
公布工夫
NutUI 3.0「小程序多端适配」性能 预计公布的工夫是 2021/07/12。
应用 NutUI 轻松开发小程序，你心动❤️ 了吗，敬请期待 ^o^！
[来点个 Star ❤️ 反对咱们一下吧 ~](
