hi, 大家好, 我是徐小夕.
之前有些用户和朋友希望我基于H5-Dooring
开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间使用electron
开发了桌面端的软件Dooring-electron
.
当然这篇文章不会介绍如何从零使用 electron
, 而是会提供一种方案, 帮助大家快速的将线上网站转化为 electron
应用.
文章最后我也会分享一款我朋友开发的在线工具, 可以不写一行代码, 轻松把线上网站转化为桌面端软件.
相关阅读: 从零使用electron搭建桌面端可视化编辑器Dooring
熟悉Electron
的朋友也许知道, Electron
继承了来自 Chromium
的多进程架构,这使得Electron
在架构上非常类似于一个现代的网页浏览器。我们可以控制两种类型的进程:主进程和渲染器。
每个 Electron
应用都有一个单一的主进程,作为应用程序入口。主进程在 Node
环境中运行,我们可以使用所有 Node
的能力。
那么主进程中我们可以做些什么呢? 主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。
BrowserWindow 类的每个实例创建一个应用程序窗口,且在单独的渲染器进程中加载一个网页。我们可从主进程用 window 的 webContent 对象与网页内容进行交互。
有了以上基础, 我画了一张dooring-electron
的简单架构图方便大家理解:
想对electron
有更多直观理解的, 也可以参考其官网:
https://www.electronjs.org/
我们知道如果想要加载第三方网络资源, 可以使用 mainWindow.loadURL(url)
来实现, 所以只需要将网址放到 loadURL
方法中让 electron
打开即可:
const mainWindow = new BrowserWindow({
maximizable: true,
show: false,
title: "H5-dooring网站制作平台",
fullscreen: false,
center: true,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
enableRemoteModule: true,
nodeIntegration: true,
},
});
mainWindow.maximize();
mainWindow.setAutoHideMenuBar(true);
mainWindow.loadURL('your website address');
同时如果想要控制网站打开新的页面时的窗口尺寸, 我们只需要对窗口进行监听, 来动态设置新窗口的尺寸即可:
mainWindow.webContents.setWindowOpenHandler((details) => {
const base = {
fullscreen: false,
skipTaskbar: true,
center: true,
maximizable: true,
autoHideMenuBar: false,//自动隐藏菜单栏
// icon: iconPath,// 窗口图标
parent: null ,//指定父窗口
resizable: true,
webPreferences: {//网页功能设置。
webSecurity: false,//禁用同源策略
nodeIntegration: true,
nodeIntegrationInWorker: true,
enableRemoteModule: true,
contextIsolation: false
},
}
const h5Win = {
width: 1200,
minWidth: 1200,
minHeight: 775,
height: 775,
y: 60,
}
const otherWin = {
width: 1200,
minWidth: 1200,
minHeight: 800,
height: 800,
y: 60,
}
if (details.url.indexOf('/preview') > -1) {
return {
action: 'allow',//允许新窗口被创建
overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
...base,
...h5Win,
}
}
}
if (details.url.indexOf('/ide') > -1) {
return {
action: 'allow',//允许新窗口被创建
overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
...base,
...otherWin,
}
}
}
if (details.url.indexOf('/h5_plus') > -1) {
return {
action: 'allow',//允许新窗口被创建
overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
...base,
width: 1500,
height: 860
}
}
}
return {
action: 'allow',//允许新窗口被创建
overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
...base,
...otherWin,
}
}
})
对于网站打包的配置 electron
文档上介绍的很详细, 这里我就不一一介绍了, 大家可以在 github
上参考学习:
在线地址:https://webdesk.pigjs.com/builder
我亲自体验了一下, 使用起来还是相当方便的, 不需要写一行代码就可以将网站转化的桌面端软件, 以下是一些功能优缺点介绍.