zoukankan      html  css  js  c++  java
  • Electron桌面程序入门研究

    最近提出个要求,研究基于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({
         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();
      }
    });
  • 相关阅读:
    Oracle EBS 技术顾问常用的PL/SQL工具
    ORACLE EBS 计划功能 理论整理
    Oracle SQL 空值排序(Nulls)
    Oracle数据库中表的四种连接方式讲解
    JVM学习笔记之CodeCache
    Java序列化的作用和反序列化
    Spring MVC framework深入分析之一总体分析
    SpringMVC 拦截器实现分析
    Spring MVC framework深入分析之三执行过程
    Ajax应用开发:实践者指南
  • 原文地址:https://www.cnblogs.com/bm20131123/p/15034148.html
Copyright © 2011-2022 走看看