企业官网建设流程全解析

如果你正在用 MATLAB App Designer 开发桌面应用，想在界面上展示一张图片，或者嵌入一个网页，是不是觉得这应该很简单？但当你真正动手时，可能会发现：为什么图片加载出来是变形的？为什么 HTML 控件里的网页一片空白？为什么调整大小时控件内容会“消失”？这些看似基础的问题，恰恰是新手从“知道有这个控件”到“真正能用好它”之间最大的鸿沟。

很多人以为，在 App Designer 里拖一个图片控件或 HTML 控件，设置一下路径或 URL 就完事了。但实际上，这两个控件的核心价值远不止“显示内容”。图片控件（uiimage）背后是 MATLAB 强大的图像处理能力与 GUI 显示的桥梁，而 HTML 控件（uihtml）则是将现代 Web 技术无缝集成到传统桌面应用中的关键。用好了，它们能极大提升应用的交互性和表现力；用不好，就会带来一堆显示异常和兼容性问题。

本文不会只告诉你控件属性面板里有哪些选项。我们将深入探讨uiimage和uihtml在实际项目中的正确用法、常见陷阱以及那些官方文档里不会明说的“最佳实践”。你将学会如何动态加载并自适应显示不同尺寸的图片，如何让 HTML 控件与 MATLAB 后端进行安全、高效的数据通信，以及如何避开布局和资源管理中的那些“坑”。无论你是正在开发数据可视化仪表盘、实验报告生成工具，还是需要内嵌浏览器功能的应用，这篇文章都能提供即插即用的解决方案。

1. 为什么你的 App Designer 图片和网页显示总出问题？

在 App Designer 中处理图片和 HTML 内容，新手最容易陷入几个误区：一是认为控件属性设置是“一劳永逸”的，忽略了运行时动态数据的需求；二是将 HTML 控件简单地视为一个微型浏览器，忽视了它与 MATLAB 环境之间的数据隔离与通信挑战；三是对图像数据的格式和编码理解不足，导致显示异常。

问题的根源往往在于对控件“数据流”的理解不够清晰。对于uiimage，你提供的不是一个简单的文件路径，而是一个可以被imread函数读取的图像数据矩阵。控件如何渲染这个矩阵，受到ImageSource属性、控件尺寸以及图像原始尺寸的共同影响。对于uihtml，你提供的 HTML 内容运行在一个受限的沙盒环境中，它不能直接访问 MATLAB 工作区的变量，也不能随意调用本地系统资源。如何搭建一座从 Web 前端到 MATLAB 后端的可靠桥梁，是发挥其威力的关键。

本文将首先帮你建立这两个控件的正确心智模型，然后通过从基础到进阶的完整示例，带你绕过所有常见陷阱，最终实现稳定、美观且交互丰富的界面效果。

2. 核心控件解析：uiimage 与 uihtml 的定位与能力边界

在深入代码之前，我们必须明确这两个控件的设计初衷和能力边界，这能帮你从一开始就做出正确的技术选型。

uiimage (图片控件)

• 核心作用：在 App 界面中显示图像数据。这里的“图像数据”主要指由imread、imshow等函数处理的数值矩阵（如 RGB 图像是 M×N×3 的矩阵）。
• 关键属性：
  • ImageSource: 最核心的属性。可以是一个图像数据矩阵，也可以是一个有效的图片文件路径（字符串）。当提供路径时，App Designer 会在内部调用imread。
  • ScaleMethod: 决定当图像尺寸与控件尺寸不匹配时如何缩放。‘fit’（默认，保持宽高比缩放以完全装入控件）、‘fill’（拉伸填充，可能变形）、‘none’（不缩放，显示原图，可能被裁剪）。
  • HorizontalAlignment/VerticalAlignment: 当图像尺寸小于控件尺寸，且ScaleMethod为‘none’时，用于定位图像。
• 能力边界：它不是一个功能完整的图像编辑器。复杂的图像处理（如滤波、分割）需要在 MATLAB 代码中完成，然后将结果矩阵赋给ImageSource。它主要用于“展示”处理后的结果。

uihtml (HTML 控件)

• 核心作用：在 App 界面中嵌入并渲染 HTML 内容。这可以是一个简单的静态网页片段，也可以是一个包含 CSS 和 JavaScript 的复杂交互式应用。
• 关键属性与方法：
  • HTMLSource: 可以是一个 HTML 字符串，也可以是一个本地.html文件的路径。
  • Data属性与DataChangedFcn回调：这是实现双向通信的核心。MATLAB 可以通过设置Data属性向 HTML 传递数据；HTML 中的 JavaScript 可以调用matlab:uihtml对象的方法来触发DataChangedFcn，从而将数据传回 MATLAB。
• 能力边界与安全限制：HTML 内容运行在一个基于 Chromium 的嵌入式浏览器组件中，但处于安全沙盒环境。默认情况下，它不能：
  1. 访问本地文件系统（除了通过HTMLSource指定的来源）。
  2. 直接执行 MATLAB 命令。
  3. 访问互联网资源（除非 App 有相应权限设置，但这通常复杂且不推荐）。它的主要定位是创建丰富的、基于 Web 技术的用户界面组件，并与 MATLAB 逻辑进行数据交换。

理解这些边界，就能明白为什么有些操作会失败，以及应该如何设计解决方案。

3. 环境准备与项目创建

本文基于 MATLAB R2022b Update 4 版本的 App Designer 进行演示，但核心概念适用于 R2019b 及以后支持uihtml的版本。请确保你的 MATLAB 已安装并授权。

1. 启动 App Designer：在 MATLAB 命令窗口输入appdesigner并回车，或点击主页选项卡上的“设计应用”按钮。
2. 创建新项目：选择“空白应用”，创建一个新的 App 项目。
3. 熟悉设计视图：界面主要分为：
   • 组件库：左侧面板，包含所有可用控件。
   • 画布：中间区域，用于拖放和布局控件。
   • 组件浏览器：右下角，以树状图显示所有已添加的控件及其层次结构。
   • 代码视图：点击上方工具栏的“代码”按钮，切换到编写回调函数和业务逻辑的界面。

我们接下来的所有操作都将在这个环境中进行。

4. uiimage 控件：从静态显示到动态交互

4.1 基础静态图片加载

我们从最简单的开始：在启动时显示一张预设的图片。

1. 添加控件：从组件库的“常用”组中，将一个“图像”控件拖拽到画布上。在组件浏览器中，它的默认名称可能是UIImage，建议将其重命名为更有意义的LogoImage或DisplayImage。
2. 设置属性（设计时）：选中画布上的图像控件，在右侧的“检查器”面板中找到ImageSource属性。你可以直接点击输入框旁的 “...” 按钮，从磁盘中选择一张图片（如logo.png）。App Designer 会自动将该图片的路径（相对或绝对）填入属性。注意：如果使用相对路径，它是相对于 App 项目文件（.mlapp）所在目录的。
3. 调整显示：同时观察ScaleMethod属性。尝试将其在‘fit’、‘fill’、‘none’之间切换，并调整画布上控件的大小，直观感受不同模式下的显示效果。

代码视角：切换到代码视图，查看startupFcn函数。你会发现，设计时设置的ImageSource路径已经被硬编码在控件属性初始化里。这是一种静态加载方式。

% 这是在设计视图设置ImageSource后，代码视图中的样子（简化） classdef MyApp < matlab.apps.AppBase properties (Access = private) UIFigure matlab.ui.Figure LogoImage matlab.ui.control.Image % 重命名后的控件 end methods (Access = private) % 创建UI组件 function createComponents(app) % 创建LogoImage app.LogoImage = uiimage(app.UIFigure); app.LogoImage.Position = [100 100 200 150]; % 设计时设置的路径被直接写入 app.LogoImage.ImageSource = ‘.\assets\logo.png‘; app.LogoImage.ScaleMethod = ‘fit‘; end end end

4.2 动态加载与图像处理集成

静态加载适用于固定资源。更多时候，我们需要根据用户操作或数据处理结果动态更换图片。

场景：用户点击一个按钮，选择一张本地图片并显示，同时将其转换为灰度图。

1. 添加按钮：拖拽一个“按钮”控件到画布，将其文本改为“选择图片并显示”。
2. 编写按钮回调函数：右键点击按钮，选择“回调” -> “添加按钮按下回调函数”。App Designer 会自动切换到代码视图并创建回调函数框架。
3. 实现回调逻辑：在该回调函数中，我们需要：
   • 使用uigetfile打开文件选择对话框。
   • 用imread读取图像数据。
   • （可选）进行图像处理，如rgb2gray。
   • 将处理后的图像数据矩阵赋值给uiimage控件的ImageSource。

% 文件：MyApp.mlapp (代码视图部分) % 这是“选择图片并显示”按钮的回调函数 function ButtonPushed(app, event) % 1. 弹出文件选择框，过滤图像文件 [filename, pathname] = uigetfile({‘*.png;*.jpg;*.jpeg;*.bmp;*.tif‘, ‘Image Files‘}, ... ‘Select an Image‘); if isequal(filename, 0) % 用户取消了选择 return; end % 2. 构建完整路径并读取图像 fullpath = fullfile(pathname, filename); try originalImage = imread(fullpath); catch ME uialert(app.UIFigure, [‘Failed to read image: ‘, ME.message], ‘Error‘); return; end % 3. 图像处理示例：转换为灰度图 if size(originalImage, 3) == 3 % 如果是RGB图像 processedImage = rgb2gray(originalImage); else processedImage = originalImage; % 已经是灰度或二值图 end % 4. 将处理后的图像矩阵赋值给Image控件的ImageSource app.DisplayImage.ImageSource = processedImage; % 直接赋值矩阵！ % 5. （可选）根据图像尺寸调整控件ScaleMethod或给出提示 [imgH, imgW] = size(processedImage, [1 2]); ctrlW = app.DisplayImage.Position(3); ctrlH = app.DisplayImage.Position(4); if imgW/imgH > ctrlW/ctrlH * 1.1 % 图像相对较宽，控件相对较高 app.DisplayImage.ScaleMethod = ‘fit‘; % 保持宽高比，两边可能有黑边 % uialert(app.UIFigure, ‘Image is wider than the display area. Consider adjusting control size.‘, ‘Info‘); end end

关键点：

• 动态加载时，ImageSource可以直接接收一个图像数据矩阵（processedImage），这比传递文件路径更直接，避免了路径问题。
• imread要用try-catch包裹，以处理损坏或格式不支持的图片文件。
• 根据图像和控件的宽高比动态调整ScaleMethod或给出提示，能提升用户体验。

4.3 常见显示问题排查

5. uihtml 控件：打通 MATLAB 与 Web 的桥梁

uihtml控件打开了在 MATLAB 桌面应用中集成现代 Web 技术的大门。其核心挑战在于通信。

5.1 显示静态 HTML 与本地网页

方法一：直接提供 HTML 字符串适用于简单的、无需外部资源的 HTML 片段。

% 在App的startupFcn或某个回调中设置 htmlContent = [‘<html><body style=“background-color: #f0f0f0; text-align: center;“>‘, ... ‘<h2>Welcome to My App</h2>‘, ... ‘<p>This is an HTML snippet rendered inside MATLAB.</p>‘, ... ‘<button onclick=“alert(‘‘Hello from HTML!‘‘)“>Click Me</button>‘, ... ‘</body></html>‘]; app.MyHTMLControl.HTMLSource = htmlContent;

方法二：链接到本地 HTML 文件适用于复杂的、包含独立 CSS/JS 文件的页面。这是更工程化的做法。

1. 在你的 App 项目目录下创建一个子文件夹，例如web_resources。
2. 在该文件夹内创建dashboard.html和相关的style.css、script.js。
3. 在 MATLAB 代码中，使用相对路径指向该文件。

% 获取当前App文件的路径，构建资源绝对路径 appPath = fileparts(mfilename(‘fullpath‘)); % 获取当前.mlapp文件所在目录 htmlFilePath = fullfile(appPath, ‘web_resources‘, ‘dashboard.html‘); % 检查文件是否存在 if isfile(htmlFilePath) app.MyHTMLControl.HTMLSource = htmlFilePath; else uialert(app.UIFigure, ‘HTML resource file not found!‘, ‘Error‘); end

重要提示：HTML 文件中的相对路径（如src=“./script.js“）是相对于HTMLSource文件（即dashboard.html）所在目录解析的，而不是相对于 MATLAB 当前工作目录。务必规划好你的资源目录结构。

5.2 实现 MATLAB 到 HTML 的数据传递 (Data 属性)

uihtml控件有一个Data属性，可以存储任意 MATLAB 数据（需可序列化为 JSON）。当Data属性被更新时，HTML 端可以监听并获取这些数据。

MATLAB 端代码：

% 假设我们有一个结构体或元胞数组数据要发送给HTML图表 chartData.x = 1:10; chartData.y = rand(1, 10) * 100; chartData.title = ‘Random Data Plot‘; % 将数据赋值给uihtml控件的Data属性 app.MyHTMLControl.Data = chartData; % MATLAB会自动将其序列化

HTML/JavaScript 端代码(dashboard.html或内联脚本)： 你需要编写 JavaScript 来监听数据变化。这通常通过监听‘message‘事件实现。

<!DOCTYPE html> <html lang=“en“> <head> <meta charset=“UTF-8“> <title>Dashboard</title> <script src=“https://cdn.jsdelivr.net/npm/chart.js“></script> <style>#chartContainer { width: 600px; height: 400px; }</style> </head> <body> <h1 id=“title“>Loading...</h1> <canvas id=“chartContainer“></canvas> <script> // 1. 监听来自MATLAB的数据消息 window.addEventListener(‘message‘, function(event) { // event.data 包含了从MATLAB传递过来的数据 const dataFromMATLAB = event.data; if (dataFromMATLAB) { // 2. 更新页面内容 document.getElementById(‘title‘).textContent = dataFromMATLAB.title; // 3. 使用数据绘图 (例如使用Chart.js) const ctx = document.getElementById(‘chartContainer‘).getContext(‘2d‘); if (window.myChart) { window.myChart.destroy(); // 销毁旧图表 } window.myChart = new Chart(ctx, { type: ‘line‘, data: { labels: dataFromMATLAB.x, datasets: [{ label: ‘Y Values‘, data: dataFromMATLAB.y, borderColor: ‘rgb(75, 192, 192)‘, tension: 0.1 }] } }); } }); // 初始加载完成，可以通知MATLAB（如果需要） window.addEventListener(‘load‘, function() { // 可以发送一个初始消息回MATLAB if (window.matlab) { window.matlab.postMessage({ status: ‘htmlLoaded‘ }); } }); </script> </body> </html>

5.3 实现 HTML 到 MATLAB 的通信 (DataChangedFcn 回调)

当 HTML 中的 JavaScript 调用window.matlab.postMessage()时，会触发 MATLAB 中uihtml控件的DataChangedFcn回调函数。

HTML/JavaScript 端：

<script> function sendDataToMATLAB() { const userInput = document.getElementById(‘inputField‘).value; const dataToSend = { action: ‘userSubmittedText‘, value: userInput, timestamp: new Date().toISOString() }; // 关键调用：将数据发送回MATLAB if (window.matlab) { window.matlab.postMessage(dataToSend); } else { console.error(‘MATLAB bridge not available.‘); } } </script> <!-- 一个触发发送的按钮 --> <button onclick=“sendDataToMATLAB()“>Send to MATLAB</button>

MATLAB 端： 你需要为uihtml控件创建DataChangedFcn回调。

1. 在设计视图中，右键点击uihtml控件。
2. 选择“回调” -> “添加 DataChangedFcn 回调”。
3. 在生成的函数中处理从 HTML 传来的数据。

% 文件：MyApp.mlapp (代码视图部分) % uihtml控件的DataChangedFcn回调函数 function MyHTMLControlDataChanged(app, event) % event.Data 包含了从HTML传递过来的数据 receivedData = event.Data; % 根据数据结构进行不同的处理 if isfield(receivedData, ‘action‘) switch receivedData.action case ‘userSubmittedText‘ % 更新MATLAB UI或进行数据处理 disp([‘User submitted text: ‘, receivedData.value]); % 例如，在MATLAB App中更新一个标签 app.StatusLabel.Text = [‘Received: ‘, receivedData.value]; % 可以再次发送数据回HTML（形成闭环） response.status = ‘processed‘; response.message = ‘Text received successfully.‘; app.MyHTMLControl.Data = response; otherwise disp([‘Unknown action: ‘, receivedData.action]); end else disp(‘Received data without action field.‘); end end

5.4 完整示例：一个简单的数据仪表盘

让我们整合以上知识，创建一个迷你仪表盘 App。

1. 功能：App 有一个按钮，点击后生成随机数据，并发送给 HTML 控件绘制成图表。HTML 端有一个按钮，点击后将当前图表数据点数量发送回 MATLAB 显示。

App Designer 布局：

• 一个按钮 (GenerateDataButton)
• 一个uihtml控件 (DashboardHTML)
• 一个标签 (StatusLabel)

MATLAB 主要代码：

% 在startupFcn中初始化HTML控件，指向本地文件 appPath = fileparts(mfilename(‘fullpath‘)); htmlFilePath = fullfile(appPath, ‘web_resources‘, ‘dashboard_v2.html‘); if isfile(htmlFilePath) app.DashboardHTML.HTMLSource = htmlFilePath; else % 如果文件不存在，提供一个简单的备用HTML app.DashboardHTML.HTMLSource = ‘<html><body><p>Dashboard file missing.</p></body></html>‘; end % “生成数据”按钮的回调 function GenerateDataButtonPushed(app, event) % 1. 生成模拟数据 timePoints = datetime(‘now‘) + minutes(0:29); % 最近30分钟 values = 50 + 20 * randn(1, 30); % 带噪声的数据 % 2. 将数据打包为结构体 % 注意：datetime需要转换为字符串以便JSON序列化 chartData.time = cellstr(timePoints(:)); % 转换为元胞字符串数组 chartData.value = values; chartData.title = ‘Real-time Sensor Data‘; % 3. 发送数据到HTML控件 app.DashboardHTML.Data = chartData; % 4. 更新状态 app.StatusLabel.Text = ‘Data generated and sent to dashboard.‘; end % DashboardHTML的DataChangedFcn回调 function DashboardHTMLDataChanged(app, event) dataFromWeb = event.Data; if isfield(dataFromWeb, ‘report‘) && strcmp(dataFromWeb.report, ‘chartPointCount‘) pointCount = dataFromWeb.count; app.StatusLabel.Text = sprintf(‘HTML reports chart has %d data points.‘, pointCount); end end

HTML 文件 (dashboard_v2.html)：

<!DOCTYPE html> <html> <head> <script src=“https://cdn.jsdelivr.net/npm/chart.js“></script> </head> <body> <h2 id=“plotTitle“>Waiting for data...</h2> <canvas id=“myChart“ width=“400“ height=“200“></canvas> <br/> <button onclick=“sendPointCount()“>Report Point Count to MATLAB</button> <p id=“status“></p> <script> let myChartInstance = null; // 监听MATLAB发来的数据 window.addEventListener(‘message‘, function(event) { const data = event.data; if (data && data.title) { document.getElementById(‘plotTitle‘).textContent = data.title; updateChart(data.time, data.value); } }); function updateChart(labels, values) { const ctx = document.getElementById(‘myChart‘).getContext(‘2d‘); if (myChartInstance) { myChartInstance.destroy(); } myChartInstance = new Chart(ctx, { type: ‘line‘, data: { labels: labels, datasets: [{ label: ‘Sensor Value‘, data: values, borderColor: ‘blue‘, fill: false }] }, options: { responsive: false } }); document.getElementById(‘status‘).textContent = `Chart updated with ${values.length} points.`; } function sendPointCount() { if (myChartInstance && window.matlab) { const count = myChartInstance.data.datasets[0].data.length; window.matlab.postMessage({ report: ‘chartPointCount‘, count: count }); } } // 页面加载后通知MATLAB window.addEventListener(‘load‘, () => { if (window.matlab) { window.matlab.postMessage({ status: ‘ready‘ }); } }); </script> </body> </html>

6. 运行、调试与效果验证

1. 运行 App：点击 App Designer 工具栏上的绿色“运行”按钮（或按 F5）。
2. 验证图片控件：
   • 点击“选择图片并显示”按钮，选择一张本地图片，确认能正常显示，且缩放方式符合预期。
   • 尝试选择不同尺寸和格式的图片，测试健壮性。
3. 验证 HTML 控件：
   • App 启动后，HTML 控件应显示dashboard_v2.html的内容，标题为“Waiting for data...”。
   • 点击“生成数据”按钮，HTML 中的图表应更新为随机数据曲线，标题变为“Real-time Sensor Data”。
   • 点击 HTML 中的“Report Point Count to MATLAB”按钮，MATLAB App 底部的状态标签应更新为“HTML reports chart has 30 data points.”。
4. 调试技巧：
   • MATLAB 端：在回调函数中使用disp()或fprintf()输出关键变量值到命令窗口。使用断点进行逐步调试。
   • HTML/JS 端：这是难点。由于uihtml运行在嵌入式浏览器中，你无法直接打开浏览器开发者工具。一个变通方法是：
     1. 将你的 HTML 内容写在一个独立的.html文件中。
     2. 用系统浏览器（Chrome/Firefox）直接打开这个文件进行开发和调试 JS/CSS。
     3. 确保功能正常后，再将其集成到 App Designer 中。对于简单问题，可以在 HTML 中使用console.log()，虽然看不到输出，但有时能避免语法错误。

7. 高级技巧与最佳实践

7.1 图片控件的最佳实践

1. 资源管理：不要将图片资源放在可能变动的路径下。对于打包成独立桌面应用（使用 MATLAB Compiler）的情况，务必使用which或fullfile(ctfroot,...)来定位已打包的资源。在开发阶段，可以将资源放在项目根目录的resources子文件夹中，并使用fileparts(mfilename(‘fullpath‘))来构建绝对路径。
2. 性能优化：对于需要频繁更新的大图（如视频流），直接更新ImageSource矩阵可能带来性能开销。考虑以下优化：
   • 如果只是更新图像的一部分，能否只更新矩阵的特定区域？（但uiimage本身不支持局部更新）。
   • 对于实时显示，确保图像尺寸与控件显示尺寸匹配，避免不必要的内存拷贝和缩放计算。
   • 如果图像处理耗时，在后台使用parfeval进行，处理完成后再在 UI 线程中更新ImageSource。
3. 内存管理：大的图像矩阵会占用大量内存。如果图片仅用于显示，且原始数据很大，可以考虑在赋值给ImageSource前，先使用imresize将其缩放到接近控件显示的大小。

7.2 HTML 控件的最佳实践与安全须知

1. 通信协议设计：定义清晰的action或type字段来区分从 HTML 发回的不同类型的消息。使用结构体或对象来组织数据，使其具有自描述性。
2. 错误处理：在 MATLAB 的DataChangedFcn中，始终用try-catch包裹对event.Data的处理逻辑，防止畸形的 JSON 数据导致 App 崩溃。在 HTML 的 JavaScript 中，检查window.matlab对象是否存在再调用postMessage。
3. 沙盒安全：牢记 HTML 运行在沙盒中。绝对不要尝试通过 HTML/JS 直接执行系统命令或访问敏感文件。所有需要高级权限或访问外部资源的操作，都应由 MATLAB 后端完成，HTML 前端只负责发送请求和展示结果。
4. 外部资源引用：HTML 中引用的网络资源（如 CDN 上的 Chart.js）需要网络连接。对于需要离线工作的应用，应将所有 JS/CSS 库下载到本地，并使用相对路径引用。
5. 样式隔离：嵌入的 HTML 可能会受到 MATLAB 全局样式的影响，反之亦然。为你的 HTML 内容容器添加特定的 ID 或 Class，并使用 CSS 作用域（如#myAppContainer button { ... }）来避免样式冲突。

7.3 布局与容器控件的配合

无论是uiimage还是uihtml，它们通常被放置在布局容器（如uigridlayout）中，以实现响应式设计。

• 关键属性：设置控件的Layout属性，将其放入网格布局的特定行列中。
• 自适应缩放：在网格布局中，将行和列的Height或Width设置为‘fit‘或‘1x‘，可以使图片/HTML 控件随窗口大小自适应。同时，将uiimage的ScaleMethod设置为‘fit‘，将uihtml内部元素的尺寸单位设置为百分比（如width: 100%; height: 100%;），可以实现完美的内层适配。

8. 常见问题深度排查清单

除了第4.3节的基础问题，以下是一些更隐晦的“坑”：

关于uihtml控件：

关于打包部署：如果你使用 MATLAB Compiler 将 App 打包成独立桌面应用（.exe等），图片和 HTML 资源需要被正确包含在CTF（Component Technology File）归档中。

1. 在项目中管理资源：将所有依赖的图片、HTML、CSS、JS 文件放在 App 项目目录下的子文件夹中。
2. 使用which或ctfroot：在代码中，使用which(‘myImage.png‘)来定位资源，或使用fullfile(ctfroot, ‘web_resources‘, ‘dashboard.html‘)。ctfroot在打包后指向临时解压的资源根目录。
3. 在 Compiler 设置中添加文件：在“应用程序编译器”中，确保将资源文件夹添加到“添加的文件/文件夹”列表中。

掌握uiimage和uihtml控件，意味着你能在 MATLAB App Designer 中构建出视觉表现力更强、交互更丰富的现代桌面应用。核心在于理解它们的数据流：uiimage是图像数据矩阵的展示器，而uihtml是一个需要精心设计通信协议的 Web 微前端。从静态资源加载到动态数据绑定，从简单的显示到复杂的双向交互，每一步都需要对路径、数据格式和事件机制有清晰的把握。

建议你从文中的最小示例开始，亲手实现一遍，确保每个环节都跑通。然后，尝试将它们融入到你自己的项目中，例如用uiimage展示实时处理后的图像结果，用uihtml集成一个第三方图表库来制作动态报表。当你遇到问题时，首先回到“数据流”和“沙盒环境”这两个基本点进行排查，大部分难题都能迎刃而解。