最近也是需要用到uniapp写APP,遇上的第一个难题便是调试问题,在网上搜罗很久也是始终找不到比较好的办法,要不是文章太旧,要不是试过不行。本篇文章也算是寻找解决方案之后的总结。

背景

写习惯web项目、H5项目、还是说小程序的朋友,都清楚各类的调试方式。F12检查,微信开发者工具的操作台等,都有现成好用的调试办法。但是在uniapp转译app后调试则变得十分困难,对于app中使用到的nvue文件对css样式有特殊要求,调试更是显得重中之重。

现阶段使用的调试方式

我们都知道跑项目,编译app后需要一个app基座,这个app基座可以是真机,也可以是模拟器,就像你的web、H5项目跑在浏览器一样。坑放到最后面说。

模拟器

我自己使用的是网易的mumu模拟器12。
HBuilderX版本是3.8.7。
下载模拟器后打开,点击模拟器右上角三条横线的图标,将模拟器设置成竖屏手机,尺寸自己选。
请添加图片描述
保存设置,等待模拟器重启。重启后到模拟器中的 设置 ➡ 关于手机 ➡ 连点版本号进入开发者模式。(注意这个设置是手机模拟器的 “齿轮” 图标,不是右上角mumu模拟器的整体设置)。

打开HbuilderX,打开项目,点击顶部工具栏 运行 ➡ 运行到手机或模拟器 ➡ ADB路径设置,进入到Settings.json,配置adb路径和模拟器端口。
mumu模拟器对应端口就是 7555,其他模拟器端口可以去uniapp官方看,模拟器的端口也可修改,具体可以查阅一下其他文章。
adb路径就需要看你自己 HbuilderX 的安装位置,到adb.exe所在目录。


adb.exe先前位置在 \plugins\launcher\tools\adbs
后来在\plugins\launcher-tools\adbs(不知道什么时候变的)

请添加图片描述
设置好将模拟器和HBuilderX都重启。

PS::ADB是Andorid调试桥,在HBuilderX中下载真机运行插件(运行 ➡ 运行到手机或模拟器 ➡ 下载真机运行插件)会帮你装上,并配置环境变量path,十分重要。

ctrl + R回车输入cmd打开命令行,可以先输入adb确定一下adb是否在环境变量中,得到输出各种adb命令的介绍说明adb已经在环境变量中了,不需要自己加。输入adb connect 127.0.0.1:7555,将HBuilderX和模拟器连接起来,下面是连接成功的输出。
请添加图片描述
这时到HBuilderX工具栏 运行 ➡ 运行到手机或模拟器 ➡ 运行到Android app基座,刷新,可以看到 ⬇
请添加图片描述
点击运行就可以将项目跑到模拟器中了。
项目跑起来后,点击操作台右上角工具栏最左边的昆虫图标,就可以进入调试了,不过这东西…,坑有点多(最后说),但目前来说是比较好的解决办法了。
请添加图片描述
请添加图片描述

真机

使用真机其实就是将app基座换成你的手机,调试工具还是上面介绍的调试方式。
步骤:

  1. 电脑手机连上数据线
  2. 手机 设置 ➡ 关于手机 ➡ 连点系统版本号进入开发者模式
  3. 回到设置,找到开发人员选项,我的手机在系统更新里面,不同手机位置可能不同 ➡ 开启USB调试 ➡ 连接USB配置改为多媒体传输(MTP)
  4. 电脑 ctrl + R回车打开命令行,输入adb start-server开启adb服务
  5. HBuilderX 运行 ➡ 运行到手机或模拟器 ➡ 运行到Android app基座,刷新,可以看到一个字母 + 数字的基座ID可以选择(我看到的是字母 + 数字),选中运行即可运行在真机。

坑要另开一个小节聊聊,可见无论是从连接还是调试上,折磨的地方还是比较多的。

连接方面

就拿模拟器调试来说,在输入命令adb connect 127.0.0.1:7555建立连接后,关闭模拟器或关闭HBuilderX
HBuilderX就找不到app基座了,尽管adb服务还在进程当中。也就是说,你每次断网,开关IDE,模拟器,电脑,都需要重新建立连接,adb进程开启中,还不能直接adb connect会提示adb运行中,需要先结束进程,再开启。下面是断网,断开连接的报错。
请添加图片描述
这里给几条常用的命令 ⬇

HBuilderX 连接 MuMu模拟器 ➡ adb connect 127.0.0.1:7555
查看adb端口进程(adb默认端口5037)➡ netstat -ano | findstr "5037"
根据PID结束进程,按上一个命令找到的PID结束adb进程 ➡ taskkill -PID PID号 -F

调试方面


上面介绍的调试方式已经是官方推荐的了。这种调试方式只能调试nvue页面或组件,在调试界面选中vue组件,模拟器里面的程序会闪退。


只能调试一些主要页面,举个例子,某个页面有个按钮,点击出现弹窗,这个弹窗你是调试不了的,只能调试主要页面原有的东西。

文章有问题之处还望评论斧正!

Logo

前往低代码交流专区

更多推荐