electron 初使用心得

时间:2022-03-16 16:37:30

demo 推荐:官网的 demo,工程结构一目了然,使上手更加轻松

demo git 地址:https://github.com/electron/electron-quick-start

一、在一个窗口中的页面切换

    替换页面中的节点

二、引入 JQ

    不可以使用 script 标签的 src 来引入,得写入 script 标签来实现

<script>window.$ = window.jQuery = require('./js/main/jquery-3.2.0.min.js');</script>

三、跨域

    由于子进程是客户端,所以会遇到跨域的请求,将跨域的请求放入到主进程中请求,由于主进程是 node 服务器,所以不存在跨域的问题

    子进程与主进程间的通信,使用 electron 提供的 ipc 通信模块

 文档地址:

        https://electronjs.org/docs/api/ipc-main

        https://electronjs.org/docs/api/ipc-renderer

    ipc 通信模块的使用

     在子进程中往主进程发送数据:

        var electron = require('electron')

        // 子进程的 ipc 模块

        var ipcRenderer = electron.ipcRenderer;

        var postResponse = electron.ipcRenderer.sendSync('magua', 'a', 'b', 'c')

        // ipcRenderer.sendSync 是一个同步的发送消息事件,它的第一个参数是和主进程约定好的自定义事件名,后面可以接多个参数

    在主进程中监听子进程的事件,接收数据:

ipcMain.on('magua', (event, a, b, c) => {
      // 这里的 magua 是事件名,是和子进程约定好的自定义字段
      // 回调函数中的参数,第一个 event 后的参数是要子进程传递的参数
      // 参数依次传入,不受限制
      // ----
      // 由于是服务端,所以使用不了前端的 ajax
      // 这里使用 request 模块来实现
      // 引入 request
      var request = require('request')
      // 根据发送的数据类型不同,request 的使用也不同
      // application/json 格式的数据
      request({
          url: url,
          method: "POST",
          json: true,
          headers: {
              "content-type": "application/json",
          },
          body: JSON.stringify(requestData)
      }, function(error, response, body) {
          if (!error && response.statusCode == 200) {
          }
      });
      // application/x-www-form-urlencoded 格式的数据
      request.post({url:'url', form: form }, function(error, response, body) {
          if (!error && response.statusCode == 200) {
          }
      })
      // multipart/form-data 格式的数据
      request.post({url:'url', formData: form }, function(error, response, body) {
          if (!error && response.statusCode == 200) {
          }
      })
      // 以上三种方法中第一个参数为一个包含请求路径和参数的对象,对象的 key 是固定的

  })

三、引入 JS 文件

在 html 中 引入 JS 文件

使用 electron 提供的方法引入,如下

    <script>
        require('./magua.js')
    </script>

在 JS 文件中引入其它 JS 文件中的函数,如下

在被引入的 JS 文件中将所需函数导出,

key 是导出自定义名称,value 是函数的名称

可以导出多个

module.exports = {
    magua: __magua,
    xigua: __xigua,
}

在所需的 JS 文件中导入其它 JS 文件的函数

var { magua } = require('./magua.js')
var { magua, xigua } = require('./magua.js')