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

最新推荐文章于 2023-08-04 10:24:15 发布

忍者1

最新推荐文章于 2023-08-04 10:24:15 发布

阅读量136

点赞数

分类专栏：前端高级文章标签： node

原文链接：http://www.mark-to-win.com/tutorial/50808.html

版权

Electron 翻译应用项目初始化 package.json 百度翻译API

关键词由CSDN通过智能技术生成

前端高级专栏收录该内容

157 篇文章 0 订阅

订阅专栏

在这里插入图片描述

初始化项目

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>

忍者1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（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”}}安.
复制链接

扫一扫

专栏目录