网站地图    收藏   

主页 > 前端 > electron >

electron入门教程(1)

来源:未知    时间:2022-11-02 10:14 作者:小飞侠 阅读:

[导读] 前言: 今天带来electron中文入门教程第一篇,随着互联网发展,现在前端js已经覆盖到各个领域了,web端,移动端,服务器端,甚至是 客户端, 今天讲的electron就是其中利用JS做客户端的...

前言:

今天带来electron中文入门教程第一篇,随着互联网发展,现在前端js已经覆盖到各个领域了,web端,移动端,服务器端,甚至是客户端,今天讲的electron就是其中利用JS做客户端的。

electron主要nodejs+chromemini内核打造的多兼容多平台的客户端框架,渲染层是html+css+js去写,而负责和PC交互的全交给了node去处理,主要兼容 windows, macos,linux。


快速入门:

针对快速入门,官网已经提给了一套完整的讲解,按照官网的入门讲解:https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

1667105620607096.png

目前站长node版本

image.png

按照官网要求,安装完后,我们得到一个纯页面的客户端,类似下图:

1667105898862908.png


在main.js里面有如下代码:主要是监听APP启动回调 createWindow  方法里面封装了 如何调用如何启动一个窗口调用页面渲染视图。

app.whenReady().then(() => {
  createWindow()
})
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html') // 利用本地渲染方法传入本地html文件路径(相对),也可以远程加载loadURL方法加载远程资源
}


预加载JS:

在官网接下来教程我们看到了 preload.js 预加载JS,这里主要是封装一些和 前端html+js 交互的一些代码,可以理解为“注入”一些和客户端"node"交互的能力,

这里能力其实主要是利用ipc通信来交互的,纯前端进来的,可以把它理解为我们用到的 postMessage 类方法,但是没有 postMessage 那么局限性。

站长这里粘贴一些自己封装在 preload.js的方法并做出讲解,大家可以结合官网实例深入理解下。

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 通过预加载全局注入到渲染器事件
let ipcCallback = {
// 添加页签
"addTab": (obj, fnName) => {
ipcRenderer.send(fnName, obj)
},
// 关闭页签
"delTab": (obj, fnName) => {
ipcRenderer.send(fnName, obj)
},
// 选中
"choiceTab": (obj, fnName) => {
ipcRenderer.send(fnName, obj)
},
}
// 在预加载核心类里面,利用这个类将相关能力暴露给全局渲染层,因为涉及到安全问题,站长这里只是用到那些就暴露那些即可。
contextBridge.exposeInMainWorld('electronAPI', {
desktop: true,
setTitle: (title) => ipcRenderer.send('set-title', title),
// ipc消息总入口
ipcSendMsg: (msg) => {
console.log('ipcSendMsg - ', msg)
// 合法过滤
if(msg.type && ipcCallback[msg.type]) {
ipcCallback[msg.type](msg.obj, msg.type);
}
},
// 消息监听
handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
});
// 通过预加载全局注入到渲染器事件 - end

站长上面的预加载js主要封装了一些子创建事件,和客户端主进程通信,比如页面加载完毕后,改变页面标题,下图就是打开一页页签后,获取远程页面内容后改变页面标题,这里利用的 ipc通信将当前页面信息发送给主进程,然后交互通信改变样式。

再比如选中页签,删除页签,打开页签,都是通过了IPC通信,具体用法大家可以花点时间深入读取官网文档。

https://www.electronjs.org/zh/docs/latest/api/ipc-main

image.png

创建子窗口:

这里创建子窗口是利用 electron 的 BrowserView 方法,代码如下:

image.png

  1. 在主窗口加载完后触发子窗口类初始化,并且把主窗口实例告诉给子窗口类

image.png

2. 子窗口拿到后绑定给全局属性,方便以后使用。


如何创建子窗口?

创建子窗口方法如下:主要思路是生成一个子窗口对应的hash值,先存起来,方便后面的增删改查,然后每次改变都通过IPC通信发给渲染层,结合上面的预加载方法,可以看到一个创建页签的闭环操作。

// 创建子窗口
createChildWin(winId, url) {
console.log('winId, url', winId, url)
// 不存在窗口
if(!winId || !this._childWinList[winId]) {
let _winId = this.utils.getHashWinName();
let _win = null;
this._childWinList[_winId] = _win = new BrowserView({
frame: true, // 无边框
modal: true
});

// 打开开发工具
_win.webContents.openDevTools();

// setTimeout(() => {
//   this._mainWin.removeBrowserView(_win)
//   console.log('this._childWinList[_winId]')
// }, 3000)

// 获得网页标题
_win.webContents.on('dom-ready', (e) => {
let winTitle = _win.webContents.getTitle();
// 主进程通信
this._mainWin.webContents.send('update-counter', {
type: 'changeTabTitle',
winId: _winId,
title: winTitle
});
})
// 窗口变化
_win.setAutoResize({
width: true,
height: true,
horizontal: true,
vertical: true
});
// this._mainWin.setBrowserView(this._childWinList[_winId]);
this._mainWin.addBrowserView(this._childWinList[_winId]);
let mainWinSize = this._mainWin.getContentSize();
this._childWinList[_winId].setBounds({
x: 0,
y: Com.win.topBarHeight,
width: mainWinSize[0], // Com.win.width, Com.win.height, 
height: mainWinSize[1] - Com.win.topBarHeight });
// 主进程通信
this._mainWin.webContents.send('update-counter', {
type: 'addTabUi',
winId: _winId,
url: url
});
// 设置地址
if(url.indexOf("http") > -1) {
// 外网地址
this._childWinList[_winId].webContents.loadURL(url);
} else {
// 本地地址
this._childWinList[_winId].webContents.loadFile(url);
}
}

},

以上就是electron入门教程(1)入门教程全部内容,大家可以结合增加思路把删除思路,修改思路给加上。

最新评论

添加评论

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论