京東 Vue3 組件庫支持小程序開(kāi)發(fā)的詳細流程

源碼搶先看：

NutUI 3.0 官網(wǎng)：

小程序多端適配

設計初衷

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

如何適配

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

Taro 的特點(diǎn)可以如下：

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

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

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

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

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

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

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

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

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

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

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

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

使用方式

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

# Vue3 項目 

npm i @nutui/nutui@next -S

# NutUI 小程序多端項目

npm i @nutui/nutui@taro -S

關(guān)于 NutUI 3.0

技術(shù)看點(diǎn)：

1. 擁抱 Vue3

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

破壞性變更，全面升級

采用組合式 API Composition 語(yǔ)法重構，結構清晰，功能模塊化

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

使用 Teleport 新特性重構掛載類(lèi)組件

2. 構建工具升級為 Vite 2.x

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

3. 全面使用 TypeScipt

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

視覺(jué)體驗全面升級

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

- 減少冗余控件

- 幫助移動(dòng)端設計師快速復⽤基礎組件

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

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

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

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

- 基于京東設計語(yǔ)言體系，構建場(chǎng)景

- 骨骼精細化重構主流程，構建“場(chǎng)景動(dòng)線(xiàn)”，讓體驗更流暢

問(wèn)卷調研

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

問(wèn)卷鏈接：

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