MarkDown 格式请移步
环境：
electron-vue
jsBridge
创建perload.js
1. 在 dist-electron 中创建preload.js
//preload.js
window._ipcRenderer = require('electron').ipcRenderer;
window._remote = require('electron').remote;
window.isInElectron = require('is-electron')
window._platform = process.platform;
2. 设置 preload.js 的文件路径
***在主进程 background.js 中创建主进程下的全局变量，引入preload.js 的文件路径，因为 preload文件路径只支持（file | asar），如果不这样设置怕找不到preload.js 文件路径
function createWindow() {
// Create the browser window.
global.shareObject = { // ********这是重点
preloadPath: path.join(__dirname , 'preload.js')
}
win = new BrowserWindow({
width: 2080,
height: 1800,
webPreferences: {
webviewTag:true ,
webSecurity : false ,//是否禁用同源策略(上线时删除此配置)
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
//nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
nodeIntegration: true
},
// transparent : true ,
// frame : false ,
// maximizable: false,
// resizable: false,
icon: path.join(__static, 'icon.png')
})
}
参考链接：https://www.electronjs.org/docs/api/webview-tag#preload
3. 给webview 设置文件路径
<webview :preload="path "></webview> // html 部分
import { remote , ipcMain } from "electron";
export default {
data (){
return {
path : "" ,// preload.js 文件路径
}
} ,
created (){
let preload = remote.getGlobal('shareObject').preloadPath ; // 这里与第二条的 global.shareObject 相对应
this.path = preload;
}
}
4. *******通讯部分*******
// electron webview 部分
var webview = document.querySelector("#webview");
webview.addEventListener('ipc-message', (event) => { // 监听事件（事件名好像只可以是 ipc-message ）
console.log("event.channel : webview");
console.log(event.channel)
// Prints "pong"
})
const obj = { a : 100 , b : 300 }
webview.send('ping' , obj ) // 给 网页 端发送事件 ，并传参过去
// 网页部分
_ipcRenderer.on('ping', (evt , data) => { // 接收webview send 过来的事件 （webview.send('ping')）
console.log( 'ping ')
console.log( evt , data); // data 就是传过来的数据
_ipcRenderer.sendToHost('pong') // 给 webview 传参用 _ipcRenderer.sendToHost
})
document.querySelector("#btn").onclick = () => {
_ipcRenderer.sendToHost('pong')
}
给网页中注入js 代码
webview中
var webview = document.querySelector("#webview");
let webUserInfoAll = {a:10,b:20,c:30} ;
webview.executeJavaScript(`window.webUserInfoAll=${JSON.stringify(webUserInfoAll)}`)
.then( res => {
console.log( res )
})
.catch( err => {
console.log( err )
});
在网页端通过 window.webUserInfoAll 就可以拿到数据，不过只能webview 单向通讯到网页端，
或者是下面这种方式
webview代码
var webview = document.querySelector("#webview");
let obj = {a : 30 , b:40}
webview.executeJavaScript(`getClientMessage(${JSON.stringify(obj)})`)
.then( res => {
console.log( res )
})
.catch( err => {
console.log( err )
});
网页代码
function getClientMessage ( msg ){
console.log('getClientMessage' , msg );
}
如果觉得还可以的，点个赞再走哦~
