electron踩坑以及与远端页⾯交互
1、尝试在远端⽹页直接require('electron')报以下错误
报该错误是因为当前窗⼝不能访问到node.js环境
Electron的⼀个主要特性就是能在渲染进程中运⾏Node.js，html或者vue项⽬不能直接require('electron')
electron只需在壳中引引⽤
想要壳与⽹页分离，并且达成交互，需要双向定义事件，⽽
想要壳与⽹页分离，并且达成交互，需要双向定义事件，⽽electron只需在壳中
2、创建浏览器窗⼝
// main.js
mainWindow = new BrowserWindow({
width: 360,
height: 600,
x: 0,
y: 0,
electron vue教程
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.AppPath(), './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('github', 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 监听主进程当前窗⼝关闭，关闭前
<('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，调⽤⽅式如下：
5、 sandbox 模式下，⽂件之间相互调⽤
⽅式1：
// preload.js
const config = quire('./static/config.js')  //这⾥remote对象还是与main.js⼀个层级，因此不能直接./config.js
⽅式2：
// main.js
const config = require('./static/config.js')
// preload.js
const { remote } = require('electron')
const config = Global("config")

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。