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

开发工具
HBuilder X 3.8.12.20230817



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



1、手机连接到电脑


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

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

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

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

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

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

在其他设置界面,往上滚动屏幕,可以看到多出一项  “开发者选项” ,打开 “开发者选项”

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

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

项目运行到手机步骤:
找到菜单栏依次打开 运行 》运行到手机或模拟器

根据提示,我们先选择项目,在运行到手机试试:

选择 “运行到手机或模拟器” ,可以看到设备列表,如果没有显示则需要检测步骤1、2 或者 点击刷新按钮

为了测试效果,此时我将手机数据线的type-C口或USB重新连接后,手机会出现USB调试请求,点击允许后,在开发工具中刷新可以看到设备

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

点击 运行 按钮,观察开发工具及手机端
开发工具控制台会提示正在连接手机,并安装手机运行环境,此时手机端会由APP安装的操作:

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

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

4、相关问题

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

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

 

最近更新

  1. TCP协议是安全的吗?

    2023-12-31 15:20:02       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-31 15:20:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-31 15:20:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-31 15:20:02       18 阅读

热门阅读

  1. K8S kubectl 自动补全命令

    2023-12-31 15:20:02       36 阅读
  2. 串口通信技术及其应用

    2023-12-31 15:20:02       36 阅读
  3. 【WPF.NET开发】弱事件模式

    2023-12-31 15:20:02       38 阅读
  4. 数组的基本算法

    2023-12-31 15:20:02       33 阅读
  5. GitHub Copilot 快速入门指南

    2023-12-31 15:20:02       46 阅读
  6. 使用SpringCache缓存数据

    2023-12-31 15:20:02       39 阅读
  7. LeetCode 1614:括号的最大嵌套深度

    2023-12-31 15:20:02       30 阅读
  8. 算法基础之最短Hamilton路径

    2023-12-31 15:20:02       42 阅读
  9. Linux文件和目录管理命令---- cat 命令

    2023-12-31 15:20:02       37 阅读
  10. 手机号码校验工具类(正则表达式)

    2023-12-31 15:20:02       35 阅读