Electron搭建一个桌面应用

2022/1/24 23:34:26

编程Tag： js Electron let 搭建 APP index 桌面 win

本文主要是介绍Electron搭建一个桌面应用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在安装Electron的时候，因为访问的是国外的IP，所以很容安装失败，需要设置访问国内的Electron镜像：yarn config set ELECTRON_MIRROR http://cdn.npm.taobao.org/dist/electron/

安装ELectron：yarn add electron --dev --platform=win64

在package.json文件中设置：

{
  "name": "electron",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "electron ./index.js"
  },
  "devDependencies": {
    "electron": "^16.0.7"
  }
}

然后在项目目录下创建index.js和index.html：

index.html：

<!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">
    <title>electron</title>
</head>
<body>
    electron is 桌面应用
</body>
</html>

index.js:

let electron = require('electron');
let app = electron.app;
let BrowserWindow = electron.BrowserWindow;
let win = null;

app.on('ready',()=>{
    win = new BrowserWindow({
        webPreferences:{
            nodeIntegration:true
        }
    });

    win.loadFile('index.html');
    win.on('closed',()=>{
        win=null;
    })
})

app.on('window-all-closed',()=>{
    app.quit();
})

执行命令：yarn start:
效果如图：

这篇关于Electron搭建一个桌面应用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Electron搭建一个桌面应用

相关编程文章