为了账号安全,请及时绑定邮箱和手机立即绑定

Electron初体验之翻译软件

2019.05.28 10:44 504浏览

正经java小白一枚,从事web开发工作。偶尔会有编写桌面程序的想法,毕竟HTML能力有限,之后Electron进入了我的视线

如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

第一个小程序

先放上项目的github

这是一款基于百度通用翻译的翻译软件,windows上喜欢使用灵格斯,但是mac版本,无奈只能自己动手编写一个了

运行界面如下
图片描述

设置界面

图片描述

功能比较简单,此文章讲解下整个开发过程

需求:

  • 基于百度通用翻译API,可以设置APPI与秘钥
  • 支持快捷键
  • 支持从剪切板中读取以及将结果复制到剪切板

平时java后端开发,偶尔使用vueiview组件

开发过程

使用ElectronVueiviewnedbaxios

各种文档

技术 文档 备注
Electron 官网文档 基于html全平台桌面程序
Vue 官方文档 渐进式 JavaScript 框架
iview 官网文档 一套基于 Vue.js 的高质量
nedb w3c文档 UI 组件库一种nodejs嵌入式数据库
axios 官方文档 易用、简洁且高效的http库

已经有大神将vueElectron整合到一起,直接基于脚手架生成项目github

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
运行界面

图片描述

工程目录介绍

src/main/index.jsElectron的入口脚本,src/renderer/main.jsvue的入口脚本,src/index.ejs为加载的默认html,一般只调整title

加入各种插件

npm install iview --save
npm install nedb --save
npm install js-md5 --save

调整src/renderer/main.js

import md5 from 'js-md5';
import iView from 'iview'
import db from './datastore'
Vue.use(iView,{
  transfer: true,
  size: 'small',
  select: {
    arrow: 'md-arrow-dropdown',
    arrowSize: 20
  }
})
Vue.http = Vue.prototype.$http = axios
Vue.prototype.$md5=md5
Vue.prototype.$db=db

主要功能

通信

Electron中存在两种进程,主进程渲染进程,两个进程之间会有通信过程

比如

  • 在html调用翻译api之后;需要将翻译结果复制到剪切板时
  • 翻译软件显示时,需要读取前切板的内容进行翻译时
  • 点击菜单中首选项进行设置时

主进程中使用ipcMain进行事件监听与事件的发送(ipcMain无法主动发送消息,需要借助webContents发送)

渲染进程中使用ipcRenderer进行事件的监听与事件的发送

翻译

使用axios访问百度通用翻译的api即可,过程需要使用md5对部分数据进行加密(详见百度云API)

this.$http({
    url: "http://api.fanyi.baidu.com/api/trans/vip/translate",
    method: 'post',
    params: {
    q: this.q,
    from: from,
    to: to,
    salt: salt,
    appid: this.appId,
    sign: this.$md5(this.appId + this.q + salt + this.secret)
}
}).then((result) => {
		//处理结果
}
打包

package.json中加入了全平台的打包脚本

npm run build:all

备注:

npm install时尽量不要使用cnpm install 可能会导致程序运行或者打包失败,网络问题只能想办法翻墙了

**此软件实现的功能较为简单,算是一个Electron的入门程序,若感兴趣或者存在部分问题可以一起探讨

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消