Electron介绍

Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8。
Electron 相关项目源码链接：

编译及打包 electron-quick-start 示例项目（Windows系统）

1. 电脑安装 node/npm 环境 (已安装则忽略此步)
  • Node.js 官网下载地址
  • Node.js 安装配置教程
  • 下载 Node.js 并安装，安装完成后在DOS中运行 npm -v 和 node -v 命令检查是否成功(如果命令无效检查下电脑的环境变量配置)
  • (可选)国内推荐安装npm的淘宝镜像cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
    2. 下载 electron-quick-start 示例项目源码并运行项目
  • 在GitHub上下载或Clone electron-quick-start 项目源码
  • 在命令行cd到项目目录，安装electron依赖:npm install electron --save-dev(npm可使用cnpm)，运行项目:npm start
    3. 使用 electron-packager 打包成桌面应用
  • 全局安装electron-packager打包工具npm install electron-packager -g
  • 执行打包命令格式:electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
  • 命令示例:electron-packager . webApp --win --out outDir --arch=x64 --overwrite --ignore=node_modules，等待命令执行完成(第一次运行会下载打包到平台的依赖工具，时间会很久)
  • 打包完成后会在项目下的 outDir/webApp-win32-x64 目录中生成可执行桌面应用(webApp.exe)，双击打开则会用桌面应用的方式显示示例项目的Hello World!
  • 备注：打包出来的可执行应用体积很大(使用当前各个最新版本工具打包win-x64有近160MB)，生成的桌面应用中前端访问第三方域名无跨域问题
    4. 显示自定义的前端项目界面
    将前端项目打包生成静态web文件，替换掉桌面应用”./resources/app/“目录下的示例项目 index.html 即可

一些注意事项

生成的桌面应用本质是 Chromium + Node 环境

前端代码更新后不需要重新打包桌面应用，每次只需要将可执行文件目录”./resources/app/“下的静态网页替换成新打包的前端静态发布文件即可；即更新”./resources/app/“目录下的代码后，直接重新运行桌面应用即可看到更新后的效果；

桌面应用中打开运行项目的调试工具

在菜单‘View’-‘Toggle Developer Tools’命令打开调试工具

去掉桌面应用默认显示的菜单项
  • 方式一：在’main.js’代码中，生成 BrowserWindow 时，加入参数”autoHideMenuBar: true”即可在运行应用时不显示菜单栏(而按 Alt 键可以呼出菜单)
  • 方式二：生成的BrowserWindow对象设置：”mainWindow.setMenu(null)” (按 Alt 键也不会呼出菜单)
    更改应用图片
    执行打包桌面应用命令时设置icon参数，示例：将favicon.ico放到示例项目根目录下，执行electron-packager . webApp --win --out outDir --arch=x64 --overwrite --ignore=node_modules --icon=favicon.ico
    打开web项目(Vue-cli)加载不出来的问题
    项目打包路径配置成相对路径：在”vue.config.js”配置文件中配置：
    1
    2
    3
    4
    module.exports = {
    	publicPath: './',   //默认为'/'
    	......
    }