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

NutUI 3.0 官網：https://nutui.jd.com/3x/

小程序多端適配

設計初衷

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

如何適配

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

Taro 的特點可以如下：

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

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

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

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

- 支持多端同步調試、能夠適配主流小程序

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

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

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

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

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

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

當然，如果您想在小程序環(huán)境下查看效果的話，除了官網 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 左右，將大幅提升開發(fā)效率。

3. 全面使用 TypeScipt

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

視覺體驗全面升級

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

- 減少冗余控件

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

- 建立通⽤的細節(jié)設計標準

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

- 建⽴設計與開發(fā)對接的基礎標準

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

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

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

問卷調研

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

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

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

最新評論