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
  }