【新手开发必看】使用VScode+uiautomatorviewer玩转AutoJS脚本编写
管理员

此篇帖子主要是帮助一些新手快速上手autojs脚本开发,放弃手机中的编辑器,和UI控件检查工具.当然并不是让你完全的放弃手机端的UI查看工具,因为在某些情况下,PC端的uiautomatorviewer是无法查看到手机页面上的控件,这时候还是需要借助AutoJS本身自带的UI查看工具.

首先需要准备以下几个软件:
  我自己的电脑是64位系统,对应的软件,我已经准备好.

0_1515679863185_tools.png

1️⃣>>查看自己系统的具体位数!(比较简单,但还是说一下吧)

  1.首先右键"我的电脑"点击属性按钮;

0_1515679624749_1.png

  2.在弹出的页面中查看此位置,如图:

0_1515679674859_系统位数查询.png

2️⃣>>查看到自己的系统位数后,去下载对应的JDK,和SDKTools还有VScode

  下面开始安装JDK. 双击"jdk-8u151-windows-x64.exe"

0_1515680135692_jdk1.png

  点击下一步. 此处我们修改一下安装路径.注意记住自己安装的路径,后面会用到.

0_1515680300045_jdk2.png

  好的,我选在安装在"D:\JAVA\jdk1.8.0_151"下面

0_1515680486926_jdk3.png

  OK,我们继续下一步...这一步就是安装jdk了

0_1515680779505_jdk4.png

  注意安装过程中会让我们安装jre,我们还是选择跟jdk安装在一起.修改好路径后点击下一步.

0_1515680943173_jdk5.png

  正在安装jre.

0_1515681003775_jdk6.png

  jre安装完成以后,我们的JDK就算安装完成了. 点击关闭即可.

0_1515681065016_jdk7.png

接下来将我们下载并解压好的SDK tools移动到"D:\JAVA"中,此时的目录中是这样的:

0_1515681220480_jdk8.png

好的,下面开始配置JAVA环境,JAVA环境的配置很重要,切记不要配置错误

  首先我们打开环境变量设置:右键我的电脑-->点击属性-->点击高级系统设置--点击环境变量. 好的具体的操作步骤如图:

0_1515681869681_jt1.png

0_1515681908500_jt2.png

0_1515681934375_jt3.png

  打开环境变量设置后点击 系统变量下面的 新建按钮

0_1515682077776_jt4.png

  在新建系统变量对话框中,设置 变量名为:JAVA_HOME 变量值为:D:\JAVA\jdk1.8.0_151 这个路径就是我们安装jdk时的路径. 填写好以后点击确定.

0_1515682230982_jt5.png

  继续添加环境变量,现在要在Path变量中添加我们的JAVA环境目录.双击Path变量或者选中Path变量,点击编辑按钮.

0_1515682377036_jt.png

  在编辑系统变量对话框中,编辑变量值.注意!!! 不要修改变量名.

0_1515682510227_jt7.png

  在对话框的末尾添加以下字段: %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; [注意:如果原来变量值的末尾没有';'号,务必先在末尾添加一个';'(分号,无引号),路径与路径之间应以分号';'隔开,如果是win10的话,则无需这么麻烦,直接新建一行即可.]

0_1515683041324_jt8.png

  点击确定后,再次点击系统变量中的 新建 按钮.变量名填写:CLASSPATH 变量值填写:
.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
注意开头有个点 分号 确认填写无误之后,点击确定.

0_1515683256592_jt9.png

  下面是最后一步,配置adb的环境变量.将下载的platform-tools解压后放到"D:\JAVA\"中.返回环境变量设置,继续在Path变量值的末尾添加adb.exe的所在路径.如图:

0_1515686194880_jt12.png

到此,我们的JAVA环境配置完成.可以验证一下配置结果:点击开始按钮-->点击运行 或者使用快捷键,win + R,输入cmd打开命令行,在命令行中输入 : echo %path% 回车检查回显内容是否有我们刚才配置的D:\JAVA\开头的路径.如果没有,那么我们需要重启电脑以使配置生效.

0_1515683814097_jt10.png

好的经过检查发现,刚才配置的环境变量都已经生效.

  接下来安装调试uiautomatorviewer,使用此工具,我们需要adb工具来配合.因为本人使用的是win7虚拟机来配置的这个环境,执行到此发现电脑连接手机后虚拟机无法通过adb连接到手机...尴尬,那就使用mac的环境来继续演示,请放心,以上都配置好以后,将手机的adb调试模式打开,均可正常连接.若不知道怎么打开自己手机的【开发者选项】那么请你根据自己手机的具体型号,去百度一下,怎么开启手机的 开发者模式.

**  手机打开USB调试模式以后,通过USB线连接到手机,此时在命令行中执行:adb devices 会显示已连接的设备.---下图是mac中的显示,windows中显示的是一样的.

0_1515686647504_jt13.png

此时我们双击运行"D:\JAVA\SDK_tools\bin\uiautomatorviewer.bat",桌面会弹出黑框,并随后打开一个界面.如图:

0_1515686866487_jt14.png

0_1515686916018_jt15.png

在弹出的界面点击 红色箭头所指的按钮.此时便会获取当前手机屏幕的UI界面:
---下图使用的也是mac版的,windows中显示是一样的.
0_1515687033079_jt16.png

比如我们要查看QQ消息页面的UI布局,效果如下:

0_1515687209079_jt17.png

红框标记的地方既是该控件的信息.右上方方框,显示的是UI布局层次

最后来配置一下VScode

  下载好VScode后,安装,win下安装软件就不讲了吧...你喜欢安装在哪就安装在哪...安装时注意这里,最好是全部勾上.

0_1515687444711_jt18.png

安装好以后,启动VScode程序,点击此处:

0_1515687687479_jt19.png

在搜索栏中搜索 Auto.js-VSCodeExt

0_1515687794148_jt20.png

因为我已经安装过 vscode的 Autojs插件,所以此处显示的是一个小齿轮图标.若没有安装插件,会显示 安装 字样,点击安装 稍等片刻后 会提示你 重新加载, 点击重新加载,这样VScode的AutoJS插件就安装好了.右侧显示了插件的使用方法.

0_1515688022958_jt21.png

Show log from Auto.js on Console.(Press Ctrl+Shift+Y to open console)
显示Auto.js控制台的log信息(按 Ctrl+Shift+Y 打开VScode的控制台);

Press Ctrl+Shift+P and enter Auto.js you can see several commands:
按Ctrl+Shift+P 然后输入Auto.js 你可以看到一些命令;

0_1515688389552_jt22.png

一般常用的命令就是: Start Server/开启服务,Run/运行脚本, Save/保存到设备,Stop/停止运行脚本 命令后面显示的有快捷键,很方便!

首先启动 服务 选择 Start Server,然后在手机上启动autojs APP 点击链接电脑,在弹出的对话框中输入,你电脑的IP地址,点击确定.在vscode中会有提示.

0_1515688884578_jt23.png

如何查看IP地址? 看图吧!看不懂,那只能百度了

0_1515688700134_jt22.png

如图所示,我当前联网的网卡名称为 本地链接, 在命令行中输入 ipconfig 回车,然后查看 本地链接的IPV4信息,图中所示的 192.168.10.215 便是我电脑的IP地址.

好的!现在就可以在VScode中编写代码,用uiautomatorviewer查看UI布局了,是不是美滋滋!如果你在配置过程中遇到了什么不懂的问题,可以在下方回帖留言,我看到就会回复...

######################################################################

UIautomatorviewer 启动报错解决:
替代文字
如上图所示,如果报此错误,是因为 uiautomatorviewer.bat文件的最后一行中:
方法一:
-Dcom.android.uiautomator.bindir= 后面应该改成platform-tools目录的路径如图所示:
0_1517503901811_WX20180202-005013.png
这个是我自己的platform-tools的路径,请修改成你自己的

方法二:
如果方法一不行,请尝试此方法.
将adb.exe AdbWinApi.dll AdbWinUsbApi.dll 移动到 uiautomatorviewer.bat 所在目录目录
0_1518433772652_QQ截图20180212190753.png

UIautomatorviewer.bat去除黑框

https://share.weiyun.com/5BgXgfH

使用方法:

    将这个UI查看工具.exe放到uiautomatorviewer.bat所在的目录下,然后创建一个快捷方式到桌面,双击运行,就不会出现那个黑色窗口了

0_1522727449862_QQ截图20180403115028.png

最后由 DcrClub 编辑

adb connect ip
adb device
不用数据线了, 直接连。
用androidstudio自带的ddms查看就行了。

不过我还是想问一下,似乎VScode将代码推送到设备的命令无效,教我一下。
还有就是VScode如何将autojs所有的函数都可以智能提示,而不局限于已经用过的函数。
原来的那个只要将函数复制一下就有智能提示了。

管理员

@卢某某 代码提示需要插件的,但是现在没有针对autojs的代码提醒插件,关于无法保存到手机,这个原因我就不知道了,因为我也没用过无线adb。

看着好复杂但操作还是很简单

管理员

@jiaqing 步骤细化了~看着多,操作起来并不难

[0_1517080920965_跳一跳*千寻v2.js](正在上传 100%)

@dcrclub !(0_1517376841064_1.JPG
其他都正常,uiautomatorviewer连不上,我的是win10.不知道那错了。下载的是jdk1.8.0_162

最后由 唯心所现 编辑
管理员

@唯心所现 这个是因为你 UIAutoMatorViewer.bat最后一行的配置有问题,有一个地方要修改一下路径

管理员

@唯心所现 解决方法已经在帖子尾部贴出了~

@dcrclub【新手开发必看】使用VScode+uiautomatorviewer玩转AutoJS脚本编写 中说:

按Ctrl+Shift+P 然后输入Auto.js 你可以看到一些命令;

按Ctrl+Shift+P 然后输入>Auto.js 你可以看到一些命令;
这个让我迷糊了一下😂 ,然后Windows用VSC时好像还要安装一个Git。我就随便一路Next了😂
Git

最后由 二次蓝 编辑
此回复已被删除!

我要肛你py一下。

Java的环境变量之前配置过,配置玩platform后,以管理员身份打开uiautomatorviewer.bat后出现黑色弹框,一秒后消失,并没有一个白色弹框。不知道是什么原因。
用cmd输入ipconfig显示不是外部或内部命令。用其他方法查到ip后输入,auto.js链接电脑的时候一直链接超时.
管理员

@qcuncle

打开回显
@echo on
并使用 pause 分段执行,查看是什么报错

用cmd运行uiautomatorviewer.bat报错 不知道怎么解决了,请教大神看看

C:\Program Files\Java\SDK_tools\bin>uiautomatorviewer.bat
SWT folder '..\lib\location of your Java installation.' does not exist.
Please set ANDROID_SWT to point to the folder containing swt.jar for your platform.

手机连不上电脑啊,报这个错误什么情况?
替代文字

@endlessjy【新手开发必看】使用VScode+uiautomatorviewer玩转AutoJS脚本编写 中说:

手机连不上电脑啊,报这个错误什么情况?
Auto. js: failed to connect to/192.168.3.11 (port 1209) from/:: (port 45615): connect failed: ECONNREFUSED (Connection refused)

  • 54
    帖子
  • 15311
    浏览