超详细图文保姆级教程：App开发新手入门（三）

article/2025/10/2 13:59:01

重要：
想学习APP开发的新手同学，建议访问我发布的最新版本的文章教程【2023最新】超详细图文保姆级教程：App开发新手入门

上文我们已经完成了一个应用项目的导入、代码更新和代码提交，本章继续讲述一下，如何在开发过程中进行代码的同步联机调试。

4 代码调试

4.1 纯静态CSS页面样式查看

代码调试有多种方式，如果是查看纯粹的静态样式，可以使用浏览器打开对应页面，或者直接在开发工具上鼠标右键点击页面文件，然后选择「实时预览」选项，即可在开发工具中查看
在这里插入图片描述

4.2 真机联调（重点）

在实际开发中，通常需要这样一种场景，就是对于一些复杂交互逻辑的页面的联调。这些页面加载后需要执行一些代码逻辑，或者调用一些手机特有的功能（比如扫描二维码），这时候我们就需要在真实的手机环境下运行代码，进行开发调试，这种情况我们就需要使用到下面介绍的真机联调方式了。

真机调试主要有2种方式，一种是通过USE数据线使手机和电脑连接进行同步，另一种是通过Wifi网络进行真机同步，Wifi方式更为契合实际开发需要，为了降低新手阅读学习的复杂度，本文重点介绍如果通过Wifi方式进行真机联调。

WIFI真机联调的操作流程：

4.2.1 编译测试应用安装包

打开编译自定义Loader页面
编译自定义Loader
安装自定义Loader到手机

PS1：以上操作也可以自行在浏览器里去操作实现，具体为使用浏览器登录官网，在控制台里选择「模块」- 「自定义Loader」页面进行操作，是同样的效果。其实开发工具中调用的就是浏览器页面，两者是同一个Web页面。

PS2: 真机调试可以使用真实的物理手机，也可以在电脑PC端安装模拟器软件代替手机进行开发调试。使用模拟器同步速度快，频繁同步也不伤手机，当不具备WIFI环境或局域网环境时，特别适合。不过需要注意因为是模拟软件，相对于真实手机有一定的兼容性问题，比如涉及使用原生功能(比如扫描二维码等)的页面，还是建议使用物理手机去调试。

PS3：关于模拟的选择，因为苹果的iOS属于闭源系统，所以当前还是主要选择安卓模拟器进行代码联调，这里个人推荐使用网易开发的MuMu模拟器，实际开发使用效果很不错。下载apk安装包后，鼠标双击或者拖动到安装包到模拟器内即可完成安装（下图是MuMu模拟器安装测试Loader的截图）。

在这里插入图片描述

4.2.2 设备连接

在Studio3 开发工具中，点击顶部菜单「终端」- 「通过Wi-Fi连接新的设备」

在这里插入图片描述

正确操作会弹出以下界面,这个界面不要关闭，后面的连接会用到

在这里插入图片描述

在手机中启动自定义Loader应用，可见到以下页面
双击灰色操作球，调起连接面板，这里就对应到在开发工具上显示的二维码设备连接界面了

4.2.3 同步数据

建立连接成功后，在开发工具中鼠标右键点击根目录，然后「选择WIFI同步【全量】」（也可以使用快捷键操作，不同的操作系统快捷键并不相同，下图是在MacOS系统下的截图）。

PS: 全量和增量的区别，全量是将开发工具内的应用代码全部覆盖到手机的应用上，进行全部替换。而增量是开发工具在同步数据之前会对比开发工具内的代码和应用内的页面代码，会进行页面对比，只替换那些不同的页面。首次同步建议使用全量，后续使用增量即可。
同步数据完成后，应用会自动重启，显示最新的代码界面,如下图就是成功同步代码后的应用界面。