electron 初使用心得

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')

秒客网

electron 初使用心得

相关文章