AI 助理
备案控制台
开发者社区 安全 文章 正文

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

2022-05-05 310
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： （win环境）使用Electron打造一个桌面应用翻译小工具

微信截图_20220505172537.png

初始化项目


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


var MD5 = function (string) {
    function RotateLeft(lValue, iShiftBits) {
        return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
    }
    function AddUnsigned(lX,lY) {
        var lX4,lY4,lX8,lY8,lResult;
        lX8 = (lX & 0x80000000);
        lY8 = (lY & 0x80000000);
        lX4 = (lX & 0x40000000);
        lY4 = (lY & 0x40000000);
        lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
        if (lX4 & lY4) {
            return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
        }
        if (lX4 | lY4) {
            if (lResult & 0x40000000) {
                return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
            } else {
                return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
            }
        } else {
            return (lResult ^ lX8 ^ lY8);
        }
    }
    function F(x,y,z) { return (x & y) | ((~x) & z); }
    function G(x,y,z) { return (x & z) | (y & (~z)); }
    function H(x,y,z) { return (x ^ y ^ z); }
    function I(x,y,z) { return (y ^ (x | (~z))); }
    function FF(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
    function GG(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
    function HH(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
    function II(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
    function ConvertToWordArray(string) {
        var lWordCount;
        var lMessageLength = string.length;
        var lNumberOfWords_temp1=lMessageLength + 8;
        var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
        var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
        var lWordArray=Array(lNumberOfWords-1);
        var lBytePosition = 0;
        var lByteCount = 0;
        while ( lByteCount < lMessageLength ) {
            lWordCount = (lByteCount-(lByteCount % 4))/4;
            lBytePosition = (lByteCount % 4)*8;
            lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
            lByteCount++;
        }
        lWordCount = (lByteCount-(lByteCount % 4))/4;
        lBytePosition = (lByteCount % 4)*8;
        lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
        lWordArray[lNumberOfWords-2] = lMessageLength<<3;
        lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
        return lWordArray;
    };
    function WordToHex(lValue) {
        var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
        for (lCount = 0;lCount<=3;lCount++) {
            lByte = (lValue>>>(lCount*8)) & 255;
            WordToHexValue_temp = "0" + lByte.toString(16);
            WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
        }
        return WordToHexValue;
    };
    function Utf8Encode(string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    };
    var x=Array();
    var k,AA,BB,CC,DD,a,b,c,d;
    var S11=7, S12=12, S13=17, S14=22;
    var S21=5, S22=9 , S23=14, S24=20;
    var S31=4, S32=11, S33=16, S34=23;
    var S41=6, S42=10, S43=15, S44=21;
    string = Utf8Encode(string);
    x = ConvertToWordArray(string);
    a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
    for (k=0;k<x.length;k+=16) {
        AA=a; BB=b; CC=c; DD=d;
        a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
        d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
        c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
        b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
        a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
        d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
        c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
        b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
        a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
        d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
        c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
        b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
        a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
        d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
        c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
        b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
        a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
        d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
        c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
        b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
        a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
        d=GG(d,a,b,c,x[k+10],S22,0x2441453);
        c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
        b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
        a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
        d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
        c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
        b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
        a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
        d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
        c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
        b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
        a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
        d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
        c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
        b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
        a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
        d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
        c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
        b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
        a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
        d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
        c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
        b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
        a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
        d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
        c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
        b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
        a=II(a,b,c,d,x[k+0], S41,0xF4292244);
        d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
        c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
        b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
        a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
        d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
        c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
        b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
        a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
        d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
        c=II(c,d,a,b,x[k+6], S43,0xA3014314);
        b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
        a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
        d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
        c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
        b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
        a=AddUnsigned(a,AA);
        b=AddUnsigned(b,BB);
        c=AddUnsigned(c,CC);
        d=AddUnsigned(d,DD);
    }
    var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);
    return temp.toLowerCase();
}


引入图标文件


在项目文件夹引入一个ico文件，取名favicon.ico ，这样是为了与之前编辑的package.json编辑的内容匹配。你也可以改成其他的名字。


微信截图_20220505172622.png


启动或者打包项目


  • 启动项目


npm start


  • 打包项目


npm build
文章标签：
区块链
关键词：
electron桌面应用
游客ksbqbsfjgo6v6
目录
相关文章
邹荣乐
|
2月前
|
资源调度 运维 JavaScript
使用electron创建桌面应用及常见打包错误解决
使用electron创建桌面应用及常见打包错误解决
邹荣乐
267 3
小王老师呀
|
3月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用：Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架，允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性，实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载，但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
小王老师呀
150 3
九月天空
|
2月前
|
开发框架 JavaScript 前端开发
Electron技术深度解析：构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析：构建跨平台桌面应用的利器
九月天空
200 0
土木林森
|
4月前
|
容器 iOS开发 Linux
震惊！Uno Platform 响应式 UI 构建秘籍大公开！从布局容器到自适应设计，带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架，支持 Web、桌面（Windows、macOS、Linux）及移动（iOS、Android）等平台，仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践：利用布局容器（如 Grid）适配不同屏幕尺寸；采用自适应布局调整 UI；使用媒体查询定制样式；遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法，开发者可以为用户提供一致且优秀的多设备体验。
土木林森
176 0
土木林森
|
4月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆：Angular与Electron的完美融合——从环境搭建到通信机制，全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步，开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular，开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境，包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤，并最终将应用打包成多平台可执行文件，为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
土木林森
136 0
土木林森
|
7月前
|
JavaScript 前端开发 安全
【TypeScript技术专栏】TypeScript在Electron桌面应用中的实践
【4月更文挑战第30天】本文介绍了如何在Electron桌面应用中采用TypeScript以提升代码质量和可维护性。Electron利用Chromium和Node.js让前端开发者能创建桌面应用，而TypeScript的强类型系统和高级语言特性有助于管理复杂项目。通过初始化项目、安装依赖、配置TypeScript、编写主进程和渲染进程代码，开发者可以在Electron中实践TypeScript。一个简单的文本编辑器案例展示了TypeScript在确保类型安全方面的优势。尽管有学习成本，但TypeScript对大型Electron项目来说是值得的。
土木林森
454 0
sunrr
|
7月前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
sunrr
37 0
尘缘..
|
JavaScript 前端开发 Linux
Vue.js + Electron 的跨平台桌面应用程序开发
本文介绍了 Vue.js 和 Electron 的基本特点和原理，并分析了它们在桌面应用程序开发中的优势和应用场景。在基于 Vue.js 和 Electron 的桌面应用程序开发实践中，本文详细介绍了项目的搭建和配置，包括环境的准备、项目的初始化和依赖的安装等步骤。然后，本文介绍了使用 Vue.js 进行界面设计和组件开发的方法，并提供了相关的示例代码和实现细节。接下来，本文探讨了 Electron 主进程和渲染进程的开发，包括窗口管理、文件系统访问和与底层系统交互等方面的内容。最后，本文对基于 Vue.js 和 Electron 的桌面应用程序开发做出了总结，并展望了未来的发展方向和应用前景
尘缘..
844 2
祁符建
|
开发框架 自然语言处理 开发者
多端/跨端/融合的桌面应用之Electron
Electron作为一种跨平台桌面应用开发框架，以其出色的用户体验和丰富的功能，深受广大开发者的喜爱。
祁符建
302 1
我在学前端
|
前端开发 JavaScript 开发者
前端桌面应用开发：Electron介绍与实践（3）
前端桌面应用开发：Electron介绍与实践（3）
我在学前端
132 0

热门文章

最新文章

  • 1
    使用Electron开发基于Node.js的桌面应用
  • 2
    使用Electron生成安装包并打包为不同平台的应用格式
  • 3
    构建跨平台桌面应用：Electron和Qt的比较
  • 4
    如何用 Electron + WebRTC 开发一个跨平台的视频会议应用
  • 5
    electron安装的时候总是卡住
  • 6
    从0到1构建跨平台Electron应用，这篇文章就够了
  • 7
    Electron入门教程1 —— 编写第一个桌面应用程序
  • 8
    如何使用nsis打包electron开发的安装程序
  • 9
    超简单的Vue+Electron快速开发多端在线笔记本
  • 10
    解决Electron加载带jquery的项目报错问题
  • 1
    如何用 Electron 打包chatgpt-plus.top并生成mac客户端
    59
  • 2
    从零开始：如何用Electron将chatgpt-plus.top 打包成EXE文件
    60
  • 3
    PC端软件，Electron的介绍
    48
  • 4
    PC端01，桌面端，electron的开发,electron的开发的系列课程，软件开发必备流程，electron的讲解，electron的开发，vitepress博主的gitee链接，PC端效率软件
    48
  • 5
    electron-vue 常用配置
    35
  • 6
    electron-vue 窗体禁止拖拽
    118
  • 7
    electron-vue 自定义菜单
    101
  • 8
    Electron 集成 Vue —— electron-vue
    57
  • 9
    4.Electron之自定义菜单(绑定快捷键、点击事件)
    624
  • 10
    3.Electron之remote，打开新窗体
    218

    • 相关课程

    更多
  • Cloud Toolkit 开发部署效率提升神器
  • 开源Android容器化框架Atlas开发者指南
  • Linux 文本管理入门

    • 相关电子书

    更多
  • AliOS Things集成开发环境 降低开发门槛
  • AliOS Things集成开发环境降低开发门槛
  • 15分钟打造你自己的小程序更新版

    • 相关实验场景

    更多
  • 使用操作系统智能助手OS Copilot解锁操作系统运维与编程
  • 语言入门-1：环境构建
  • 2分钟自动化部署人生模拟器
  • 基于Anolis OS 3快速搭建LNMP环境制作KodBox
  • Web Terminal环境使用指南
  • 远程桌面环境使用指南
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解