Electron 中文文档 https://www.w3cschool.cn/electronmanual/p9al1qkx.html
Electron 快速入门 https://weishuai.gitbooks.io/electron-/content/tutorial/quick-start.html
如何在Webstorm下配置Electron的运行 https://www.jianshu.com/p/442928d39be2
electron开发 https://blog.csdn.net/chenhaifeng2016/article/details/74917361
学透 Electron 自定义菜单 https://juejin.im/post/5d8ec6596fb9a04de2379610
使用 Electron 自定义菜单 https://segmentfault.com/a/1190000008473121 https://weishuai.gitbooks.io/electron-/content/api/menu.html
Electron dialog 模块 https://www.w3cschool.cn/electronmanual/electronmanual-dialog.html https://weishuai.gitbooks.io/electron-/content/api/dialog.html
Electron初步【01】–主进程VS渲染进程&不同页面间共享数据 https://segmentfault.com/a/1190000005126719
ELECTRON实例（登录例子） https://www.yinyubo.cn/?p=279
Electron – 基础学习(1): 环境安装、创建项目及入门 https://www.cnblogs.com/donghuang/p/12167375.html
方式1:
|
1 2 3 4 5 6 |
cd C:\Dev\workspace\webstorm git clone https://github.com/electron/electron-quick-start.git rename electron-quick-start electron cd electron npm install 或者 npm install npm start |
Electron – 基础学习(2): 项目打包成exe桌面应用 之electron-packager https://www.cnblogs.com/donghuang/p/12170562.html
webstorm执行:
Javascript file: main.js
Application paramter: electron . 如果是调试模式: –remote-debugging-port=9222 然后使用debug方式启动.
如果electron是采用全局安装的，使用electron .来运行项目。
如果electron是安装在项目的node_modules目录，使用.\node_modules\.bin\electron .来运行项目。
1. 错误: Cannot read property ‘whenReady’ of undefined
WebStorm调试Electron https://blog.csdn.net/chenhaifeng2016/article/details/75174897
在环境: Node interpreter: C:\Dev\workspace\webstorm\electron\node_modules\.bin\electron.cmd 如果有必要,就增加.
2. electron Refused to execute inline script because it violates the following Content Security Policy directive
在html前面加入
|
1 |
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> |
主文件简介
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
//main.js const { app, BrowserWindow } = require('electron') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win function createWindow () { // 创建浏览器窗口。 win = new BrowserWindow({ width: 800, height: 600 }) // 然后加载应用的 index.html。对应的index.html 就是初始界面。 win.loadFile('index.html') // 打开开发者工具 win.webContents.openDevTools() //关于win 窗口的生命周期我们之后再研究…… // 当 window 被关闭，这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个 window 对象存放在一个数组里面， // 与此同时，你应该删除相应的元素。 win = null }) } //关于 app 主进程的生命周期我们之后再研究…… // Electron 会在初始化后并准备 // 创建浏览器窗口时，调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上，当单击dock图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() } }) // 在这个文件中，你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件，然后用 require 导入。 作者：66CCFF 链接：https://juejin.im/post/5c85da98518825657a3d6bba 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 |
渲染截面的js文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// All of the Node.js APIs are available in the preload process. // It has the same sandbox as a Chrome extension. window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const type of ['chrome', 'node', 'electron']) { replaceText(`${type}-version`, process.versions[type]) } var holder = document.getElementById('holder'); holder.ondragover = function () { return false; }; holder.ondragleave = holder.ondragend = function () { return false; }; holder.ondrop = function (e) { e.preventDefault(); var file = e.dataTransfer.files[0]; console.log('File you dragged here is', file.path); return false; }; }) |
引入Electron:
|
1 |
const {app, BrowserWindow,Menu,Notification} = require('electron') |
两种方式
|
1 2 3 4 5 |
// 主线程 const BrowserWindow = require('electron').BrowserWindow; // 渲染线程 const BrowserWindow = require('electron').remote.BrowserWindow; |
在主进程向渲染进程webContents发送消息
|
1 |
win.webContents.send('ping', 'whoooooooh!') |
渲染进程之间的通信
在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。 其中比较好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB。
你还可以用 Electron 内的 IPC 机制实现。将数据存在主进程的某个全局变量中，然后在多个渲染进程中使用 remote 模块来访问它。
|
1 2 3 4 5 6 7 8 |
// 在主进程中 global.sharedObject = { someProperty: 'default value' } // 在第一个页面中 require('electron').remote.getGlobal('sharedObject').someProperty = 'new value' // 在第二个页面中 console.log(require('electron').remote.getGlobal('sharedObject').someProperty) |
