源碼搶先看： https://github.com/jdf2e/nutui

NutUI 3.0 官網(wǎng)：https://nutui.jd.com/3x/

小程序多端適配

設(shè)計初衷

在跨端小程序的開發(fā)過程中，我們發(fā)現(xiàn)沒有合適的組件庫可以使用，尤其在做電商商城類場景的業(yè)務(wù)時，沒有符合京東 App 規(guī)范的組件庫為我們的小程序項目提供支持。為了填補這一空白，同時讓 NutUI 組件庫能夠為更多的開發(fā)者帶來便利，我們決定在 NutUI 3.0 中 增加小程序多端適配的能力。

如何適配

Taro 在小程序跨端開發(fā)中有著出眾的表現(xiàn)，Taro 3x 在 2020年11月也宣布支持了 Vue3，所以我們可以采用 Taro + Vue 的技術(shù)棧來達到在小程序中適配多端的目的。

Taro 的特點可以如下：

- 可以實現(xiàn)微信小程序原生代碼轉(zhuǎn)換到微信平臺，百度平臺等；

- Taro 框架是唯一一款實現(xiàn)京東小程序適配的框架；

- 支持 React/Vue 語法，更好地支持組件化和 TypeScript；

- 行業(yè)影響力大，社區(qū)活躍，長期支持有保障；

- 支持多端同步調(diào)試、能夠適配主流小程序

若能將 Taro 的這些特點與能力添加到 NutUI 組件庫中，實現(xiàn)彼此功能打通，就可以實現(xiàn) NutUI 組件庫跨端開發(fā)小程序的夢想。在團隊大牛的帶領(lǐng)下，小伙伴們不眠不休，進行著反復(fù)的嘗試與探索，提煉出適配方法，從易到難有如下四點：

- Taro 自兼容：現(xiàn)有的 3.0 組件中 checkbox、radio 及 steps 等 9 個組件可直接在 Taro 中使用。

- 樣式適配：兩端的樣式及 css 選擇器有一些區(qū)別，需要做針對性處理。

- DOM API 的差異化處理：獲取元素的方法不同，會導(dǎo)致組件在 Taro 端的功能失效，對于這類組件需要在 DOM 獲取層面上進行調(diào)整。

- 深度適配：這也是工作量最大一部分，需要調(diào)用 Taro 或微信原生能力對組件進行重寫。如 picker、swiper 及 backtop 等交互較為復(fù)雜的組件，我們要在 Taro 等的基礎(chǔ)上做一層封裝來達到適配的目的。

針對每個組件，我們在原有組件的目錄結(jié)構(gòu)中新增.taro.vue文件來專門處理 Taro 兼容。針對 demo 和 文檔，我們在官網(wǎng)文檔處增加了頁簽切換，來方便查看不同環(huán)境下的使用方法以及對應(yīng)的 demo。

當(dāng)然，如果您想在小程序環(huán)境下查看效果的話，除了官網(wǎng) demo 會展示二維碼之外，您還可以 copy 我們項目中的 mobile-taro 下的 vue 目錄，啟動后可以查看效果。

使用方式

引入NutUI，即可在項目中使用。

# Vue3 項目 

npm i @nutui/nutui@next -S

# NutUI 小程序多端項目

npm i @nutui/nutui@taro -S

關(guān)于 NutUI 3.0

技術(shù)看點：

1. 擁抱 Vue3

引入 Vue3 新特性 Composition API、Teleport、Emits 等

破壞性變更，全面升級

采用組合式 API Composition 語法重構(gòu)，結(jié)構(gòu)清晰，功能模塊化

組件 emits 事件單獨提取，增強代碼可讀性

使用 Teleport 新特性重構(gòu)掛載類組件

2. 構(gòu)建工具升級為 Vite 2.x

棄用 webpack，引入下一代前端構(gòu)建工具 Vite。啟動速度由原來 30s 提升到 500ms 左右，將大幅提升開發(fā)效率。

3. 全面使用 TypeScipt

NutUI 3.0 使用 TypeScript 作為主要開發(fā)語言，在前端應(yīng)用復(fù)雜度不斷飆升的大背景下，應(yīng)對組件不易維護且難于擴展的問題。

視覺體驗全面升級

NutUI 3.0 根據(jù)最新發(fā)布的 JD App 10.0 規(guī)范，結(jié)合零售眾多的應(yīng)用場景，對 NutUI 組件進行重新整理和設(shè)計

- 減少冗余控件

- 幫助移動端設(shè)計師快速復(fù)⽤基礎(chǔ)組件

- 建立通⽤的細(xì)節(jié)設(shè)計標(biāo)準(zhǔn)

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

- 建⽴設(shè)計與開發(fā)對接的基礎(chǔ)標(biāo)準(zhǔn)

- 提⾼產(chǎn)研輸出對接的效率，降低輸出工作量

- 基于京東設(shè)計語言體系，構(gòu)建場景

- 骨骼精細(xì)化重構(gòu)主流程，構(gòu)建“場景動線”，讓體驗更流暢

問卷調(diào)研

為了給您提供更好的服務(wù)，希望您能抽出幾分鐘時間，將您的感受和建議告訴我們，我們會對您的填答信息嚴(yán)格保密。本次調(diào)研為有獎?wù){(diào)查，完整填答問卷的用戶可抽取京東joy周邊禮品。

問卷鏈接：https://get.jd.com/

以上就是京東 Vue3 組件庫支持小程序開發(fā)啦！的詳細(xì)內(nèi)容，更多關(guān)于京東 Vue3 組件庫的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論