【2023最新】超详细图文保姆级教程：App开发新手入门(4)

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

7 代码真机调试

7.1 纯静态CSS页面样式查看

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

7.2 真机联调（重点）

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

真机调试主要有2种方式，一种是通过 usb数据线使手机和电脑连接进行同步调试，另一种是通过 Wi-Fi 网络进行真机同步调试， 为了降低新手阅读学习的复杂度，本文重点介绍如何通过 Wi-Fi 方式进行真机联调。

7.2.1 AppLoader

YonBuilder移动开发的真机调试，需要预先安装一个专门用来配套调试的App应用，这个用来调试的App应用，官方名称定义为AppLoader。

Apploader用于APP开发过程的真机快速调试，分官方Loader和自定义Loader两个版本。

官方Loader是通用版本，内置在官方开发的 「友开发」App中 （英文名称：YonDeveloper) ，可以与任何项目进行真机调试；自定义Loade是用户自行编译的，只能与编译时所关联的固定应用进行真机调试（通过appId进行识别）。

友开发App下载地址：https://developer.yonyou.com/product/appdevelopment/appdriven#download

两者的区别是，友开发App内置的通用AppLoader可以配合任何一个App项目进行开发联调，而用户自行编译的自定义Loader只能给编译时绑定的那个应用项目使用，不能用于多个项目。简单总结就是官方Loader更快速方便，自定义Loader更灵活强大

关于两者的详细比较，可见下表

关于自定义Loader的更多说明，有兴趣的同学可以访问 https://developer.yonyou.com/docs/Technical-Topics/Introduction-Custom-Loader 查看

7.2.2 编译自定义Loader

7.2.2.1 打开编译自定义Loader页面

• 快捷打开方式：点击 YonStudio 开发工具内置快捷访问按钮

  

• 传统打开方式：云端访问路径：

  • 登录 用友开发者中心 工作台 - 云平台 - 低代码开发平台 - 移动App开发

    

  • 应用列表选择目标应用，点击进入 - 切换到「移动插件」- 切换到「Loader调试」

    

7.2.2.2 编译自定义Loader

编译前的注意事项

编译自定义Loader前，需要对以下两个事项进行确认

• 证书确认：编译安装包之前，需要应用提前安装相应的证书，如果没有安装证书，则点击按钮会弹出提示信息。（安装证书的操作之前章节已介绍，还不太熟悉的同学可翻阅之前章节学习）

• 权限确认：自定义Loader需要「手机读写存储」权限，因为Loader需要保存电脑端的更新代码到本地。自定义Loader的权限配置是复用的「移动打包」内配置的权限参数，所以如果没有配置该权限，可以切换到「移动打包」面板，勾选响应的客户端类型，进行权限的配置。（权限配置的操作之前章节已介绍，还不太熟悉的同学可翻阅之前章节学习）

  

以上两项都确认完成后，就可以编译自定义Loader了。

在Loader调试页，根据需要点击 「编译iOS自定义Loader」或 「编译Android自定义Loader」进行自定义Loader的编译，本教程选择 编译android端自定义Loader进行示范。

7.2.2.3 安装自定义Loader到手机端

​PS1：YonStudio开发工具中快捷入口打开的页面，调用的就是云端浏览器的页面，其实两者是同一个Web页面。

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

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

7.2.3 WiFi真机同步

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

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

7.2.3.2 在手机中启动自定义Loader应用

如果是第一次安装，应用内应该会提示「无存储权限。。。」的提示信息

此时，需要切回手机主页面，进入手机的 设置页面去给当前的应用「第一个应用」授权「存储」权限。

（不同的手机系统可能略有不同，大体操作路径是：设置 - 应用 - 应用管理 - 列表内选择「第一个应用」App - 选择「权限」 - 选择「存储」，进行授权）

完成应用授权后，重新打开应用，操作正确的话，应该显示以下画面。

7.2.3.3 启动WiFi连接

双击灰色操作球，调起连接面板，这里就对应到在开发工具上显示的二维码设备连接界面了。可以直接点击扫一扫按钮，启动相机扫描二维码完成连接，也可以点击输入框进行手动输入相关的IP地址和端口号信息，然后点击连接按钮进行连接，如果连接成功后，操作球会变成绿色状态。

PS: 如果连接未成功，请依次检查一下事项：

• 手动方式：确认一下输入的信息是否有误
• 确认一下 手机设备 和 电脑端是否处于同一个WiFi网络
• 确认一下 电脑端是否安装后防火墙，屏蔽了相关端口号
• 如果是公共网络，确认一下WiFi所在的路由器是否显示了socket通信或者禁止了当前端口的数据传输

7.2.3.4 同步数据

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

  PS: 全量和增量的区别，全量是将开发工具内的应用代码全部覆盖到手机的应用上，进行全部替换。而增量是开发工具在同步数据之前会对比开发工具内的代码和应用内的页面代码，会进行页面对比，只替换那些不同的页面。首次同步建议使用全量，后续使用增量即可。

  

• 同步数据完成后，应用会自动重启，显示最新的代码界面,如下图就是成功同步代码后的应用界面。

  

7.2.4 修改数据，体验下同步效果

• 让我们修改一下html路径下的mian.html文件

  

• 修改完成后记得先保存文件

  PS: 快捷键 ⌘ + S（macOS系统）或者ctrl + s（windows系统）

  

• 右键根目录或使用快捷键进行Wif增量同步

  

• 真机同步效果

  

至此，我们就完成了真机同步的操作，即在YonStudio开发工具内修改代码，然后将最新代码同步到手机端并实时刷新预览最新修改效果的整个流程。

PS: 本节操作是日常开发App项目最常使用的调试操作，小伙伴们要熟练掌握。

（未完待续…）