京東 Vue3 組件庫 nutui 3.0 發佈，支持小程序開發

小程序多端適配

https://gitee.com/jd-platform-opensource/nutui

設計初衷

在跨端小程序的開發過程當中，咱們發現沒有合適的組件庫可使用，尤爲在作電商商城類場景的業務時，沒有符合京東 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 組件進行從新整理和設計

- 減小冗餘控件

- 幫助移動端設計師快速復⽤基礎組件

- 創建通⽤的細節設計標準

- 提升界⾯的模塊化通用程度

- 建⽴設計與開發對接的基礎標準

- 提⾼產研輸出對接的效率，下降輸出工做量

- 基於京東設計語言體系，構建場景

- 骨骼精細化重構主流程，構建「場景動線」，讓體驗更流暢

發佈時間

NutUI 3.0 「小程序多端適配」功能 預計發佈的時間是 2021/07/12 。

使用 NutUI 輕鬆開發小程序，你心動❤️ 了嗎，敬請期待^o^！