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