utool开发记录
一、懵圈状态
查看官方文档,cnblog,csdn博客,初步知道需要vue知识、nodejs知识
方向1:寻找攻略
方向2:是否要先去学nodejs和vue
总结:Utools是用 Electron 开发的,是偏前端的,这个工具的主程开发一定是一位前端开发工程师,做过前端的的同学肯定一眼就能看出 Utools 里面的 Select 和 Input 等控价都是阿里的 Ant Design。
二、继续调查研究
https://juejin.cn/post/7169020147590496292
查看代码
// 模拟键盘敲击 Enter
utools.simulateKeyboardTap('enter')
// windows linux 模拟粘贴
utools.simulateKeyboardTap('v', 'ctrl')
// macos 模拟粘贴
utools.simulateKeyboardTap('v', 'command')
// 模拟 Ctrl + Alt + A
utools.simulateKeyboardTap('a', 'ctrl', 'alt')
//模拟鼠标移动
utools.simulateMouseMove(100,100)
//模拟鼠标左击
utools.simulateMouseClick(100,100)
//模拟鼠标右击
utools.simulateMouseRightClick(100,100)
//模拟鼠标双击
utools.simulateMouseDoubleClick(100,100)
//获取屏幕鼠标位置
const point = utools.getCursorScreenPoint()
console.log(point.x, point.y)
// 复制单个文件
utools.copyFile('/path/to/file')
// 复制多个文件
utools.copyFile(['/path/to/file1', '/path/to/file2'])
// 路径
utools.copyImage('/path/to/img.png')
// base64
utools.copyImage('data:image/png;base64,xxxxxxxxx')
//复制文本
utools.copyText('Hi, uTools')
//获取复制的文件或文件夹
utools.getCopyedFiles()
window.screenCapture = function () {
utools.screenCapture(base64Str => {
utools.redirect('识别图片中文字', { type: 'img', data: base64Str })
})
}
window.screenColorPic = function () {
utools.screenColorPick(({ hex, rgb }) => {
console.log(hex) // #FFFFFF
console.log(rgb) // RGB(0, 0, 0)
})
}
window.api = {
screenCapture,screenColorPic
}
utools.onPluginEnter(({ code, type, payload }) => {
console.log('用户进入插件应用', code, type, payload)
})
utools.onPluginOut((processExit) => {
if (processExit) {
console.log('插件应用完全退出')
} else {
console.log('插件应用隐藏后台')
}
})
utools.onPluginDetach(() => {
console.log('插件应用已作为系统窗口使用')
})
发现一些utools的Api和prload.js的用法
方向1:找到utools的api文档
方向2:找出如何设计界面,界面数据如何保存
总结:有进步,但不大
三、重新认识官方文档
1、发现数据存储方案:https://u.tools/docs/developer/db.html
2、重新认识utools api
总结:大概了解了Utools项目的结构
四、尝试小项目练手
目标1:运行helloworld,完成
目标2:构建数据库小程序
目标3:构建带界面的数据库小程序
目标4:构建服务器+Utools界面数据库小程序
目标5:丰富小功能
目标6:调试运行
1、在github下载https://github.com/uTools-Labs/utools-tutorials
2、在Utools开发工具中新建项目
3、更换不同项目的plugin.json,体验案例
4、https://www.bilibili.com/video/BV1WM4y1u7gS/?vd_source=a42c58821b4c9fbd9c9f11169104a0c3
五:重新认识Vue+Node.js
在前端,这似乎是一个非常活跃的领域,特别是还有个将网站本地化的Electron
Electron 相当于一个浏览器的外壳 , 我们将 编写的 HTML , CSS , Javascript 网页程序 嵌入进 Electron 里面。以便于在桌面上进行运行。 通俗来讲它就是一个软件 , 如 QQ 、网易云音乐、优酷视频 等等。功能至强大,超乎你的想象。
参考:https://segmentfault.com/a/1190000040326098
六、重选技术路线
前端可用的框架众多,最多的使用vue.js开发的组件库,放弃vue+vite+electron+utools.api,原因是布局复杂,理由是为了适应跨平台等进行的技术修改
尝试bootstrap+js等,最终确定方向为可实现高级功能、方便高效的技术路线。
总结:界面设计的问题,可由现成的组件库解决
七、标定数据存储和付费登录事宜
1、初步判定使用utools的数据存储方案、SQlite两个方向
2、初步定位微信登录等
总结,使用utools.db.put和utools.dbstorge存储数据