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

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

小程序多端適配

設(shè)計(jì)初衷

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

如何適配

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

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

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

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

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

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

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

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

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

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

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

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

針對(duì)每個(gè)組件，我們?cè)谠薪M件的目錄結(jié)構(gòu)中新增.taro.vue文件來(lái)專(zhuān)門(mén)處理 Taro 兼容。針對(duì) demo 和 文檔，我們?cè)诠倬W(wǎng)文檔處增加了頁(yè)簽切換，來(lái)方便查看不同環(huán)境下的使用方法以及對(duì)應(yīng)的 demo。

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

使用方式

引入NutUI，即可在項(xiàng)目中使用。

# Vue3 項(xiàng)目 

npm i @nutui/nutui@next -S

# NutUI 小程序多端項(xiàng)目

npm i @nutui/nutui@taro -S

關(guān)于 NutUI 3.0

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

1. 擁抱 Vue3

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

破壞性變更，全面升級(jí)

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

組件 emits 事件單獨(dú)提取，增強(qiáng)代碼可讀性

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

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

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

3. 全面使用 TypeScipt

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

視覺(jué)體驗(yàn)全面升級(jí)

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

- 減少冗余控件

- 幫助移動(dòng)端設(shè)計(jì)師快速?gòu)?fù)⽤基礎(chǔ)組件

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

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

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

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

- 基于京東設(shè)計(jì)語(yǔ)言體系，構(gòu)建場(chǎng)景

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

問(wèn)卷調(diào)研

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

問(wèn)卷鏈接：https://get.jd.com/

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

最新評(píng)論