electron webview 和 h5 交互、jsBridge 的实现方式

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 设置文件路径

   //  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 );

}

如果觉得还可以的，点个赞再走哦~