超详细图文保姆级教程: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: 全量和增量的区别,全量是将开发工具内的应用代码全部覆盖到手机的应用上,进行全部替换。而增量是开发工具在同步数据之前会对比开发工具内的代码和应用内的页面代码,会进行页面对比,只替换那些不同的页面。首次同步建议使用全量,后续使用增量即可。
同步数据完成后,应用会自动重启,显示最新的代码界面,如下图就是成功同步代码后的应用界面。
PS:如果Wifi同步后没有反应,查看确认一下应用是否具备存储权限。当前主流的安卓系统都对应用权限加了限制,没有存储权限,应用无法保存更新后的代码,所以确保应用具备存储权限,不同的手机系统可能略有不同,大体是 「设置」-「应用」- 选择你的应用,点击进行详情页,然后点击权限进行查看修改
4.2.4 修改数据,体验下同步效果
让我们修改一下html路径下的mian.html文件
修改完成后记得先保存文件
- 右键根目录或使用快捷键进行Wif增量同步
- 真机同步效果
(未完待续…)
超详细图文保姆级教程:App开发新手入门(三)相关推荐
- 【2023最新】超详细图文保姆级教程:App开发新手入门(5)
上文回顾,我们已经完成了一个应用的真机调试,本章我们来了解一下如何引入YonBuilder移动开发的(原生)移动插件, 并利用移动插件完成一个简单的视频播放器. 8. 「移动插件」的使用 8.1 什么 ...
- 【2023最新】超详细图文保姆级教程:App开发新手入门(4)
之前章节我们已经完成了一个应用项目的导入.代码更新和代码提交和应用打包编译,本章继续讲述一下,如何在开发过程中进行代码的同步联机调试. 7 代码真机调试 7.1 纯静态CSS页面样式查看 代码调试有多 ...
- 【2023最新】超详细图文保姆级教程:App开发新手入门(2)
上章节我们已经成功的创建了一个 App 项目,接下来我们讲述一下,如何导入项目.编辑代码和提交项目代码. Let's Go! 4. 项目导入 当用户创建一个新的应用时,YonStudio 开发工具会自 ...
- 【2023最新】超详细图文保姆级教程:App开发新手入门(1)
1. 关于 『YonBuilder移动开发』 PS: 本段内容主要目的是去除官方语音描述,用通俗的语言来简单介绍一下『YonBuilder移动开发』,方便新手开发者判断是否适合自己上手学习. 简介: ...
- 超详细图文保姆级教程:App开发新手入门(五)
上文回顾,我们已经完成了一个应用的版本编译,本章我们来了解一下如何引入APICloud的原生模块, 并利用模块还完成一个简单的视频播放器. 1. 关于APICloud原生模块的简单概述 1.1 什么是 ...
- 超详细图文保姆级教程:App开发新手入门(二)
上文我们已经成功的创建了一个项目,接下来我们讲述一下,如何导入.编辑.提交项目代码下面我们继续. 4. 开发调试 4.1 项目导入 当用户创建一个新的应用时,Studio3开发工具会自动导入项目代码, ...
- 超详细图文保姆级教程:App开发新手入门(六)
设置应用的Logo图标和启动页 上文回顾,我们已经完成了一个简单应用的开发,本章我们简单介绍一下如何设置应用的桌面图标及应用的启动页(本章内容超级简单 -). 1. 修改设置应用的桌面图标 1.1 登 ...
- k8s搭建(超详细,保姆级教程)
1.简介 这里就不赘述,想要了解的朋友直接去这里深入了解什么是K8S. 2.环境要求 2台以上机器,操作系统 CentOS7.7-64位系统 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬盘 ...
- STM32移植LVGL8.0.2超详细的保姆级教程附移植好的工程文件
文章目录 前言 一.什么是LVGL? 二.先看效果 三.移植前准备工作 1.准备原有工程 2.下载LVGL源码 四.开始移植 1.把源码搬运到工程文件夹里 2.把搬运好的代码添加到keil工程 3.动 ...
最新文章
- C++反汇编第五讲,认识C++中的Try catch语法,以及在反汇编中还原
- Java设计模式(一):策略设计模式
- 15年考的全国计算机应用技术,(2015年全国专业技术人员计算机应用能力考试.doc...
- 反射、对象拷贝、异常常见问题总结
- 关于Git使用的一些心得
- 1-5Tomcat 目录结构 和 web项目目录结构
- ActiveMQ学习总结(5)——Java消息服务JMS详解
- php 百科源码,php源码是什么意思
- springmvc获取url对应的controller,并拦截记录每次访问的controller方法
- 阶段3 1.Mybatis_04.自定义Mybatis框架基于注解开发_3 基于注解的自定义再分析
- 原生JS实现canvas移动端电子签名板/画板
- php speex转码为mp3,ffmpeg speex转换为mp3或者aac
- 微信公众号还适合投资和创业吗?
- win7 mysql 管理员权限_win7 管理员权限
- 区块链黑暗森林自救手册
- 面向ChatGPT编程有多牛逼
- python抓取微信文件_python 如何爬取微信公众号里的图片?
- reac antd 删除列表
- hdu 1001 Sum Problem
- mysql经常断电_MySQL突然断电异常解决