学习之前请确保已经学习了 “1小时学会Node.js”

本套课程配套视频 “1小时学会ESM规范Electron”

Electron

     是一个使用 JS、HTML 和 CSS 构建桌面应用程序的跨平台框架

Electron 官方文档

     https://www.electronjs.org/zh/docs/latest/

Electron API

     https://www.electronjs.org/zh/docs/latest/api/app

初始化配置文件 package.json

     npm init -y

     {

       "type": "module",

       "name": "demo",

       "version": "1.0.0",

       "main": "main.js",

       "scripts": {

         "start": "electron ."

       },

       "keywords": [],

       "author": "",

       "license": "ISC",

       "description": ""

     }

项目下配置 .npmrc 文件 (electron_mirror 是 Electron 的镜像源)

     electron_mirror=https://npmmirror.com/mirrors/electron/

     注:

     虽然之前通过 npm config set registry https://registry.npmmirror.com/

     已全局配置了淘宝镜像源 (位置: C:\Users\David\.npmrc),

     但某些大型包(如: electron)仍会通过默认的官方源下载,所以需要配置对应镜像源

安装 electron

     npm i electron -D

     注

     -D 表示作为仅在开发时需要的依赖(devDependencies)安装到项目中,

     而不是项目运行时需要的依赖(dependencies)

新建 main.js

  import { app, BrowserWindow } from "electron"

  //创建窗口
  const createWindow = () => {
      const mainWindow = new BrowserWindow({
          width: 1300, //设置窗口宽度(单位:像素)
          height: 750, //设置窗口高度
          icon: "resource/images/code.ico", //设置窗口图标
          autoHideMenuBar:true, //隐藏菜单栏
          //resizable: false, //禁止调整窗口大小
          //x:0, //x表示窗口左上角的水平坐标(单位:像素)
          //y:0, //y表示窗口左上角的垂直坐标
      })

      mainWindow.loadURL("https://www.dengruicode.com") //加载指定的 url

      //当尝试打开新窗口时, 阻止默认行为, 在当前窗口加载 url
      mainWindow.webContents.setWindowOpenHandler(details =>{
          mainWindow.loadURL(details.url)
          return { action: 'deny' } //阻止默认行为
      })
  }

  //当应用准备就绪后创建窗口
  app.whenReady().then(() => {
      createWindow()
  })

运行项目

     npm start