DTok/相关资料/vue-autojs

VUE & AUTOJS (PS. 像开发 Vue 前端一样开发 autoJS ! )

前端人 0 分钟上手!

用 Vue 控制手机上的 APP!

真正做到实时热更新脚本!!!

使用 vue3 vue_cli vant 作为 autojs 的界面，可以互相通讯。

vant 文档, autoX 文档

当然也可以用 react(Vue3 真香) 之类的前端框架

项目运行视频

【Vue-autojs 基于 vue cli 的自动化 App 脚本框架, 前端人有手就会!-哔哩哔哩】

适用范围

auto.js 都能用 (包括 autoX 等等)

用到的工具

autox.js app 6.3.4 下载(其他版本不保证正常)

autox.js app 投屏工具

VSCode, 搜索 autox 插件安装

autox.js 项目地址

开发 (前端 Vue 人直接上手, 老手直接跳转第五步, 嘿嘿嘿. PS: 请安装稳定版 nodejs(版本16))

一. npm install，

二. npm run serve，

三.在 VSCode 中 打开根目录 autoWebview.js 修改 initUi('http://192.168.31.201:5666/#/') vue cli 运行的局域网地址

四.按下核弹按钮 F5 BOOM(确认vscode autox插件已开启服务,并且手机autox已链接)

打包(使用服务器版)

PS. 更新脚本不用重新打包按装app(真香警告!)

一. npm run build 建议直接放到服务器

二. 打开 autoWebview.js 文件, initUi('http://192.168.31.201:5666/#/') 改为服务器静态文件地址 按 Ctrl + Shift + P， 选择 保存到指定设备(Save On Device) 命令， autojs 打包 App 安装, 大功告成!

打包(无服务器版)

一. npm run build 完成会有 dist 文件夹 > 右键 dist 保存到设备(autox 先开启服务,手机 app 链接服务)

二. 来到手机 autoxjs APP 打包 App 安装, 大功告成!

灵感来源

此项目灵感来源于 autojs_web 项目 和 robot 项目{由于它远程打包服务欠费一直打包失败(本人找了了一天原因:吐血),过了几天才恢复打包,所以就有了本项目(花了几天时间)}

未来

脚本加密

截图

联系方式

QQ : 451652176 ( 欢迎骚扰. 接定制. 问题咨询 )

QQ 群 : 314707476 (进来就是沙发)

支持作者

如果这个开源项目 可以帮助到你, 你也可以请作者吃一包辣条。(开源不易, 肝了一晚上, 头顶有点凉, 众筹植发!)

src
├─ assets
│  ├─ img
│  │  └─ gray-float.png
│  └─ style
│     ├─ global.styl
│     ├─ reset.styl
│     └─ var.styl
├─ auto                   脚本文件夹
│  ├─ global              脚本全局方法  命名一定要robot.xxx.js  !
│  │  ├─ robot.global.js
│  │  └─ robot.menu.js
│  ├─ robot               脚本文件 命名一定要robot.xxx.js  !
│  │  ├─ robot.douyin.js
│  │  └─ robot.weixin.js
│  ├─ JSSDK.js            前端调用脚本SDK入口文件(相当于wxjssdk) window.auto 方法在此
│  └─ tsconfig.json       代码提示
├─ views                  Vue 不解释
│  ├─ Douyin.vue
│  ├─ Home.vue
│  ├─ TabRouteView.vue
│  ├─ User.vue             window.auto 使用方式
│  └─ Weixin.vue
├─ App.vue
├─ flexable.js
├─ main.js
├─ router.js
└─ store.js

---

开发技巧: (互相调用的方法直接挂在window/global)

一: autojs => web

1. autojs修改web数据
// robot.global.js => global.jsVal:  autojs 中修改web/vue 中 数据(web一般将变量挂到window, 推荐直接修改vue $store, 数据相应改变视图)
jsVal('$store.count', ++idx)
jsVal('$store.log', ['asda', 'adasd']) // 支持array
jsVal('$store.auth', { id: 'asdasdgfhgf45646asda4545s' }) // 支持object

2. autojs调用web 方法
// robot.global.js => global.jcCall:
jsCall('console.log(1232)')


二: web => autojs

3. web 调用 autojs 文件模块 @/auto/robot/robot.weixin.js
// Weixin.vue
auto.invoke(
  'runRobotNow',
  [{ robot: require('@/auto/robot/robot.weixin'), ...this.model }],
  () => {
    // log('ajFun1 回调:', typeof r, r)
  },
)

4. web 调用 autojs 方法 // User.vue
// 调用方法
window.auto.invoke('showLog')
auto.invoke('toastLog', '调autojs方法 成功')
// 执行代码
window.auto.execAjCode('toastLog("执行autojs代码 成功")')