利用Electron打开各项目的桌面程序

1.打开cmd 输入 node -v ,npm -v查看是否安装了相应的环境,如果没有请自行安装 注意electron与node版本间存在关系 最好安装node在 v12…0.0以上吧
(升级了node后可能会影响以前的项目运行跟打包,须逐一更新各项目中低版本的依赖包)
2.npm install -g @electron-forge/cli 全局安装

3.npx electron-forge import,electron-forge是一个脚手架程序, 它可以帮我们快速构建一个electron应用

4.创建项目 npx create-electron-app my-app,执行后生成的结构如下图
在这里插入图片描述
package.json中main的指向就是入口文件的路径
在这里插入图片描述

5.运行项目 npm start

6.打包项目 npm run make
打包完成,自动生一个out文件
在这里插入图片描述
以下代码是写在入口文件 index.js中的

const { app, BrowserWindow } = require('electron');
const path = require('path');
 
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}
 // 隐藏菜单栏
 const electron = require('electron')
 const Menu = electron.Menu
 Menu.setApplicationMenu(null)
 
const { globalShortcut } = require('electron')
 
// 创建一个窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });
  // 初始化窗口最大
  mainWindow.maximize()
  mainWindow.show()
   
  // 通过url引入外部网址
  mainWindow.loadURL('https://www.baidu.com/')
 
 
  // 注册打开开发者工具的快捷键
  globalShortcut.register('Ctrl+Shift+b', function(){
    mainWindow.webContents.openDevTools();
  });
};
 
app.on('ready', createWindow);
 
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值