初始化项目

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打造一个桌面应用翻译小工具的更多相关文章

  1. 基于百度通用翻译API的一个翻译小工具

    前几天写了一个简单的翻译小工具,是基于有道翻译的,不过那个翻译接口有访问限制,超过一定次数后会提示访问过于频繁,偶然发现百度翻译API如果月翻译字符少于200万是不收取费用的,所以就注册了一个百度开发 ...

  2. Windows 桌面边栏小工具开发入门

          准备为网站做一个桌面通知功能的工具,现在网上一般是html5+js的比较多.虽然html5+js现在是web的开发主流,但是我们应用一般是windows系统.并且应使用中,需要打开谷歌或其 ...

  3. 开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码

    开源一个Mac漂亮的小工具 PPRows for Mac, 在Mac上优雅的计算你写了多少行代码. 开源地址: https://github.com/jkpang/PPRows

  4. 用 C# 写一个 Redis 数据同步小工具

    用 C# 写一个 Redis 数据同步小工具 Intro 为了实现 redis 的数据迁移而写的一个小工具,将一个实例中的 redis 数据同步到另外一个实例中.(原本打算找一个已有的工具去做,找了一 ...

  5. 用 pyqt4 编写的一个翻译小工具

    有时候我们在开发时遇到一些陌生的英文单词或者不容易看出某些长句的中文意思时该怎么办呢?打开桌面上的翻译软件?打开浏览器里收藏着的翻译网址或者直接贴上百度的搜索框去查?这些方法固然可以,还很常见,但如果 ...

  6. 自己动手写一个U盘拷贝小工具

    这是五一期间,参照知乎上一篇的文章<十行代码--用python写一个USB病毒>写成的,最初只是单纯的想写成死循环,直到文件占满硬盘为止,第一个遇到的问题是,拷贝到硬盘之后,由于要无限次拷 ...

  7. 腾讯的一个移动端测试小工具GT

    上周末参加了Ministar北京的测试聚会.腾讯的MIG专项测试组的组长给大家介绍了他们最近开发出来的手机测试工具GT. 下面是GT的官方说明: GT(随身调)是APP的随身调测平台,它是直接运行在手 ...

  8. 调用百度API写了一个js翻译小工具

    目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了.效果如图: html: <!DOCTYPE html> <html lang="en"&g ...

  9. 一个sql盲注小工具 (Golang版)

    并发,二分法判断. 源码写的有点垃圾,有点乱,结果也存在一些缺失. 记录: sql:select distinct 中的distinct选项,这是只会获取你表中不重复数据,是表中,而不是你一次sql执 ...

随机推荐

  1. CentOS下Apache Doris Oracle ODBC外表使用指南

    1.软件环境 操作系统:CentOS 7.8 Apache Doris :0.15 Postgresql数据库:oracle 19c UnixODBC:2.3.1 Oracle ODBC :insta ...

  2. .NET性能优化-你应该为集合类型设置初始大小

    前言 计划开一个新的系列,来讲一讲在工作中经常用到的性能优化手段.思路和如何发现性能瓶颈,后续有时间的话应该会整理一系列的博文出来. 今天要谈的一个性能优化的Tips是一个老生常谈的点,但是也是很多人 ...

  3. 微信小程序订阅消息

    概述 消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验. 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅 订阅消息卡片跳转能力:点击查看详情 ...

  4. C#语法糖系列 —— 第三篇：聊聊闭包的底层玩法

    有朋友好奇为什么将 闭包 归于语法糖,这里简单声明下,C# 中的所有闭包最终都会归结于 类 和 方法,为什么这么说,因为 C# 的基因就已经决定了,如果大家了解 CLR 的话应该知道, C#中的类最终 ...

  5. [题解] 春荔(cut) | 贪心

    题目大意 有一个长度为 \(n\) 的非负整数序列 \(a_i\),每次可以选择一段区间减去 \(1\),要求选择的区间长度 \(\in[l,r]\),问最少多少次把每个位置减成 \(0\). 不保证 ...

  6. 10个最危险的Linux命令，希望你牢记在心

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 来源:Linux迷链接:https://www.linu ...

  7. IP地址的格式和分类，你都清楚吗？

    一个执着于技术的公众号 在网际层中,利用 IP 地址将数据传输到目的地.为了能够使数据正确地发送到目标主机上,网络上的 IP 地址必须有一定的规则来识别主机的位置. IP地址的基本构成 为了便于寻址, ...

  8. Keepalived入门学习

    一个执着于技术的公众号 Keepalived简介 Keepalived 是使用C语言编写的路由热备软件,该项目软件起初是专门为LVS负载均衡设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后 ...

  9. vue - Vue脚手架

    今天的内容vue脚手架,越来越有内味了,也慢慢地开始有点难度了哈哈,但是没有关系,慢慢学慢慢琢磨,我倒是感觉有点越来越像node了,不知道怎么回事,这是要向后端发展的节奏啊 一.初始化Vue脚手架 1 ...

  10. 【拖拽可视化大屏】全流程讲解用python的pyecharts库实现拖拽可视化大屏的背后原理，简单粗暴！

    "整篇文章较长,干货很多!建议收藏后,分章节阅读." 一.设计方案 整体设计方案思维导图: 整篇文章,也将按照这个结构来讲解. 若有重点关注部分,可点击章节目录直接跳转! 二.项目 ...