NutUI 是一套京東風格的輕量級移動端元件庫，目前已有 70+ 高質量元件，覆蓋移動端主流場景。NutUI 3.1 版本上線後，增加了多端小程式適配能力，在微信小程式平臺取得了很好的效果。而現在，NutUI 支援京東小程式開發了！
搶先體驗
使用京東 APP 掃碼體驗：
背景介紹
京東小程式
京東小程式平臺是一個全面開放的生態模式，它為開發者提供了溝通線上線下購物能力的方式，幫助商家和開發者以全新的方式連線消費者。
京東小程式平臺具有優質使用者、億級流量和豐富渠道三大核心優勢，提供了交易、營銷、廣告、客服、會員、支付、物流等多種開放能力，能更好的幫助商家服務京東高品質使用者群體。同時入駐的商家還能享受到官方流量扶持政策，共享京東億萬級公域流量池，保證使用者持續增長。目前在京東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 小程式版的全部 70+ 元件均已完成了對京東小程式的適配，其中還包括了 10+ 特色業務元件，能夠覆蓋大多數移動端應用場景。
下面是 NutUI 部分元件的效果示例圖：
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
3、啟動京東小程式專案，開始編碼
npm run dev:jd
最後
NutUI 元件庫會不斷迭代更新，如果在開發中遇到任何問題，可以在 GitHub 開源社群或咚咚交流群（82957939）與我們聯絡，或者郵件至 nutui@jd.com，我們會第一時間給予答覆與支援。
歡迎在 GitHub 倉庫為我們 Star，也期待大家參與進來，為 NutUI 社群貢獻自己的程式碼。
相關連結：