1.烦人环境搭建:
Node.js (nodejs.org)https://nodejs.org/en
1.1 下载Node 18.16.0 LTS
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同一个目录
制作安装包就用winrar