Electron学习笔记

Electron

Electron是由Github开发，用于HTML，CSS和Javascript来构建跨平台桌面应用程序的一个开源库，Electron通过Chromium和NodeJs合并同一个运行时环境中，并将其打包为MAC，Windows和Linux系统下的应用来实现这一目的

官网：https://electronjs.org

环境

OS： windows7+
NodeJs： 10+

vue-electron

这是一款基于vue的electron的脚手架，能够帮我们快速的构建项目

需要注意的是：它构建项目完成之后，命令行npm run dev的时候，会报错HtmlWebpackPlugin。。。

解决方法就是在项目下的.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js两个文件都修改如下配置

Code

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
+      templateParameters(compilation, assets, options) {
+        return {
+          compilation: compilation,
+          webpack: compilation.getStats().toJson(),
+          webpackConfig: compilation.options,
+          htmlWebpackPlugin: {
+            files: assets,
+            options: options
+          },
+          process,
+        };
+      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),

在npm run dev打开的界面会出现三个警告

只需要在main.js中添加process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'就不会出现警告了

文件目录

Code

|_item
|
|___ .electron-vue
|___ build
|___ dist
|___ src
|___ static
|___ .babelrc
|___ .gitgnore
|___ .travis.yml
|___ appveryor.yml
|___ package-lock.json
|___ README.md

process对象

用于拿到系统的一些信息

在使用的时候需要在main.js里的createWindow里的BrowserWindow构造函数里的webPreferences对象里添加nodeIntegration: true，一些node语法都需要定义才能使用

隐藏菜单栏

从electron丽按需导入Menu对象

import { app, BrowserWindow, Menu } from 'electron'

在createWindow中添加Menu.setApplicationMenu(null)即可

隐藏标题栏

在new Browser对象中添加frameL:false即可

传递数据

做本地应用程序的时候经常需要用到nodeJS来保存数据

这时候就涉及到了主进程和渲染进程的数据传递了

首先按需导入ipcMain模块
注册事件（注意：ipcMain里on注册事件的名字可以自定义），调用时跟渲染进程的调用的名称一样即可
渲染进程向主线程发送请求时也必须回应，不然数据请求不过来

javascript

// 主进程
import { app, BrowserWindow, Menu,ipcMain } from 'electron';
ipcMain.on('asynchronous-message', function(event, arg) {
  // 这里是从渲染进程返回来的数据
  console.log(arg);
  
  // 这里是传给渲染进程的数据
  fs.readFile(path.join(__dirname,"../renderer/data/data.json"),"utf8",(err,data)=>{
    event.sender.send('asynchronous-reply', data);
  })
});

javascript

// 渲染进程
const ipcRenderer = require("electron").ipcRenderer;

// 这里是接收主进程传递过来的参数，这里的on要对应主进程send过来的名字
ipcRenderer.on("asynchronous-reply", function(event, arg) {
  	console.log("render+" + arg); // prints "pong"
});

// 这里的会传递回给主进程，这里的第一个参数需要对应着主进程里on注册事件的名字一致
ipcRenderer.send("asynchronous-message", "传递回去ping");

无边款拖拽

在开发中我们通常会觉得菜单栏和标题栏不符合审美，都会自己做一个

但是，没有了标题栏要怎么实现拖拽呢

在想要拖拽的元素上添加CSS

Code

1	-webkit-app-region: drag;

实现拖拽了，但是问题也就来了，原本点击事件的hover的伪类都用不了了

这时只能给特定的元素添加CSS

Code

1	-webkit-app-region: no-drag;

动态设置宽高

javascript

1 2	import { remote } from "electron"; `remote.getCurrentWindow().setSize(width, height)`

打包

下载npm install -g electron-packager
在项目的package.json文件中添加"packager": "electron-packager . app --win64 --out presenterTool --arch=x64 --electron-version 8.1.1 --overwrite --ignore=node_modules"
运行npm run electron-packager即可打包成exe文件

打包问题(Response code 404)

错误信息：

Response code 404(Not Found) for https://npm.taobao.org/mirrors/electron/8.1.1/electron-v1.0.0-win32-x64.zip

进入这个网址，如果不成功应该是显示404
修改配置文件中的--electron-version 8.1.1后面的版本要对应上列表里有的

打包完成打开什么都没有显示

还未成功

问题

[Vuex Electron] Please, don’t use direct commit’s, use dispatch instead of this.

注释掉store目录下index.js的createSharedMutations插件。