Farlanki.

使用Electron和JavaScript构建桌面应用

字数统计: 707阅读时长: 2 min
2017/07/02 Share

前言

　　好久没写博客了。最近我一直在努力扩充自己的词汇量，想起房间里有一个一直闲置的显示器和树莓派，就萌生了将那个显示器作为一个单词的展示窗口的想法。我的打算是开发一个桌面应用。因为该应用需要运行在安装了linux的树莓派上，而我之前并没有学习过linux的GUI编程，所以我选择使用Electron这个跨平台的框架来构建这个桌面应用。

关于Electron

Electron（最初名为Atom Shell）是GitHub开发一个的开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。Electron现被已多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。
　　一个基础的Electron包含三个文件：package.json（元数据）,main.js（代码）andindex.html（图形用户界面）。框架由Electron可执行文件（Windows中为electron.exe、macOS中为electron.app、Linux中为electron）提供。开发者可以自行添加标志、自定义图标、重命名或编辑Electron可执行文件。
(摘自维基百科)

主进程和渲染进程

electron中，由package.json中的main.js运行出来的进程为主进程(Main Process)。主进程用于创建GUI界面以便web页面的展示。electron由Chromium负责页面的显示，所以当创建一个页面时，就会对应的创建渲染进程(Renderer Process)。
主进程通过创建BrowserWindow对象来创建web显示页面，BrowserWindow运行在他自己的渲染进程中。当BrowserWindow被销毁时，对应的渲染进程也会终止。

应用架构梳理

这是一个简单的应用，主要的功能就是随机从词库中抽取单词，展示该单词，在若干秒后再展示其中文意思。由于Ndoe.js自带fs文件管理模块，所以我选择在主线程中完成取得单词和其解释，在渲染进程开始运行的时候，由渲染进程调用主进程的相关函数，这样渲染进程就可以得到单词和其解释。

remote

main.js是运行在Node.js上的，而运行着Chromium的渲染进程负责展示页面，如何在渲染线程中调用主线程的方法呢？渲染线程中的remote模块可以让渲染进程调用主线程的方法。

1
2
3
4
5
6
7
8
//animate.js
const main = require('electron').remote.require('./main.js');
var storage = main.getArrayContent()

//main.js
function getArrayContent(){
    //implementation
}

动画效果

动画效果利用TweenJS开发。

打包

在package.json的scripts中添加一下字段：

1
"packager": "electron-packager . --overwrite --platform=linux"

再使用npm run-script packager 即可完成打包，得到linux下的可执行文件。代码见此。

CATALOG
  1. 1. 前言
  2. 2. 关于Electron
  3. 3. 主进程和渲染进程
  4. 4. 应用架构梳理
  5. 5. remote
  6. 6. 动画效果
  7. 7. 打包
Total : 85
2021
2020
2019
2018
2017
2016
2015
2014