網(wǎng)易 Duilib：功能全面的開(kāi)源桌面 UI 開(kāi)發(fā)框架

Duilib 是 Windows 系統(tǒng)下的開(kāi)源的 DirectUI 界面庫(kù)（遵循 BSD 協(xié)議），完全免費(fèi)，可用于商業(yè)軟件開(kāi)發(fā)。

Duilib 可以簡(jiǎn)單方便地實(shí)現(xiàn)大多數(shù)界面需求，包括換膚、換色、透明等功能，支持多種圖片格式，使用 XML 可以方便地定制窗口，能較好地做到 UI 和邏輯相分離，盡量減少在代碼里創(chuàng)建 UI 控件。目前，Duilib 已經(jīng)在國(guó)內(nèi)有較為廣泛的使用。

網(wǎng)易在研發(fā)網(wǎng)易易信 PC 版時(shí)引入 Duilib，經(jīng)過(guò)多年開(kāi)發(fā)和改進(jìn)，由網(wǎng)易云信在2019年4月開(kāi)源。（github 地址：https://github.com/netease-im...）

網(wǎng)易 Duilib 使用 C++11 重寫(xiě)，在其原有基礎(chǔ)上做了較大重構(gòu)，搭配谷歌的基礎(chǔ)組件 Base 庫(kù)、基于 Chromium 的 WebView 框架 CEF 以及常用的 UI 組件，形成了一套功能強(qiáng)大、簡(jiǎn)單易用的完整桌面 UI 開(kāi)發(fā)框架。

框架中提供了多線程模型、高精度定時(shí)器、基本的 xml 解析、zip 解壓等功能；封裝了一層渲染接口和全局樣式資源的統(tǒng)一管理；并且對(duì) DPI 適配、多語(yǔ)言、虛擬鍵盤(pán)、手寫(xiě)板等功能增加了支持；在上層提供了豐富的控件。

開(kāi)發(fā)框架中集成了 Chromium 中 base 庫(kù)的線程模型和消息隊(duì)列，base 中包含了多種消息循環(huán)、異步操作接口。

base 線程消息循環(huán)

網(wǎng)易 Duilib 框架中的 UI 消息循環(huán)、工作線程都完全依托 base 的線程模型。使用 base 的異步通信能力，我們可以將耗時(shí)的工作（如資源解析）放到輔助線程來(lái)減輕 UI 線程的壓力。

base異步通信

同時(shí)，網(wǎng)易 Duilib 中的各種基礎(chǔ)組件，都已經(jīng)繼承了 base 中的生命周期檢測(cè)能力，每個(gè)任務(wù)在執(zhí)行時(shí)都會(huì)先檢查與之綁定的對(duì)象是否存活，確保多線程操作不會(huì)因野指針而導(dǎo)致崩潰。實(shí)際項(xiàng)目開(kāi)發(fā)中，使用base的線程模型，我們可以非常簡(jiǎn)單做到 UI 線程、數(shù)據(jù)庫(kù)線程、網(wǎng)絡(luò)線程、其他工作線程之間的通信與交互，有效提升開(kāi)發(fā)速度。

網(wǎng)易 Duilib 框架提供了更加完整和豐富的功能，以滿足不同真實(shí)業(yè)務(wù)場(chǎng)景的需求：

• 豐富的控件、簡(jiǎn)易的布局

• 靈活的控件組合、事件處理方式

• 模塊化支持

• 優(yōu)化渲染效率

• 異形窗體支持

• DPI 適配支持

• 多國(guó)語(yǔ)言支持

• 通用樣式支持

• 虛表控件支持

• 虛擬鍵盤(pán)支持

• 實(shí)用的多線程支持

• CEF webview 支持

• 控件動(dòng)畫(huà)、GIF 動(dòng)畫(huà)支持

• 觸控設(shè)備支持（Surface、Wacom）

• 抽象渲染接口（為其他渲染引擎提供支持）

網(wǎng)易 Duilib 中，增加了控件與容器的尺寸自適應(yīng)功能，免去繁瑣的手寫(xiě)尺寸。同時(shí)增強(qiáng)了布局能力，搭配控件的一些定位屬性，可以使用少量 xml 代碼來(lái)完成更加強(qiáng)大的布局效果。

新增的絕對(duì)布局

現(xiàn)在的 UI 庫(kù)中，把布局、容器、控件等邏輯組件拆分開(kāi)，讓不同的布局可以與任意容器進(jìn)行靈活的組件。并且弱化了容器與控件的區(qū)別，基礎(chǔ)控件使用模版來(lái)編寫(xiě)，上層使用時(shí)可以讓它繼承不同的控件或模版，讓控件本身也可以是容器：

typedef LabelTemplate<Control> Label; typedef LabelTemplate<Box> LabelBox; typedef ButtonTemplate<Control> Button; typedef ButtonTemplate<Box> ButtonBox; typedef CheckBoxTemplate<Control> CheckBox; typedef CheckBoxTemplate<Box> CheckBoxBox;

基礎(chǔ)控件繼承了容器后，就可以擁有控件本身的行為+容器的組合能力。這樣做的優(yōu)點(diǎn)是如果一個(gè)基礎(chǔ)組件在 UI 上無(wú)法滿足需求，那么就讓他成為容器去任意組合其他的 UI 組件，提升控件的表現(xiàn)能力。同時(shí)控件支持在 xml 中編寫(xiě)簡(jiǎn)單的事件處理邏輯，把一些功能簡(jiǎn)單的UI控制邏輯放在 xml 中。

CEF（Chromium Embedded Framework）是基于谷歌 Chromium 瀏覽器內(nèi)核封裝出的跨平臺(tái) web browser 組件。

CEF 內(nèi)部有完整的一套消息循環(huán)，我們將網(wǎng)易 Duilib 框架中的 base 線程模型與 CEF 消息循環(huán)組合在一起。同時(shí)封裝CEF的離屏渲染模式（OSR）、窗口模式為網(wǎng)易 Duilib 中的控件 CefControl、CefNativeControl，讓 CEF 的 WebView 能力完整的嵌入到網(wǎng)易 Duilib 中。最后我們封裝了js與native的通信能力 JsBridge。

CEF執(zhí)行流程

如此，我們可以使用 CefControl、CefNativeControl 來(lái)做單純的 web 展示控件，也可以以 WebView 為核心，網(wǎng)易 Duilib 為輔助，開(kāi)發(fā) web app。UI 層的展現(xiàn)都由 web 頁(yè)面負(fù)責(zé)，底層的核心邏輯、數(shù)據(jù)庫(kù)、網(wǎng)絡(luò)等由 C++ 負(fù)責(zé)，web 與 C++ 使用 JsBridge 通信。

有道精品課是網(wǎng)易旗下在線教育平臺(tái)，教師通過(guò)在線直播的方式對(duì)學(xué)生授課，需要一個(gè)支持直播、聊天、課件分享、手寫(xiě)板、web、答題互動(dòng)等功能的客戶端讓老師使用，因此有道精品課教師端應(yīng)運(yùn)而生。

老師可以使用有道精品課教師端進(jìn)行 PPT、PDF、桌面共享、iPad 投屏、視頻播放等多種直播方式 。老師也可以把講課過(guò)程中畫(huà)板上的板書(shū)和課件導(dǎo)出為 PDF 分享給學(xué)生。

有道精品課教師端

我們需要讓教師端滿足各種直播需求的同時(shí)，保證開(kāi)發(fā)的速度、易用性、擴(kuò)展性。另外，由于音視頻、聊天等功能需要消耗大量 CPU 資源，這就要求客戶端的 UI 本身只能占用較低的內(nèi)存和 CPU 資源?；谝陨闲枨?，我們使用網(wǎng)易 Duilib 框架進(jìn)行了有道精品課教師端的開(kāi)發(fā)。

教師端的畫(huà)板擁有豐富的功能：繪制各種圖形圖片、圖形交互、書(shū)寫(xiě)文本、PPT解析、動(dòng)畫(huà)、導(dǎo)出 PDF、縮放等等。

畫(huà)板支持的特性越復(fù)雜，就越需要消耗更多的 CPU。為了節(jié)省 CPU 資源，我們搭配網(wǎng)易 Duilib 框架中的渲染引擎，設(shè)計(jì)了6層緩存機(jī)制，讓畫(huà)板在支持豐富功能的同時(shí)保證極低的 CPU 占用率。

畫(huà)板的多層緩存方案

依托于網(wǎng)易 Duilib 框架的 UI 組件和渲染能力，教師端畫(huà)板可以支持手寫(xiě)板筆跡、毛筆，支持繪制各種圖形圖片，支持畫(huà)板縮放。

毛筆

圖形圖畫(huà)

圖形圖畫(huà)

由于老師的課件大多為 PPT 編寫(xiě)，為了讓老師授課更加方便，教師端支持導(dǎo)入 PPT。并且使用網(wǎng)易 Duilib 框架的動(dòng)畫(huà)能力，來(lái)支持展現(xiàn) PPT 元素的動(dòng)畫(huà)，讓老師方便播放動(dòng)畫(huà)或控制 PPT 元素。

支持PPT動(dòng)畫(huà)

配合網(wǎng)易 Duilib 框架的 WebView 能力，可以把 web 頁(yè)面融入到畫(huà)板里，既可以操作網(wǎng)頁(yè)也可以寫(xiě)書(shū)板書(shū)，極大增強(qiáng)畫(huà)板表現(xiàn)力。使用這樣的能力，我們可以讓教師端支持展現(xiàn)數(shù)學(xué)互動(dòng)題、物理實(shí)驗(yàn)、化學(xué)實(shí)驗(yàn)等等內(nèi)容。

畫(huà)板內(nèi)嵌web

目前，我們已經(jīng)將網(wǎng)易 Duilib 開(kāi)源。

github 地址：
https://github.com/netease-im...

歡迎大家使用并與網(wǎng)易 Duilib 同行。

計(jì)劃在不久之后，我們將支持矢量圖來(lái)增強(qiáng) DPI 適配能力，增加更加豐富的動(dòng)畫(huà)（幀動(dòng)畫(huà)、屬性動(dòng)畫(huà)、路徑動(dòng)畫(huà)、特效動(dòng)畫(huà)）來(lái)提升 UI 庫(kù)的表現(xiàn)力，并替換性能更好的 skia 渲染引擎。

未來(lái)，我們將持續(xù)迭代優(yōu)化網(wǎng)易 Duilib 框架，不斷的擴(kuò)展它的功能。在 github 社區(qū)里，已經(jīng)有很多的開(kāi)發(fā)者參與到項(xiàng)目的迭代中。

歡迎更多開(kāi)發(fā)者朋友的加入。

特別鳴謝：感謝自網(wǎng)易 Duilib 成立以來(lái)，為之貢獻(xiàn)過(guò)以及仍在貢獻(xiàn)代碼的小伙伴們，包括但不限于 陽(yáng)光、redrain、harrison 等。

撰文/ Redrain
編輯/ Ryan
來(lái)源/ 有道技術(shù)團(tuán)隊(duì)（ID: youdaotech）