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

马克社区

发布于 2022-06-13 19:15:40

3580

发布于 2022-06-13 19:15:40

文章被收录于专栏：高端IT高端IT

初始化项目

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

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

electron