electron原生和的通信交互

目录

 

1、缘由

2. 标签介绍

3、代码实现：

4、注意事项

---

1、缘由

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

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

2. 标签介绍

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

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

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

3、代码实现

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

1、electron的代码如下：

2、嵌入页的步骤

（1）安装electron  cnpm install electron -S

  (2）代码如下

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
  }