京東物流風格 NutUI 發佈了

前言

京東物流目前在 M 端的業務愈來愈多，如公衆號、移動官網。這對 M 端的 UI 框架要求就越高，組件豐富、接入友好，穩定性高，拓展性及性能上都有較高的要求。自研的 pandora-mobile 目前看不符合現有需求，相較而言 NutUI 更適合物流側的業務研發需求，經內部討論決定協同物流側用戶體驗部聯合 NutUI 團隊打造出物流視覺規範的 M 端 UI 框架。

JDC & JDL 團隊經歷了爲期一個多月的緊密合做開發迭代，NutUI-JDL 終於和你們見面了。做爲繼 2019 年 1 月 15 日 NutUI 2.0 正式發佈以來的第二次大版本發佈，NutUI-JDL 仍堅守着【基於京東風格】同時在產品的功能、體驗、易用性和靈活性等各個方面進行了全面提高。

須要注意的是，NutUI-JDL 版本是 NutUI 中的一個生態，目前咱們兩個生態（NutUI、NutUI-JDL）會同時更新維護，發現問題咱們仍是保持第一時間迭代修復，請你們放心使用。

目標

NutUI-JDL 的目標是讓移動端的開發更加容易，基礎組件交給咱們讓開發人員更加專一於業務，提高研發效率。

特色

• 物流風格
• 體驗極致
• 標準規範
• 擴展性強

設計語言升級

呼聲最高的設計資源對外開放，而且引入優質的相關技術沉澱文章

• 隨着京東物流移動端業務的拓展，設計師不單單須要完成業務需求，也須要思考設計的價值。設計師也不該該陷入重複的設計中，消耗設計時間，下降工做效率，因此推行組件化的設計模式迫在眉睫。
• NutUI-JDL 京東物流版是一套基於移動端的組件庫，減小冗餘組件，從實際項目入手，梳理出最通用的 30+ 基礎組件，覆蓋多場景，體積小巧、設計精美，提供了全新的設計以及交互體驗，提升界面模塊化的通用程度。
• 新版組件庫從 設計語言 和 基礎組件 兩大模塊，從新定義了佈局、顏色、圖標、字體、間距和通用組件規範，提高了 UI 展現及交互方式，創建了新的設計標準，爲推進物流側移動端產品的體驗優化和迭代帶來了高效路徑。

更小的體積

在 NutUI v2.2.6 以前，因底層的 WebPack 配置老舊、版本較低、設計不足 這大大增長了形成構建出的 npm 包大小達到了 17.4 MB， 2020Q2 經過咱們不斷打磨 @nutui/cli 接入後，將 npm 包大小減小到了 7.58 MB，大幅提高了性能及可配置項。一樣咱們在 NutUI-JDL 版本中也統一此插件。

新組件

• Field 輸入框（將原來 Input、TextBox 融爲一體，靈活配置）
• ImagePreview 圖片預覽（支持滑動左右切換）
• Steps 步驟條（豐富多樣的步驟條）
• Card 卡片（全新的卡片組件）
• Scroll 下拉刷新上拉加載（單獨抽離，下降耦合性）

組件重構升級 30+

• Menu
• Toast
• ActionSheet
• Dialog
• Cell
• Skeleton
• Popup
• Rate
• NoticeBar
• Tag
• Badge
• TabBar
• SideNavBar
• NavBar
• Tabs
• Avator
• LeftSlip
• Switch
• Stepper
• Calendar
• Picker
• Uploader

如何使用

本次版本 NutUI-JDL 與 NutUI 2.x 屬於不一樣生態，一個是基於 JD APP 視覺規範、另外一個是 JDL APP 視覺規範，對應的 npm 包分別是 @nutui/nutui 和 @nutui/nutui-jdl
咱們建議您爲了儘量簡化升級，直接採用如下命令進行安裝使用：

npm install @nutui/nutui-jdl -S

詳細的使用文檔請參考 https://nutui.jd.com/jdl/#/start

後期規劃

• 四級地址級聯組件
• 圖片懶加載（Lazy Load）
• 手風琴

開源共建

衆人拾柴火焰高，在這裏咱們很是歡迎感興趣的同窗參與到 NutUI 項目的開發，建議經過提 Pull Request 的方式參與，經過 Code Review 以後，咱們會合並你的代碼。

以上

NutUI 的持續迭代，離不開每一位參與幫助開發的人，開發者每一次對咱們的承認，就是對咱們最大的鼓勵。