京東 Vue3 組件庫支援小程式開發啦！

2021 年 6 月 25 日
筆記
VUE, vue3.0, 組件庫

小程式多端適配

設計初衷

在跨端小程式的開發過程中，我們發現沒有合適的組件庫可以使用，尤其在做電商商城類場景的業務時，沒有符合京東 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周邊禮品。

問卷鏈接：//get.jd.com/#/survey/index?id=60280

發布時間

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

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

[來點個 Star ❤️ 支援我們一下吧 ~](

Tags: VUE vue3.0 組件庫