### 在真机上运行并调试使用
MUI 框架开发的移动应用
要在真机上运行并调试使用
MUI 框架开发的移动应用，可以通过 HBuilderX 提供的“真机运行”功能实现。以下是具体的操作步骤和注意事项：
1
. **确保
开发环境配置正确**
确保已经安装了 HBuilderX，并且项目是基于
MUI 框架开发的。
MUI 是一个轻量级的前端
框架，专为
移动端开发设计，适用于
HTML5 应用的构建。在 HBuilderX 中创建或打开项目时，确保所有依赖文件（如 `
mui.min
.js` 和 `
mui.min
.css`）已正确引入。
2
. **连接手机并启用调试模式**
使用数据线将手机连接到电脑，并确保手机已启用“
开发者选项”和“USB调试模式”。不同品牌的手机开启方式略有不同，通常需要在“设置” -> “关于手机”中连续点击“版本号”以激活“
开发者选项”，然后在“
开发者选项”中启用“USB调试”。
3
. **在 HBuilderX 中选择“真机运行”**
在 HBuilderX 中打开项目，点击顶部菜单栏的“运行”按钮，然后选择“真机运行”。正常情况下，HBuilderX 会检测到已连接的设备，并在右侧设备列表中显示手机名称。如果设备未显示，可以参考 HBuilderX 的真机运行故障排查指南。
4
. **安装基座并运行应用**
首次运行时，HBuilderX 会在手机上安装一个“基座应用”，它相当于一个运行环境，用于加载和调试当前
开发的应用。安装过程中，HBuilderX 控制台会显示进度信息。安装完成后，手机上会自动打开该基座应用，并加载当前项目。
5. **实时调试与修改**
在 HBuilderX 中启用“边改边看”模式，可以实现实时预览页面效果。每当修改了
HTML、CSS 或
JavaScript 文件并保存后，HBuilderX 会自动将更改同步到手机上，无需重新打包和安装应用。这对于调试页面布局、交互逻辑等非常高效。
6
. **调试工具的使用**
在 HBuilderX 中，可以通过“调试”功能查看手机端的控制台日志、网络请求、性能分析等信息。这些工具对于排查错误和优化应用性能非常有帮助。
7
. **注意事项**
- 如果应用需要调用原生功能（如摄像头、GPS、本地存储等），需要配置相应的权限，并确保基座应用支持这些功能。
- 真机运行时，确保手机和电脑处于同一局域网中，以保证通信稳定。
### 示例代码：
MUI 框架的基本页面结构
以下是一个使用
MUI 框架构建的基本页面结构示例代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title>
MUI 示例页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1
.0, maximum-scale=1
.0, user-scalable=no">
<link href="css/
mui.min
.css" rel="stylesheet">
<script src="
js/
mui.min
.js"></script>
<script>
mui.init();
</script>
</head>
<body>
<header class="
mui-bar
mui-bar-nav">
<h1 class="
mui-title">
MUI 示例</h1>
</header>
<div class="
mui-content">
<p>这是一个使用
MUI 框架构建的页面。</p>
</div>
</body>
</
html>
```
###
提供MUIv3.7.3的两个下载选项：1)百度网盘链接（备份，密码afk9）；2)mui.js及examples下载可通过码农之家获取。
扫一扫
2256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
