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

港控/mmm° 2021-08-30 12:13 273阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]

#### 初始化项目 ####

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` 需要自己去申请。这是网址：[百度翻译编辑平台][Link 1]

**index.html**

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>翻译小工具</title>
      
      <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>
    
    <body>
      <div class="box">
        <input placeholder="请输入要翻译的内容" class="int">
        <select>
          <option value="中译英">中译英</option>
          <option value="英译中">英译中</option>
        </select>
        <button>翻译</button>
        <textarea placeholder="这里是翻译的内容"></textarea>
      </div> 
      <script src="md5.js"></script>
      <script> var btn = document.querySelector("button"); var int = document.querySelector("input"); var te = document.querySelector("textarea"); var myselect=document.querySelector("select"); var textarea = document.querySelector("textarea"); btn.onclick=function(){ english(); } document.onkeyup = function (e) { if (e.keyCode == "13" && int.value != "") { english(); } } function english() { var index=myselect.selectedIndex; var value = myselect.options[index].value; console.log(int.value); if (value === "中译英") { var appid = ''; // 需要自己申请 var key = ''; // 需要自己申请 var salt = (new Date).getTime(); var query = int.value; var str1 = appid + query + salt + key; var sign = MD5(str1); var url = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${ query}&appid=${ appid}&salt=${ salt}&from=zh&to=en&sign=${ sign}`; fetch(url).then(res =>res.json() ).then(response => textarea.value = response.trans_result[0].dst).catch(error => console.error('Error:', error)) } else { var appid = ''; // 需要自己申请 var key = ''; // 需要自己申请 var salt = (new Date).getTime(); var query = int.value; var str1 = appid + query + salt + key; var sign = MD5(str1); var url = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${ query}&appid=${ appid}&salt=${ salt}&from=en&to=zh&sign=${ sign}`; fetch(url).then(res =>res.json() ).then(response => textarea.value = response.trans_result[0].dst).catch(error => console.error('Error:', error)) } } </script>
    </body>
    
    </html>

**main.js**

// main.js
    const {  app, BrowserWindow,Menu } = require('electron')
    
    function createWindow () {    
      // 创建浏览器窗口
      
      Menu.setApplicationMenu(null)
      const win = new BrowserWindow({ 
        width: 800,
        height: 700,
        webPreferences: { 
          nodeIntegration: true
        }
      })
    
      // 并且为你的应用加载index.html
      win.loadFile('index.html')
    
      // 打开开发者工具
      // win.webContents.openDevTools()
    }
    
    // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
    // 部分 API 在 ready 事件触发后才能使用。
    app.whenReady().then(createWindow)
    
    //当所有窗口都被关闭后退出
    app.on('window-all-closed', () => { 
      // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
      // 否则绝大部分应用及其菜单栏会保持激活。
      if (process.platform !== 'darwin') { 
        app.quit()
      }
    })
    
    app.on('activate', () => { 
      // 在macOS上，当单击dock图标并且没有其他窗口打开时，
      // 通常在应用程序中重新创建一个窗口。
      if (BrowserWindow.getAllWindows().length === 0) { 
        createWindow()
      }
    })
    
    // 您可以把应用程序其他的流程写在在此文件中
    // 代码 也可以拆分成几个文件，然后用 require 导入。

#### 引入md5.js ####

#### 引入图标文件 ####

在项目文件夹引入一个ico文件，取名`favicon.ico` ，这样是为了与之前编辑的`package.json`编辑的内容匹配。你也可以改成其他的名字。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]

#### 启动或者打包项目 ####

*  启动项目

npm start

*  打包项目

npm build

--------------------

> 作者：**Vam的金豆之路**
> 
> 主要领域：**前端开发**
> 
> 我的微信：**maomin9761**
> 
> 微信公众号：**前端历劫之路**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2][]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/f107b28929bc433f9365f4d756363b2b.png
[Link 1]: http://api.fanyi.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210813/0b75a7018a0b49778e81d0abd0a606d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210813/6ed476618c98446cafb061ba977394db.png