首页 > 其他 > 详细

Electron桌面程序入门研究

时间:2021-07-20 15:20:33      阅读:24      评论:0      收藏:0      [点我收藏+]

最近提出个要求,研究基于js,html,css的前端Electron桌面程序,说干就干 ,马上行动,研究了两天,才终于将思路理清。。。这里采用了最简单的方法--脚手架

1.打开cmd 输入 node -v ,npm -v查看是否安装了相应的环境,如果没有请自行安装 注意electron与node版本间存在关系 最好安装node在 v12..0.0以上吧

2.npm install -g @electron-forge/cli 全局安装

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

4.创建项目 npx create-electron-app my-app

5.运行项目  npm start

6.打包项目 npm run make

 

下面附上最近按要求开发的一个main.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();
  }
});

 

Electron桌面程序入门研究

原文:https://www.cnblogs.com/bm20131123/p/15034148.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!