（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>