【Electron】桌面应用开发启动直接打开一个网址或者浏览器打开一个网址

【Electron】桌面应用开发启动时直接打开一个网址或者跳转浏览器打开一个网址

前一篇有写过 Electron 桌面应用开发快速入门到打包Windows应用程序
但是现在需要程序打开的时候直接打开一个链接,在程序的窗口打开或者直接跳转浏览器打开

一、启动时直接打开一个网址

index.js(有些人用的main.js)

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('node:path')
 
const gotTheLock = app.requestSingleInstanceLock()
 
const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    title: "测试项目",
    icon: path.join(__dirname, 'icon.ico'),
    webPreferences: {
      webSecurity: false
    }
  })
 
  //隐藏顶部菜单
  Menu.setApplicationMenu(null)
  //设置网站url ‌例如打开 百度 的链接
  mainWindow.loadURL("https://www.baidu.com/")
}
 
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
if (!gotTheLock) {
  app.quit()
} else {
  app.whenReady().then(() => {
    createWindow()
 
    app.on('activate', () => {
      // 在 macOS 系统内, 如果没有已开启的应用窗口
      // 点击托盘图标时通常会重新创建一个新窗口
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
}
 
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

在这里插入图片描述

二、启动时跳转浏览器打开一个网址

index.js

const { shell } = require('electron') // 引入 Electron 的 shell 模块

function openLink(url) {
  shell.openExternal(url) // 使用 openExternal 方法打开链接
}

// 调用函数,‌例如打开 百度 的链接
openLink('https://www.baidu.com/')

如果在打包的时候遇到各种诡异的报错,可以参考以下文章:
【Electron】桌面应用开发electron-builder打包报错问题处理

Electron一个基于 Node.js 和 Chromium 的桌面应用程序开发框架,可以使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用程序。在本文中,我们将介绍如何使用 Python 和 Flask 结合 Electron 编写一个简单的桌面应用程序。 1. 安装 Electron 首先,我们需要安装 Electron。可以通过 npm 来安装它: ``` npm install electron --save-dev ``` 2. 创建 Electron 应用程序 接下来,我们需要创建一个基本的 Electron 应用程序。在项目根目录下创建一个名为 main.js 的文件,并添加以下代码: ``` const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') win.webContents.openDevTools() } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 这段代码创建了一个基本的窗口,加载了一个名为 index.html 的文件,并打开了开发者工具。 3. 创建 Flask 应用程序 然后,我们需要创建一个 Flask 应用程序。在项目根目录下创建一个名为 server.py 的文件,并添加以下代码: ``` from flask import Flask, jsonify app = Flask(__name__) @app.route('/api') def api(): return jsonify({'message': 'Hello, World!'}) if __name__ == '__main__': app.run(debug=True) ``` 这段代码创建了一个简单的 Flask 应用程序,具有一个名为 /api 的路由,返回了一个 JSON 响应。 4. 集成 Flask 应用程序 现在,我们需要将 Flask 应用程序集成到 Electron 应用程序中。在 main.js 文件中添加以下代码: ``` const { app, BrowserWindow } = require('electron') const path = require('path') const { spawn } = require('child_process') let flaskProcess = null const flaskPath = path.join(__dirname, 'server.py') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') win.webContents.openDevTools() } app.whenReady().then(() => { flaskProcess = spawn('python', [flaskPath]) createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('before-quit', () => { flaskProcess.kill() }) ``` 这段代码启动一个 Python 进程来运行 Flask 应用程序,并在应用程序关闭之前杀死该进程。 5. 发起请求 最后,我们需要在渲染进程中发起请求。在项目根目录下创建一个名为 index.html 的文件,并添加以下代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello, World!</title> </head> <body> <h1 id="message"></h1> <script> const { ipcRenderer } = require('electron') ipcRenderer.on('message', (event, message) => { document.getElementById('message').textContent = message }) fetch('http://localhost:5000/api') .then(response => response.json()) .then(data => { ipcRenderer.send('message', data.message) }) .catch(error => console.error(error)) </script> </body> </html> ``` 这段代码使用 IPC 通信来从 Python 进程接收消息,并使用 fetch API 发起一个请求来获取 Flask 应用程序的响应。 6. 运行应用程序 现在,我们可以通过运行以下命令来启动应用程序: ``` npm start ``` 这将同时启动 Electron 应用程序和 Flask 应用程序,并打开一个窗口,显示来自 Flask 应用程序的消息。 至此,我们已经成功地构建了一个使用 Python、Flask 和 Electron 框架的桌面应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值