Electron配置

最新推荐文章于 2024-05-30 15:37:35 发布

先知预判

最新推荐文章于 2024-05-30 15:37:35 发布

阅读量657

点赞数 1

分类专栏： Electron

本文链接：https://blog.csdn.net/weixin_50539818/article/details/114495313

版权

Electron 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

创建

简单创建

//首先在一个空的文件内，创建package.json文件
{
  "name": "electronl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": ".\\node_modules\\.bin\\electron .",
	"start": "chcp 65001 && npm test"
  },
  "author": "hanbo",
  "license": "ISC",
  "dependencies": {
    "electron": "^4.0.2"
  },
  "devDependencies": {
    "electron-prebuilt": "^1.4.13"
  }
}

//然后创建index.js
const { app, Menu ,BrowserWindow} = require('electron');
// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
let mainWindow = null;
//设置菜单
let dockMenu = Menu.buildFromTemplate([
    {
        label: '文件', click: function () {
            console.log('点击事件');
        }
    },
    {
        label: '编辑', submenu: [
            {label: '保存'},
            {label: '另存'}
        ]
    },
    {label: '帮助'}
]);
Menu.setApplicationMenu(dockMenu);
 
// 当所有窗口被关闭了，退出。
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: 800, height: 600,
        webPreferences: {
            nodeIntegrationInWorker: true//支持多线程
        }
    });
    // 加载应用的 index.html
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    // 打开开发工具
    mainWindow.openDevTools();
    // 当 window 被关闭，这个事件会被发出
    mainWindow.on('closed', function () {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 但这次不是。
        mainWindow = null;
    });
});

//然后创建index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>

npm install 在 npm run start

在vue中创建
安装 npm install electron

//创建主程序入口(main.js)和配置文件 package.json
const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
  width:800,
  height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
  win = new BrowserWindow(windowConfig);//创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //开启调试工具
  win.on('close',() => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

先知预判

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Electron配置

创建简单创建//首先在一个空的文件内，创建package.json文件{ "name": "electronl", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": ".\\node_modules\\.bin\\electron .", "start": "chcp 65001 && npm test" }, "author": "ha
复制链接

扫一扫