Electron 框架小练习笔记

PieroPc

已于 2024-02-23 15:01:22 修改

阅读量295

点赞数 1

文章标签： electron 前端 javascript

于 2023-04-21 19:15:15 首次发布

本文链接：https://blog.csdn.net/PieroPc/article/details/130294655

版权

准备资料

简介 | Electron (electronjs.org)https://www.electronjs.org/zh/docs/latest/

1.环境搭建：

1.1 下载Node 和 Vscode

Node.js (nodejs.org)https://nodejs.org/en

Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/

1.2 下载最新版吧再装个中文插件。。。

Git - Downloading Package (git-scm.com)https://git-scm.com/download/win

1.3 再装个git 方便下载代码例如：

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

应用程序中安装 Electron 作为开发依赖：

npm install electron --save-dev

Electron Fiddle | Electron (electronjs.org)https://www.electronjs.org/fiddle

1.4 下载这个专用工具Electron 框架和VScode 差不多的

2. 写代码部分：

main.js

const { BrowserView, BrowserWindow, app } = require('electron')

app.whenReady().then(() => {
  let win = new BrowserWindow({ 
    width: 1024, 
    height: 830,
    title:'腾讯软件中心',
    icon:'favicon.ico',  // 增加图标
    autoHideMenuBar:true //隐藏系统菜单
    })
  win.on('closed', () => {
    win = null
  })

  const view = new BrowserView({
    webPreferences: {
      nodeIntegration: false
    }
  })

  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 1024, height: 830 })
  view.webContents.loadURL('https://pc.qq.com')
})

electron-quick-start\package.json

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^24.1.2"
  }
}

3.打包exe程序

npm install --save-dev @electron-forge/cli
npx electron-forge import  //打包
npm run make  // out目录

favicon.ico 复制到跟exe同一个目录

2.菜单切换页面

main.js

const { app, BrowserWindow, Menu, shell } = require('electron')
const path = require('path')
// 保持一个对于 window 对象的全局引用，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: 480,
    height: 360,
    // frame: false, // windows下隐藏导航栏
    // titleBarStyle: 'hidden', // mac下隐藏导航栏
    webPreferences: {
      nodeIntegration: true, // 是否启用Node integration. 5.0以后默认值为 false.
      contextIsolation: false, // 设置为false后，才能在渲染进程使用Electron API
      preload: path.join(__dirname, 'preload.js')
    }
  });
  // 加载 首页
  mainWindow.loadFile('index.html')
});


// 设置系统菜单
// 切换页面的函数
const sendMenuEvent = (url) => {
  mainWindow.webContents.send('change-view', url);
}
const menuTemplate = [
  {
    label: '首页',
    click: async () => {
      //在electron窗口内打开首页
      mainWindow.loadURL(path.join(__dirname, 'index.html'));
    }
  },
  {
    label: '切换页面',
    click: async () => {
      //在electron窗口内打开首页
      mainWindow.loadURL(path.join(__dirname, 'test.html'));
    }
  },
  {
    label: '打开百度',
    submenu: [
      {
          label: 'electron窗口内打开百度',
          click: async () => {
            //在electron窗口内打开百度
            sendMenuEvent('http://www.baidu.com');
          },
      }, 
      {
        label: '默认浏览器打开百度',
        click: async () => {
          //在默认浏览器打开新的窗口
          await shell.openExternal('http://www.baidu.com');
        },
      }
    ]
  }
]
const list = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(list);

preload.js

const { ipcRenderer } = require('electron')
// 在electron窗口内切换页面
if(window && window.process && window.process.type === 'renderer') {
  ipcRenderer.on('change-view', (event, url) => {
    window.location.href = url;
  });
}

index.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
  <title>首页</title>
</head>
<body>
  <h1>index.html 首页</h1>
  <a href="./test.html">test页面</a>
</body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test页面</title>
</head>
<body style="background-color: rgb(11, 184, 228);">
    <h1>test页面</h1>
    <a href="./index.html">返回首页</a>
</body>
</html>