Electron开发桌面应用(1)：环境准备、入门Demo搭建

来源：互联网发布：淘宝收货地址管理编辑：程序博客网时间：2024/05/17 00:18

介绍

Electron 是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。
具体介绍参考官方网站：
https://electronjs.org/

环境准备

nodejs 运行环境
nodejs安装，请参考：http://blog.csdn.net/ruyulin/article/details/78877597
electron 开发环境

npm install electron

入门demo

创建项目：

E:\NodeStu>mkdir demoE:\NodeStu>cd demoE:\NodeStu\demo>npm init -yWrote to E:\NodeStu\demo\package.json:{  "name": "demo",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

添加依赖：

E:\NodeStu\demo>npm install electron -S> electron@1.7.10 postinstall E:\NodeStu\demo\node_modules\electron> node install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.npm WARN demo@1.0.0 No descriptionnpm WARN demo@1.0.0 No repository field.+ electron@1.7.10added 152 packages in 10.059sE:\NodeStu\demo>

修改：package.json

{  "name": "demo",  "version": "1.0.0",  "description": "",  "main": "main.js",  "scripts": {    "start": "electron ."  },  "keywords": [],  "author": "",  "license": "ISC",  "dependencies": {    "electron": "^1.7.10"  }}

新建：main.js

const electron = require('electron');const {app, BrowserWindow} = require('electron');const path = require('path');const url = require('url');let mainWindow;function createWindow () {    // Create the browser window.    mainWindow = new BrowserWindow({        width: 1024,         height: 640,        transparent: false,        frame: true,        resizable : true //固定大小    });    const URL = url.format({        pathname: path.join(__dirname, 'index.html'),        protocol: 'file:',        slashes: true      })    mainWindow.loadURL(URL);    console.log(URL);    mainWindow.openDevTools()    mainWindow.on('closed', function () {      mainWindow = null;    });}app.on('ready', createWindow);// Quit when all windows are closed.app.on('window-all-closed', function () {  // On OS X it is common for applications and their menu bar  // to stay active until the user quits explicitly with Cmd + Q  if (process.platform !== 'darwin') {    app.quit();  }});app.on('activate', function () {  // On OS X it's common to re-create a window in the app when the  // dock icon is clicked and there are no other windows open.  if (mainWindow === null) {    createWindow();  }});

新建：index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>    hello!</body></html>

命令测试启动项目：

E:\NodeStu\demo>npm installnpm WARN demo@1.0.0 No descriptionnpm WARN demo@1.0.0 No repository field.up to date in 0.639sE:\NodeStu\demo>npm start> demo@1.0.0 start E:\NodeStu\demo> electron .file:///E:\NodeStu\demo\index.htmlE:\NodeStu\demo>

启动成功：
这里写图片描述

electron demo下载地址：
https://gitee.com/ruyulin/electronDemo

其他配置

配置启动logo：

const electron = require('electron');const {app, BrowserWindow} = require('electron');const path = require('path');const url = require('url');let mainWindow;function createWindow () {    var ico = path.join(__dirname, 'img', 'logo.png');    // Create the browser window.    mainWindow = new BrowserWindow({        width: 1024,         height: 640,        transparent: false,        frame: true,        icon: ico,         resizable : true //固定大小    });    const URL = url.format({      pathname: path.join(__dirname, 'index.html'),        protocol: 'file:',        slashes: true      })    mainWindow.loadURL(URL);    console.log(URL);    mainWindow.openDevTools()    mainWindow.on('closed', function () {      mainWindow = null;    });}app.on('ready', createWindow);// Quit when all windows are closed.app.on('window-all-closed', function () {  // On OS X it is common for applications and their menu bar  // to stay active until the user quits explicitly with Cmd + Q  if (process.platform !== 'darwin') {    app.quit();  }});app.on('activate', function () {  // On OS X it's common to re-create a window in the app when the  // dock icon is clicked and there are no other windows open.  if (mainWindow === null) {    createWindow();  }});

启动后会有启动logo：

这里写图片描述

阅读全文

'); })();