所見即所得（What You See Is What You Get，WYSIWYG）是一種在計算機軟件領域中廣泛應用的概念，指用戶所見和所得到的在軟件界面中是相一致的，即用戶編輯或者設計出的內容會非常類似于最終呈現出來的效果。在 app 開發中，所見即所得作為一種界面設計風格，在 UI 編輯器中得到了廣泛的應用。本文將詳細介紹 app 開發中所見即所得的原理和詳細實現方式。

一、WYSIWYG 的原理

所見即所得的技術實現主要依賴于以下兩種方式：

1. 頁面渲染引擎技術

所見即所得技術的實現核心在于頁面編輯器和呈現引擎。頁面編輯器（也稱 UI 編輯器）是負責生成頁面可視化效果的軟件工具，而呈現引擎則是負責頁面實際呈現的軟件組件。

UI 編輯器通過提供各種工具，包括滑塊、顏色選擇器、按鈕等，來讓用戶在編輯器中進行 UI 設計，用戶所作的每一次修改都會在編輯器中反映出來。而這些修改，實際上是以特定的格式保存在內存中的，也就是開發者常說的 “源代碼”。

在應用程序運行時，頁面渲染引擎會讀取這個源代碼并進行解析，然后把解析結果呈現給用戶，這個過程就是所謂的渲染。也就是說，用戶實際看到的頁面展示效果，是由呈現引擎根據解析出來的結果生成的。

谷歌的 Skia 是目前很流行的跨平臺呈現引擎，它的可渲染圖形對象有兩種，一種是柵格圖形對象，另一種是矢量圖形對象。前者的特點是圖形對象的每個像素由顏色值和不透明度兩個信息組成，而后者則是由完整的圖形路徑所組成，通過填充或描邊的方式來呈現圖形效果。

這種基于頁面渲染引擎實現的所見即所得，靈活性較高，用戶可以隨時看到他們所編輯內容的最終展示效果，并快速地調試，調整和修改頁面設計效果。

APP

2. 實時編輯技術

實時編輯技術通過將頁面編輯器與渲染引擎直接結合，可以實現所見即所得的實時展示。頁面編輯器會監聽用戶操作，自動更新頁面中的 HTML、CSS 標記，并將這些標記自動發送到和編輯器相關聯的渲染引擎。

渲APP開發染引擎將更新后的 HTML、CSS 標記解析為屏幕上的實際內容，然后將其展示給用戶。這種實時編輯技術的好處是它可以提供更加實時的反饋，更加高效的編輯效果，大大提高了用戶的工作效率。

二、WYSIWYG 的實現

在 app 開發中，所見即所得的實現涉及到 UI 設計器、渲染引擎和呈現引擎等多個方面的知識。

1. UI 設計器

UI 設計器是專門用來創建用戶界面的工具，它可以讓開發者輕松添加和編輯各種界面元素，例如按鈕、文本框、圖像、列表視圖等等。UI 設計器通常提供直觀的拖放界面，而且很容易上手，不需要太多的代碼知識。

因為不同的平臺與設備具有不同的屏幕大小和分辨率，UI 設計器通常會提供預覽功能來確保開發者所創建的 UI 可以適應多種屏幕大小。同時，設計器還需要支持多種 UI 樣式，例如 Material Design 和 iOS 的平面設計風格等等。

2. 渲染引擎

渲染引擎在 app 開發中是至關重要的，因為它決定了用戶實際看到的界面。對于跨平臺軟件，比如 React Native，通常使用的是 WebView 或內置瀏覽器作為渲染引擎。WebView 支持 HTML、CSS 和 JavaScript，可使用 Web 技術來實現界面開發。

對于原生應用，通常會使用平臺本身提供的渲染引擎，例如 iOS 的 UIKit 和 Android 的 Android UI。這些渲染引擎提供了更多的優化和嵌入式支持，使應用程序有更好的性能和更多的功能。

3. 呈現引擎

呈現引擎負責將 UI 元素渲染到屏幕上。在 iOS 上，呈現引擎被稱為 Core Animation，它是一個高性能的圖形庫，目前已經成為許多 iPhone 和 iPad 應用程序所使用的標準。Android 上的呈現引擎則是 OpenGL ES，它是一個跨平臺的圖形庫，適用于多種硬件和操作系統。

在開發過程中，呈現引擎通常是由渲染引擎自動管理的，開發人員不需要直接操作。然而，在某些情況下，比如需要自定義動畫

或用戶交互事件時，開發人員需要直接操作呈現引擎。

三、小結

所見即所得在 app 開發中是一種非常流行的界面設計風格，使得用戶編輯和預覽 UI 顯示效果變得更加直觀和快速。實現所見即所得技術需要深入理解頁面渲染引擎技術、實時編輯技術、UI 設計器、渲染引擎和呈現引擎等多種知識。開發者可以選擇適合自己的工具和平臺來實現所見即所得，提高開發效率和用戶體驗。