electron原生和<webview>的通信交互

目录

 

1、缘由

2. 标签介绍

3、代码实现：

4、注意事项

---

1、缘由

开发electron项目的时候，因为每次更改新功能都要重新打包，还要做热更新的操作，

借鉴原生App和h5，（H5要调起原生的拍照功能，发一个信号给原生，原生接到信号唤醒摄像头，成功或者失败发个回调给H5）发现<webview>标签可以实现，

2. <webview>标签介绍

使用 webview 标签来把 'guest' 内容（例如 web pages ）嵌入到你的 Electron app 中. guest内容包含在 webview 容器中.一个嵌入你应用的page控制着guest内容如何布局摆放和表达含义.

与 iframe 不同, webview 和你的应用运行的是不同的进程. 它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的.因为这能保证应用的安全性不受嵌入内容的影响.

<webview> 标签的文档：https://wizardforcel.gitbooks.io/electron-doc/content/api/web-view-tag.html

3、代码实现

原生代码如下：（本人是使用electron-vue搭建的项目）

1、electron的代码如下：

<template> <div id="wrapper"> <webview id="foo" src="http://192.168.20.15:3000/" autosize min-width='1200' style="height: 700px" nodeintegration></webview> </div> </template> <script> export default { name: 'landing-page', data () { return {} }, mounted () { this.onload(); }, methods: { onload() { var webview = document.getElementById("foo"); var loadstart = () => { console.log("loadstart"); } var loadstop = () => { console.log("loadstop"); } webview.addEventListener("did-start-loading", loadstart); webview.addEventListener("did-stop-loading", loadstop); webview.addEventListener('dom-ready', () => { webview.openDevTools()//webview加载完成，可以处理一些事件了 }) // 在此监听事件中接收webview嵌套页面所响应的事件 webview.addEventListener('ipc-message', function(event) { console.log('在此监听事件中接收webview嵌套页面所响应的事件', event.channel); if (event.channel === 'print') { // 原生处理打印成功后，告诉嵌入页面 webview.send('ping', '打印成功') // 向webview嵌套的页面发送信息 } }); } } } </script>

2、嵌入页的步骤

（1）安装electron  cnpm install electron -S

  (2）代码如下

<template> <div> <div @click.stop.prevent="print">点击打印按钮</div> </div> </template> <script> export default { name: 'login', methods: { print() { // 没有在electron里面嵌入，不可用 if (window.require) { const {ipcRenderer} = window.require('electron'); ipcRenderer.sendToHost('print') // 向原生发送信息 ipcRenderer.on('ping', (event, message) => { // 接收electron原生返回的信息 　　console.log('接收electron原生返回的信息', event, message); }) } } } }; </script>

4、注意事项

问题一：在安装electron，引进的时候报错fs.existsSync is not a function、

原因：直接require会导致提示找不到fs模块，需要使用window.require,但是在Chrome环境中提示window.require not function所以需要做一次判断

解决方案：

 if (window.require) {     var ipc = window.require('electron').ipcRenderer   }