源碼搶先看： https://github.com/jdf2e/nutui
NutUI 3.0 官網：https://nutui.jd.com/3x/#/
小程式多端适配
設計初衷
在跨端小程式的開發過程中，我們發現沒有合适的元件庫可以使用，尤其在做電商商城類場景的業務時，沒有符合京東 App 規範的元件庫為我們的小程式項目提供支援。為了填補這一空白，同時讓 NutUI 元件庫能夠為更多的開發者帶來便利，我們決定在 NutUI 3.0 中 增加小程式多端适配的能力。
如何适配
Taro 在小程式跨端開發中有着出衆的表現，Taro 3x 在 2020年11月也宣布支援了 Vue3，是以我們可以采用 Taro + Vue 的技術棧來達到在小程式中适配多端的目的。
Taro 的特點可以如下：
- 可以實作微信小程式原生代碼轉換到微信平台，百度平台等；
- Taro 架構是唯一一款實作京東小程式适配的架構；
- 支援 React/Vue 文法，更好地支援元件化和 TypeScript；
- 行業影響力大，社群活躍，長期支援有保障；
- 支援多端同步調試、能夠适配主流小程式
若能将 Taro 的這些特點與能力添加到 NutUI 元件庫中，實作彼此功能打通，就可以實作 NutUI 元件庫跨端開發小程式的夢想。在團隊大牛的帶領下，小夥伴們不眠不休，進行着反複的嘗試與探索，提煉出适配方法，從易到難有如下四點：
- Taro 自相容：現有的 3.0 元件中 checkbox、radio 及 steps 等 9 個元件可直接在 Taro 中使用。
- 樣式适配：兩端的樣式及 css 選擇器有一些差別，需要做針對性處理。
- DOM API 的差異化處理：擷取元素的方法不同，會導緻元件在 Taro 端的功能失效，對于這類元件需要在 DOM 擷取層面上進行調整。
- 深度适配：這也是工作量最大一部分，需要調用 Taro 或微信原生能力對元件進行重寫。如 picker、swiper 及 backtop 等互動較為複雜的元件，我們要在 Taro 等的基礎上做一層封裝來達到适配的目的。
針對每個元件，我們在原有元件的目錄結構中新增
.taro.vue
檔案來專門處理 Taro 相容。針對 demo 和 文檔，我們在官網文檔處增加了頁簽切換，來友善檢視不同環境下的使用方法以及對應的 demo。
當然，如果您想在小程式環境下檢視效果的話，除了官網 demo 會展示二維碼之外，您還可以 copy 我們項目中的 mobile-taro 下的 vue 目錄，啟動後可以檢視效果。
使用方式
引入NutUI，即可在項目中使用。
# Vue3 項目
npm i @nutui/nutui@next -S
# NutUI 小程式多端項目
npm i @nutui/nutui@taro -S
關于 NutUI 3.0
技術看點：
1. 擁抱 Vue3
引入 Vue3 新特性 Composition API、Teleport、Emits 等
破壞性變更，全面更新
采用組合式 API Composition 文法重構，結構清晰，功能子產品化
元件 emits 事件單獨提取，增強代碼可讀性
使用 Teleport 新特性重構挂載類元件
2. 建構工具更新為 Vite 2.x
棄用 webpack，引入下一代前端建構工具 Vite。啟動速度由原來 30s 提升到 500ms 左右，将大幅提升開發效率。
3. 全面使用 TypeScipt
NutUI 3.0 使用 TypeScript 作為主要開發語言，在前端應用複雜度不斷飙升的大背景下，應對元件不易維護且難于擴充的問題。
視覺體驗全面更新
NutUI 3.0 根據最新釋出的 JD App 10.0 規範，結合零售衆多的應用場景，對 NutUI 元件進行重新整理和設計
- 減少備援控件
- 幫助移動端設計師快速複⽤基礎元件
- 建立通⽤的細節設計标準
- 提高界⾯的子產品化通用程度
- 建⽴設計與開發對接的基礎标準
- 提⾼産研輸出對接的效率，降低輸出工作量
- 基于京東設計語言體系，建構場景
- 骨骼精細化重構主流程，建構“場景動線”，讓體驗更流暢
問卷調研
為了給您提供更好的服務，希望您能抽出幾分鐘時間，将您的感受和建議告訴我們，我們會對您的填答資訊嚴格保密。本次調研為有獎調查，完整填答問卷的使用者可抽取京東joy周邊禮品。
問卷連結：https://get.jd.com/#/survey/index?id=60280
釋出時間
NutUI 3.0 「小程式多端适配」功能 預計釋出的時間是 2021/07/12 。
使用 NutUI 輕松開發小程式，你心動❤️ 了嗎，敬請期待o！
[來點個 Star ❤️ 支援我們一下吧 ~](