開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個使用 C、XML 和 CSS 構建簡單的跨平臺桌面應用的開發庫——LCUI。

LCUI 是一個用 C 編寫的圖形界面開發庫，你可以用 C、XML 和 CSS 創建簡單的桌面應用，包括傳統的 Win32 桌面應用、Windows 通用應用。

功能特性

• C 語言編寫： 適用于體積較小且主要使用 C 語言實現的應用程序，以及偏向使用 C 語言編寫簡單應用的開發者。
• 跨平臺： 支持 Windows 和 GNU/Linux 系統，可開發簡單的 Windows 桌面應用和通用應用，以及 Linux 桌面應用。
• XML + CSS： 預置 XML 和 CSS 解析器，你可以使用 XML 和 CSS 來描述界面結構和樣式。
• 與網頁類似的開發體驗： 由于 LCUI 的布局、樣式和渲染器等相關功能的設計和實現大都參考了 MDN 文檔和一些 Web 前端流行的開發庫，因此開發體驗和界面效果會與網頁有一些相似之處，如果你已經有用 HTML 和 CSS 編過網頁的經驗，那么會比較容易上手。
• 可縮放： 支持全局縮放，支持使用基于屏幕密度的 sp 和 dp 單位表示界面元素的位置和大小。

效果圖

相關項目

• 用于開發 LCUI 應用程序的命令行工具

項目地址： https://github.com/lc-ui/lcui-cli

• LCUI 的路由管理器，用于解決 LCUI 應用內多視圖的切換和狀態管理問題

項目地址： https://github.com/lc-soft/lcui-router

• 專為 LCUI 開發的組件庫，包含了一些通用組件和 CSS 樣式，組件設計參考自 Bootstrap、ElementUI、AntDesign

項目地址： https://github.com/lc-ui/lc-design

• 圖片管理器，LCUI 的旗艦級應用程序

項目地址： https://github.com/lc-soft/LC-Finder

• 基于 JavaScript 語法且可編譯為 C 的語言，預置 LCUI 綁定，提供類似于 React 的聲明式 UI 開發體驗

項目地址： https://github.com/lc-soft/trad

此項目使用MIT開源協議，更多內容大家可自行前往閱讀。

開源地址：https://github.com/lc-soft/LCUI

語：有時候在電腦上網的時候看見自己喜歡的網站或特別的頁面，自己已經點擊電腦屏幕上方的星號收藏這個頁面了，但有時候看收藏夾又被密密麻麻的內容弄得頭昏眼花，這時，我的處理方法是把收藏的頁面導出來，新建文件夾分類整理好，這樣下次想看什么內容就不用只看收藏夾里小小的字，而是在文件夾中能夠清楚的，按照自己的習慣，分好類別的，整潔的頁面了。下面是具體操作，根據提示的1、2、3······進行操作，就可以了。

首先打開瀏覽器。找到自己喜歡的頁面，我打開了自己的收藏夾，找到自己喜歡的頁面。然后點擊文字跳轉到具體的那個喜歡的頁面。

然后點擊屏幕上方，瀏覽器的三個點“···”。

然后點擊“更多工具”。

然后點擊“將頁面另存為”。

選擇文件夾，把頁面保存下來。

最后打開電腦你保存文件在什么地方，就能在該地方找到保存的喜歡頁面，該頁面在文件夾里保存的形式為“html”文件。

在程序員開發軟件界面系統也都是有多種多樣，每種開發語言基本上都有一種或多種界面引擎如：C skin, Direct UI , 還有金山、迅雷等廠商的界面SDK。

今天推薦一個輕量級、自由度高、使用方便的界面庫 Htmlayout/Sciter。HTMLayout是一個免費的開源界面庫（核心未開源），以DLL的方式運行，并提供一個API的調用接口和一系列的C++封裝和sample例程。HTMLayout: 快速，輕量、嵌入式的，基于HTML/CSS渲染技術和布局管理的界面引擎組件，可以高效地解析和渲染HTML網頁。其幾乎支持所有的HTML元素和CSS3標準，并根據界面庫的特征，做了很多有用的功能性擴展。

這里著重地說一下在 aardio 軟件中的使用，作者把 HTMLayout和 Sciter 制作成了擴展庫, 并且免費開源, 通過這個擴展庫你知道會一點點 HTML 和 CSS 知識就可以方便地制作各種漂亮的 ui。通過作者的努力你還可以直接在界面上使用現在最流行的字體圖標，還使擴展庫支持了模板功能，你可以像寫PHP一樣寫桌面軟件的界面HTML，雖然看起來簡單的代碼，但用起來會非常方便。

言歸正傳, 我們用aardio一步步來制作一個最簡單的界面。

1、打開軟件》新建工程》選擇web界面》選擇HTMLayout》創建工程

aardio 里查看 main.aardio 源碼

 import win.ui;
/*DSG{{*/
var winform=win.form(text="htmlayout";right=761;bottom=609;border="none")
winform.add()
/*}}*/

import web.layout; 
import web.layout.behavior.windowCommand;
import web.layout.behavior.tabs;
// 加載網頁
var wbLayout=web.layout( winform );
wbLayout.go("\layout\ui.html");

if(_STUDIO_INVOKED){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
} 

//添加陰影邊框
import win.ui.shadow;
win.ui.shadow( winform,50,3 );

winform.show() 
win.loopMessage();

從上面我們可以看出，軟件的主要界面是由 ui.html，ui.css，tabs.css 這幾個文件組成的。然后你可以根據自己軟件界面的需要進行調整。

以下是我自己這二天搭建的一個軟件的界面，就是一個簡單的軟件基本框架。

如果你對htmlayout感興趣，可以查看 https://bbs.aardio.com/forum.php?mod=forumdisplay&fid=128&page=1 了解更多更詳細的教程。