源码预览：https://github.com/jdf2e/nutuiNutUI3.0官网：https://nutui.jd.com/3x/#/小程序多端适配设计的初衷是在跨端小程序开发过程中，我们发现没有合适的组件库可以使用，尤其是在做电商商城场景业务时，没有符合京东App规范的组件库提供支持我们的小程序项目。为了填补这一空白，让NutUI组件库更方便开发者使用，我们决定在NutUI3.0中加入小程序适配多终端的能力。如何适配Taro在小程序的跨终端开发方面有着突出的表现。Taro3x也在2020年11月宣布支持Vue3，所以我们可以在小程序中使用Taro+Vue技术栈来达到适配多终端的目的。Taro的特点可以如下：-可以实现微信小程序到微信平台、百度平台等的原生代码转换；-Taro框架是唯一实现京东小程序适配的框架；-支持React/Vue语法，更好的支持组件化和TypeScript；-行业影响力大，社区活跃，长期支持有保障；-支持多端同步调试，适配主流小程序。如果能将Taro的这些特性和能力添加到NutUI组件库中，相互实现功能开通后，就可以实现NutUI组件库中小程序跨终端开发的梦想。在领队的带领下，小伙伴们不眠不休的反复尝试探索，细化了适配方法。从易到难有四点：-Taro的自兼容：Taro现有的3.0组件中，checkbox、radio、steps等9个组件可以直接在Taro中使用。-样式适配：两端的样式和css选择器存在一些差异，需要有的放矢。-DOMAPI的差异化处理：获取元素的方式不同会导致组件在Taro端失效。对于这样的组件，需要在DOM获取层面进行调整。-深度适配：这也是工作量最大的部分，需要调用Taro或者微信的原生能力，对组件进行重写。对于picker、swiper、backtop等交互复杂的组件，我们需要在T??aro的基础上做一层封装，达到适配的目的。对于每个组件，我们在原组件的目录结构中添加一个.taro.vue文件，专门处理Taro兼容性。对于demo和文档，我们在官网的文档中加入了tab切换，方便查看不同环境下的使用方法和对应的demo。当然如果想在小程序环境下查看效果，除了官网demo中显示的二维码外，还可以复制我们项目中mobile-taro下的vue目录，之后就可以查看效果了启动。使用方式是引入NutUI，在项目中即可使用。#Vue3项目npmi@nutui/nutui@next-S#NutUI小程序多终端项目npmi@nutui/nutui@taro-S关于NutUI3.0技术亮点：1.拥抱Vue3，介绍Vue3新特性CompositionAPI，Teleport，Emits等破坏性变化，全面升级，结合APIComposition语法重构，结构清晰，单独提取功能模块组件emits事件，增强代码可读性使用Teleport新特性重构挂载类组件2.构建工具升级到Vite2.x摒弃webpack，引入下一代前端构建工具Vite。启动速度从30s提升到500ms左右，将大大提高开发效率。3、全面使用TypeScriptNutUI3.0以TypeScript作为主要开发语言，以应对前端应用复杂度飙升背景下组件维护难、扩展难的问题。视觉体验全面升级NutUI3.0根据最新京东App10.0规范，结合众多零售应用场景，对NutUI组件进行重新排列设计——减少冗余控件——帮助移动端设计师快速复用基础组件——建立common-完善接口模块化，建立设计与开发对接的基础标准-提高产研输出对接效率，减少输出工作量-基于京东设计语言体系，构建场景-细化骨架重构主流程，构建“场景动线”，让体验更流畅。为了给您提供更好的服务，希望您能抽出几分钟时间，把您的感受和建议告诉我们，我们会为您解答。这些信息是严格保密的。本次调查为有奖调查，完成问卷的用户可抽取京东欢乐周边礼品。问卷链接：https://get.jd.com/#/survey/i...问卷链接：https://get.jd.com/#/survey/i...发布时间NutUI3.0《多款小程序》“适配”功能预计2021/07/12上线。使用NutUI轻松开发小程序，你心动了吗??，敬请期待^o^！[快来点个Star??支持我们吧~](
