Uniapp —— app编译调试
uniapp中的app调试,写习惯`web`项目、`H5`项目、还是说小程序朋友,都清楚各类的调试方式。`F12`检查,微信开发者工具的操作台等,都有现成好用的调试办法。但是在`uniapp`转译`app`后调试则变得十分困难,对于`app`中使用到的`nvue`文件对`css`样式有特殊要求,调试更是显得重中之重。
最近也是需要用到
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基座换成你的手机,调试工具还是上面介绍的调试方式。
步骤:
- 电脑手机连上数据线
- 手机 设置 ➡ 关于手机 ➡ 连点系统版本号进入开发者模式
- 回到设置,找到开发人员选项,我的手机在系统更新里面,不同手机位置可能不同 ➡ 开启USB调试 ➡ 连接USB配置改为多媒体传输(MTP)
- 电脑
ctrl + R
回车打开命令行,输入adb start-server
开启adb
服务 - 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
组件,模拟器里面的程序会闪退。
二
只能调试一些主要页面,举个例子,某个页面有个按钮,点击出现弹窗,这个弹窗你是调试不了的,只能调试主要页面原有的东西。
文章有问题之处还望评论斧正!
更多推荐
所有评论(0)