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存储数据

posted @ 2024-08-06 13:20  多见多闻  阅读(4)  评论(0编辑  收藏  举报