Electron 框架 做一个套用软件管理器

1.烦人环境搭建

Node.js (nodejs.org)icon-default.png?t=N3I4https://nodejs.org/en

1.1 下载Node 18.16.0 LTS

Visual Studio Code - Code Editing. Redefinedicon-default.png?t=N3I4https://code.visualstudio.com/

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

Git - Downloading Package (git-scm.com)icon-default.png?t=N3I4https://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)icon-default.png?t=N3I4https://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同一个目录

 制作安装包就用winrar

 

 

 

猜你喜欢

转载自blog.csdn.net/PieroPc/article/details/130294655