移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)

开发工具
HBuilder X 3.8.12.20230817

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第1张图片

注意:开发工具尽量用最新的或较新的。太旧的版本在开发调试过程中可能会出现莫名其妙的问题。
 



1、手机连接到电脑


准备好一台手机,并使用数据线连接至电脑
在手机中弹出来的USB连接选项中,默认是 “仅充电”,这里选择 “传输文件/Andrioid Auto” ,(不选的话后面的操作中开发工具无法检测或识别设备)

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第2张图片

2、手机开启开发者模式
我的手机是 OPPO FIND X6 , 下面图片是我的手机截屏。其他品牌手机打开开发者模式类似的操作

打开手机设置,找到关于手机选项并打开:

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第3张图片

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第4张图片

找到 版本信息 选项并打开,注意不是 Android 版本 选项

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第5张图片

找到 版本号 选项,连续点击此选项,手机会提示需要再执行 几 步操作即可进行开发者模式。

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第6张图片

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第7张图片

验证已打开开发者模式,在 设置 界面,找到 其他设置 选项并打开

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第8张图片

在其他设置界面,往上滚动屏幕,可以看到多出一项  “开发者选项” ,打开 “开发者选项”
移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第9张图片

在开发者选项界面,可以看到,开发者选项 、USB调试按钮已经打开,这样就可以用手机进行调试程序了

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第10张图片

3、运行开发工具HbuilderX,并使用将APP运行到手机

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第11张图片

项目运行到手机步骤:
找到菜单栏依次打开 运行 》运行到手机或模拟器
移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第12张图片

根据提示,我们先选择项目,在运行到手机试试:
移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第13张图片

选择 “运行到手机或模拟器” ,可以看到设备列表,如果没有显示则需要检测步骤1、2 或者 点击刷新按钮
移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第14张图片

为了测试效果,此时我将手机数据线的type-C口或USB重新连接后,手机会出现USB调试请求,点击允许后,在开发工具中刷新可以看到设备
移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第15张图片

此时电脑端开发工具刷新,可以看到设备了

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第16张图片

点击 运行 按钮,观察开发工具及手机端
开发工具控制台会提示正在连接手机,并安装手机运行环境,此时手机端会由APP安装的操作:
移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第17张图片

手机端:完成APP的安装,手机桌面可以看到APP图标,并成功运行

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第18张图片

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第19张图片

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第20张图片

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第21张图片

返回到电脑开发环境,查看运行日志:

移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第22张图片

4、相关问题

APP图标及应用名称:
因为是调试模式,所以HbuilderX工具安装到手机的图标和应用是默认的,这个没关系的。真正打包APP后,会跟你代码设置的APP图标及应用名一样。

开发工具检测不到手机(设备列表无法显示):
原因:手机开发者模式未开启(见本文操作步骤1和2),手机未允许USB调试 导致开发工具检测不到,(见下图)
还有一种方式,重启开发者工具或者重连手机

 
移动端开发框架mui代码在手机(真机)上运行(HbuilderX连接到手机)_第23张图片

你可能感兴趣的:(移动端开发,前端)