使用Electron

TMaize 于 2018-04-22 发布

如果你可以建一个网站,你就可以建一个桌面应用程序

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

安装

Electron是基于Nodejs的,Nodejs的安装就不说了

npm install -g electron

# 安装打包工具

npm install -g electron-packager

基本使用

  1. 创建package.json,没有模板的话可以使用npm init

  2. 在package.json中main指定的js文件,也就是electron主进程进行初始化

  3. 看看api,主进程能使用那些,渲染进程能使用拿下,都有什么可以使用的属性,方法

  4. 由于使用Nodejs,一些模块会无法导出到windows,比如jQuery,使用Nodejs规范的require即可

  5. 打包的使用

    如下命令会在./release下生成outDirName-win32-x64文件夹

     electron-packager . outDirName --out=release --platform=win32 --arch=x64 --version=1.0.0 --electron-version=1.8.4 --overwrite --prune=true --icon=./resource/glee.ico --ignore=temp/
    
  6. 了解以上基本就可以了

隐藏Frame

关于外部窗口的隐藏有些要注意的地方

窗口通讯

electron中,从package.json的main载入的js文件就是主进程,由主进程load出来的页面就是渲染进程

渲染进程可以有多个,主进程只有一个”main.js”

主进程和渲染进程之间通信,可以使用ipcMain(主进程)和ipcRenderer(渲染进程)来通信,也可以使用remote模块来通信

所以最常见的就是主进程做中转来实现多个窗口之间的通信

一个案例

demo地址 TMaize/electron-usage

# 调试
npm run start
# 打包
npm run package-win

# 需要注意的是通过require来引入依赖,使用ipcRenderer来进行通讯
window.$ = window.jQuery = require("./dist/jquery.min");
window.ipc = require('electron').ipcRenderer;

01