NutUI 京東小程式釋出了!

京東設計中心JDC發表於2022-11-23
NutUI 是一套京東風格的輕量級移動端元件庫,目前已有 70+ 高質量元件,覆蓋移動端主流場景。NutUI 3.1 版本上線後,增加了多端小程式適配能力,在微信小程式平臺取得了很好的效果。而現在,NutUI 支援京東小程式開發了!

搶先體驗

使用京東 APP 掃碼體驗:

NutUI 京東小程式

背景介紹

京東小程式

京東小程式平臺是一個全面開放的生態模式,它為開發者提供了溝通線上線下購物能力的方式,幫助商家和開發者以全新的方式連線消費者。

京東小程式平臺具有優質使用者、億級流量和豐富渠道三大核心優勢,提供了交易、營銷、廣告、客服、會員、支付、物流等多種開放能力,能更好的幫助商家服務京東高品質使用者群體。同時入駐的商家還能享受到官方流量扶持政策,共享京東億萬級公域流量池,保證使用者持續增長。目前在京東APP中已上線 17000+ 應用,典型產品如 LV 旗艦店、芝華士旗艦店、京東快遞等。

京東小程式

NutUI

作為京東零售開源的移動端元件庫,NutUI 目前已覆蓋 Vue、React 兩大前端開發框架,包含了 70+ 高質量元件,提供了詳盡的文件與示例程式碼,能夠幫助開發人員快速開發使用者介面,提升開發效率,改善開發體驗。

NutUI 支援元件級別定製主題,除了基於京東 APP 視覺規範的預設主題外,還提供了京東科技版(NutUI-JDT)、零售B商城版(NutUI-JDB)、京東企業業務(NutUI-JDDKH)等多個定製主題,能夠滿足業務定製化 UI 的訴求。

NutUI 3.1 版本上線後,正式開啟了多端開發之路。NutUI 與 Taro 合力,實現了讓開發者一處程式碼,多端執行,暢快自如地開發小程式。自上線以來,在集團內部已有大量使用 NutUI 進行開發的小程式案例,例如京東科技-企服中心、京東科技-京小貸、京東到店-門店端、京東物流-冷鏈、京東汽車-京安途、門店陳列執行管理等等,在外部社群也有前晨汽車、數智安全等案例。

NutUI

NutUI 京東小程式

經過 NutUI 團隊三個多月的努力,目前 NutUI 小程式版的全部 70+ 元件均已完成了對京東小程式的適配,其中還包括了 10+ 特色業務元件,能夠覆蓋大多數移動端應用場景。

下面是 NutUI 部分元件的效果示例圖:

demo

H5 與小程式開發對比

1、使用場景與使用者體驗

H5 頁面透過連結訪問,可以在任意瀏覽器、社交平臺之間傳播分享。使用者每次開啟時都需要重新下載頁面資源,離開頁面後則很難再次找到入口。總體上比較適合一些業務場景簡單,同時對分享轉發傳播有需求的應用場景。小程式同樣無需下載,即用即走,但在使用者體驗上接近原生 APP,對於業務邏輯複雜、涉及頁面跳轉較多、需要登入支付交易場景的應用,小程式具有顯著優勢。

2、執行環境與系統許可權

H5 專案的執行環境通常是手機瀏覽器或者移動端 APP 的 WebView 容器,受限於此,在系統許可權方面侷限性較大。小程式則依賴於特定的客戶端,在獲得小程式平臺的授權後,能夠獲取攝像頭、定位、錄音等更多系統許可權,實現更豐富的應用功能和場景。京東小程式平臺還為開發者提供了登入、分享、跳轉、喚起等更多開放能力以滿足開發者的業務訴求。

3、開發體驗

從開發角度看,小程式平臺提供的原生開發方式與 Web 開發存在差異,對程式語言也有一定的語法限制,不同小程式平臺的專案並不相容,遷移成本較大。相比之下,H5 專案幾乎不存在相容性問題,在主流移動端瀏覽器和 APP 內都能直接透過連結訪問。不過,在 Taro 的幫助下,開發者可以使用 Vue/React 框架編寫支援小程式和 H5 的專案。NutUI 也同時支援 H5 開發與小程式開發,開發者可以快速地將 NutUI 專案在 H5、京東小程式、微信小程式等平臺之間相互遷移。

對比

使用 NutUI 開發京東小程式

NutUI 模板已內建於 Taro 腳手架中,只需以下三步即可快速搭建京東小程式專案。

1、安裝 Taro 腳手架

npm install -g @tarojs/cli

2、初始化專案,並選擇 Vue3-NutUI 模板

taro init nutui-jdmp

code

3、啟動京東小程式專案,開始編碼

npm run dev:jd

最後

NutUI 元件庫會不斷迭代更新,如果在開發中遇到任何問題,可以在 GitHub 開源社群或咚咚交流群(82957939)與我們聯絡,或者郵件至 nutui@jd.com,我們會第一時間給予答覆與支援。

歡迎在 GitHub 倉庫為我們 Star,也期待大家參與進來,為 NutUI 社群貢獻自己的程式碼。

相關連結:

相關文章