1、尝试在远端网页直接require('electron')报以下错误
Electron的一个主要特性就是能在渲染进程中运行Node.js，html或者vue项目不能直接require('electron')
想要壳与网页分离，并且达成交互，需要双向定义事件，而electron只需在壳中引用
2、创建浏览器窗口
// main.js
mainWindow = new BrowserWindow({
width: 360,
height: 600,
x: 0,
y: 0,
autoHideMenuBar: true,
// icon:path.join(__dirname, 'favicon.ico'),
alwaysOnTop: true,
// closable: false,
// frame: false,
webPreferences: {
nodeIntegration: true,
webSecurity: false, //禁用同源策略
plugins: true, //是否支持插件
nativeWindowOpen: true, //是否使用原生的window.open()
webviewTag: true, //是否启用 <webview> tag标签
// preload: path.join(app.getAppPath(), './static/preload.js'),
sandbox: true, //沙盒选项,这个很重要
}
})
3、预加载文件方式：
这里预加载文件可以通过new BrowserWindow中的preload，也可以
mainWindow.webContents.session.setPreloads([ //这里的 setPreloads接收数组
path.join(__dirname, 'static/preload-get-display-media-polyfill.js'),
path.join(__dirname, 'static/preload.js')
])
加载远程URL
const options = { extraHeaders: 'pragma: no-cache\n' } // options 使加载忽略 http 缓存
mainWindow.loadURL('https://github.com', options )
3、electron与远端网页交互
// 远端网页中定义如下， fromWebToElectron定义在electron, ifElectronWantClose定义在远端网页
window.fromWebToElectron('这里是我要告诉electron的内容，比如主要传参或主动请求数据', function(a){
console.log("这里是回调，拿到要请求的数据", a)
})
window.ifElectronWantClose= function(){
console.log("electron壳告诉我要关闭窗口了,在这里执行窗口关闭前是事件")
}
// electron接收传参或主动talk
// preload.js
const { ipcRenderer} = require('electron')
window. fromWebToElectron = function (a, callback) {
console.log('electron收到远端的传参', a)
callback(config) // 回调给远端的请求数据，如config
ipcRenderer.send('close'，'传参') // 比如收到请求关闭窗口
}
// main.js 监听主进程当前窗口关闭，关闭前
mainWindow.on('close', (e, a) => {
console.log("窗口马上要关闭了",)
mainWindow.webContents.send(" ifElectronWantClose")
})
4、sandbox 沙盒选项
Chromium主要的安全特征之一便是所有的blink渲染或者JavaScript代码都在sandbox内运行。 在sandbox模式下，渲染器只能通过IPC委派任务给主进程来对操作系统进行更改 ，但是 sandbox 模式开启，electron不能访问到远端网页中的window属性， 唯一的例外是预加载脚本；
若 sandbox 设为false, 远端网页挂有插件，当网页在壳中运行，插件所有挂载将会失效，即undefined
因此，electron想要与远端页面交互，且挂有插件或有window交互内容， sandbox必须开启，可以将逻辑写在预加载脚本中
5、 sandbox 模式下，文件之间相互调用（如：preload.js中访问config.js对象）不能直接require，调用方式如下：
方式1：
// preload.js
const config = remote.require('./static/config.js') //这里remote对象还是与main.js一个层级，因此不能直接./config.js
方式2：
// main.js
const config = require('./static/config.js')
global.config = config //挂在到global
// preload.js
const { remote } = require('electron')
const config = remote.getGlobal("config")
