(win环境)使用Electron打造一个桌面应用翻译小工具

初始化项目
npm init
修改package.json
{
“name”: “trans”,
“version”: “1.0.0”,
“main”: “main.js”,
“license”: “MIT”,
“scripts”: {
“start”: “electron .”,
“build”:“electron-packager . --overwrite --icon=./favicon.ico”
},
“devDependencies”: {
“electron”: “^9.0.5”
}
}
安装electron依赖
因为之前我们在package.json已经编辑过了devDependencies,所以我们直接。
npm install
创建编辑文件
分别创建两个文件index.html和main.js。
appid 与 key 需要自己去申请。这是网址:百度翻译编辑平台
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>翻译小工具</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<style>
input,textarea,select{ border: 1px solid #ccc;border-radius: 4px;font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif; }
input { width: 100%; padding: 10px;box-sizing: border-box; margin: 20px 0;}
textarea { display: block;padding: 10px ; margin-top: 20px; width: 100%; height: 200px; text-align: left; resize: none; box-sizing: border-box; overflow: auto; }
button{ width: 80px; height: 40px;border: none; background: #FFB90F; color: white; font-size: 14px; text-align: center; line-height: 40px; border-radius: 4px; cursor: pointer; margin-bottom:20px; }
button:hover{ filter:brightness(110%); }
button:active{ filter:brightness(60%); }
select{padding: 10px;}
.box { width: 750px; height: 600px; margin: 0 auto; }
</style>
</head>
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119815937
(win环境)使用Electron打造一个桌面应用翻译小工具的更多相关文章
- 基于百度通用翻译API的一个翻译小工具
前几天写了一个简单的翻译小工具,是基于有道翻译的,不过那个翻译接口有访问限制,超过一定次数后会提示访问过于频繁,偶然发现百度翻译API如果月翻译字符少于200万是不收取费用的,所以就注册了一个百度开发 ...
- Windows 桌面边栏小工具开发入门
准备为网站做一个桌面通知功能的工具,现在网上一般是html5+js的比较多.虽然html5+js现在是web的开发主流,但是我们应用一般是windows系统.并且应使用中,需要打开谷歌或其 ...
- 开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码
开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码. 开源地址: https://github.com/jkpang/PPRows
- 用 C# 写一个 Redis 数据同步小工具
用 C# 写一个 Redis 数据同步小工具 Intro 为了实现 redis 的数据迁移而写的一个小工具,将一个实例中的 redis 数据同步到另外一个实例中.(原本打算找一个已有的工具去做,找了一 ...
- 用 pyqt4 编写的一个翻译小工具
有时候我们在开发时遇到一些陌生的英文单词或者不容易看出某些长句的中文意思时该怎么办呢?打开桌面上的翻译软件?打开浏览器里收藏着的翻译网址或者直接贴上百度的搜索框去查?这些方法固然可以,还很常见,但如果 ...
- 自己动手写一个U盘拷贝小工具
这是五一期间,参照知乎上一篇的文章<十行代码--用python写一个USB病毒>写成的,最初只是单纯的想写成死循环,直到文件占满硬盘为止,第一个遇到的问题是,拷贝到硬盘之后,由于要无限次拷 ...
- 腾讯的一个移动端测试小工具GT
上周末参加了Ministar北京的测试聚会.腾讯的MIG专项测试组的组长给大家介绍了他们最近开发出来的手机测试工具GT. 下面是GT的官方说明: GT(随身调)是APP的随身调测平台,它是直接运行在手 ...
- 调用百度API写了一个js翻译小工具
目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了.效果如图: html: <!DOCTYPE html> <html lang="en"&g ...
- 一个sql盲注小工具 (Golang版)
并发,二分法判断. 源码写的有点垃圾,有点乱,结果也存在一些缺失. 记录: sql:select distinct 中的distinct选项,这是只会获取你表中不重复数据,是表中,而不是你一次sql执 ...
随机推荐
- js常用框架原理
(function(){ //存储已经创建的模块 var moduleMap = {}; //判断是否已经加载过 var fileMap = {}; ...
- Java语言学习day13--7月14日
今日内容介绍1.循环练习2.数组方法练习 ###01奇数求和练习 * A: 奇数求和练习 * a: 题目分析 * 为了记录累加和的值,我们需要定义一个存储累加和的变量 * 我们要获取到1-100范围内 ...
- 使用 VS Code 撰写 Markdown 文档
众所周知, VS Code 是微软和社区一起开发的一款很优秀的高级代码编辑器.它不仅可以写出一手好代码,还能写出一篇好文章.利用 Markdown 就可以写出一篇排版美观的技术文章了. 而 Markd ...
- javascript中的Ajax基础(一)
一.手写一个ajax 1 const xhr = new xmlHttpRequest() 2 3 xhr.open(请求方式:post get, 请求地址, 同步或者异步) 4 5 xhr.onre ...
- Go汇编语法和MatrixOne使用介绍
目录 MatrixOne数据库是什么? Go汇编介绍 为什么使用Go汇编? 为什么不用CGO? Go汇编语法特点 操作数顺序 寄存器宽度标识 函数调用约定 对写Go汇编代码有帮助的工具 avo tex ...
- Python学习笔记: 装饰器Decorator
介绍 装饰器是对功能函数的加强. 在原来的功能函数之外,另外定义一个装饰器函数,对原来的功能函数进行封装(wrapper)并在wrapper的过程中增加一些辅助功能. 应用场景 如下场景: 业务函数f ...
- Percona停服俄罗斯
2022年3月9日,MySQL重要分支Percona宣布,他们将停止与俄罗斯和白俄罗斯的组织开展新业务,直至另行通知. Percona为支持员工而采取的一些行动如下: 已经在乌克兰目前安全的部分获得了 ...
- Docker从入门到放弃(1) Docker简介与安装
目录 一.Docker简介 1.Docker是什么: 2.为什么有docke的出现: 3.docker与传统容器的区别: 4.docker基本组成 5.docker工作原理: 二.Docker安装 ...
- js实时查询,为空提示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一、深入学习c++先要练好的内功
掌握进程虚拟地址空间区域的划分 课程讲的内容建立在x86 32位的Linux系统下. 任何的编程语言会产生两种东西:指令和数据.磁盘上的可执行文件在启动时都会加载到内存当中,但是不会加载到物理内存中, ...