Electron桌面应用
Electron桌面应用
可以使用js,css,html完成pc应用的跨平台开发,内置多种方法访问pc资源
1.创建应用
mkdir my-electron-app && cd my-electron-app
npm init
init
初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的,有几条规则需要遵循:
entry point
应为main.js
.author
与description
可为任意值,但对于应用打包是必填项。
将 electron
包安装到应用的开发依赖中。
npm install --save-dev electron
在 package.json
配置文件中的scripts
字段下增加一条start
命令:
{
“scripts”: {
“start”: “electron .”
}
}
程序的入口都是 main
文件。 这个文件控制了主进程,它运行在一个完整的Node.js环境中,负责控制您应用的生命周期,显示原生界面,执行特殊操作并管理渲染器进程
创建页面
1.应用创建窗口前,我们需要先创建加载进该窗口的内容
2.各个窗口显示的内容可以是本地HTML文件,也可以是一个远程url。
3.项目根目录下创建一个名为index.html
的文件:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</body>
</html>
主体文本中丢失了版本编号。 将使用 JavaScript 动态插入它们
窗口中打开页面
Electron模块:
app
模块,它控制应用程序的事件生命周期。BrowserWindow
模块,它创建和管理应用程序 窗口。
主进程运行着 Node.js,您可以在 main.js 文件头部将它们导入作为 CommonJS 模块:
const { app, BrowserWindow } = require('electron')
//添加一个createWindow()方法将index.html加载进一个新的browserWindow实例
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html')
}
//调用createWindow()函数来打开您的窗口。
app.whenReady().then(() => {createWindow()
})
//在 app 模块的 ready 事件被激发后才能创建浏览器窗口。
//可以通过使用 app.whenReady() API来监听此事件。
//在whenReady()成功后调用createWindow()。
应用程序窗口在每个OS下有不同的行为,Electron中开发者可以在app中实现这些约定。
一般可以使用 进程
全局的 platform
属性来专门为某些操作系统运行代码。
在Windows和Linux上,关闭所有窗口通常会完全退出一个应用程序。
监听 app
模块的 'window-all-closed'
事件。如果用户不是在 macOS(darwin
) 上运行程序,则调用 app.quit()
。
//退出,窗口关闭的监听
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
//macOS 应用通常即使在没有打开任何窗口的情况下也继续运行
//监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的,则调用 createWindow() 方法。
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
通过预加载脚本从渲染器访问Node.js
输出Electron的版本号和它的依赖项到web页面上,主进程通过Node的全局 process
对象访问这个信息, 然而,不能直接在主进程中编辑DOM,因为它无法访问渲染器 文档
上下文。 它们存在于完全不同的进程!
// 预加载脚本 在渲染器进程加载之前加载,并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})
//上面的代码访问 Node.js的 process.versions 对象,并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。
// include the Node.js 'path' module at the top of your file
const path = require('path')// modify your existing createWindow() function
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')//__dirname字符串指向当前正在执行脚本的路径 (在本例中,它指向你的项目的根文件夹)。//path.join API 将多个路径联结在一起,创建一个跨平台的路径字符串}// BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。//将此脚本附加到渲染器流程})win.loadFile('index.html')
}
// ...
将功能添加到网页内容
与网页内容的任何交互,想要将脚本添加到您的渲染器进程中。
由于渲染器运行在正常的 Web 环境中,因此您可以在 index.html
文件关闭 之前添加一个
<script src="./renderer.js"></script>
renderer.js
中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。例如使用 webpack
打包并最小化您的代码,或者使用 React 来管理您的用户界面。
应用创建步骤
- 启动了一个Node.js程序,并将Electron添加为依赖。
- 创建了一个
main.js
脚本来运行我们的主要进程,它控制我们的应用程序 并且在 Node.js 环境中运行。 在此脚本中, 我们使用 Electron 的app
和BrowserWindow
模块来创建一个浏览器窗口,在一个单独的进程(渲染器)中显示网页内容。 - 为了访问渲染器中的Node.js的某些功能,我们在
BrowserWindow
的构造函数上附加了一个预加载脚本。
打包分发应用程序
//将 Electron Forge 添加到您应用的开发依赖中,并使用其"import"命令设置 Forge 的脚手架:
npm install --save-dev @electron-forge/cli
npx electron-forge import//使用 Forge 的 make 命令来创建可分发的应用程序:
npm run make//Electron-forge 会创建 out 文件夹,软件包在那里:
electron下载总失败
使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
:
npm install -g cnpm --registry=https://registry.npmmirror.com我在构建一个vue项目时,npm install 卡住不动,卡住的地方控制台信息是reify:rxjs: timing reifyNode:node_modules/listr/node_modules/rxjs
1
原因:文件缓存问题或镜像仓库网络问题解决方法:
1.删除项目中的node_modules文件夹和package-lock.json;
在控制台执行下面命令
// 设置淘宝镜像
npm config set registry https://registry.npm.taobao.org // 查看配置是否成功
npm config get registry // 重新执行 npm install
npm install2.//先运行npm install -g cnpm --registry=https://registry.npmmirror.com
//再运行cnpm install --save-dev electron
结尾
main.js是应用程序的主进程,运行在nodejs环境,可以访问pc上的各种资源(本地文件,菜单,系统对话框等;负责创建和管理程序的窗口。
每个程序窗口都是一个html页面;chrome也有一个主进程,每个打开的页面都是一个子进程,electron中每个打开窗口都是一个渲染器进程。
preload是预加载脚本,在渲染器进程加载前加载;可以访问渲染器全局环境(window,document对象),也可以访问nodejs环境;类似chrome插件。
render是渲染器进程脚本,运行在web环境。
自己写的劣质dom链接
Electron桌面应用相关推荐
- electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
electron 桌面程序 by Carol-Theodor Pelu 通过Carol-Theodor Pelu 如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How ...
- 怎么把html封装成桌面应用,如何将一个现有的Vue网页项目封装成electron桌面应用...
需求缘由 开发了很久的网页项目,领导突然想变成桌面应用,又要重写代码?no,no,no.不可能的.重写代码吃力不讨好,浪费时间,浪费精力.那么我们该怎么办呢? 幸好,electron是如此神奇,它提供 ...
- 如何将一个现有的Vue网页项目封装成electron桌面应用(转载)
简介 需求缘由 基础 步骤 总结 参考内容 需求缘由 开发了很久的网页项目,领导突然想变成桌面应用,又要重写代码?no,no,no.不可能的.重写代码吃力不讨好,浪费时间,浪费精力.那么我们该怎么办呢 ...
- 如何使用Vue开发Electron桌面程序
目录 一.Electron介绍 二.项目搭建 1. 使用 vue cli 创建vue项目 2. 安装插件 vue-cli-plugin-electron-builder 编辑 三.开发总结 1. 配 ...
- Electron桌面项目-解决throw new Error('Electron failed to install correctly, please delete node_modules..
安装这个网站走完安装部署步骤 创建electron桌面项目代码等结构参照以下链接github 一开始按照网上进行操作,最后会报错,无法执行,直接抛出--throw new Error('Electro ...
- Electron桌面App测试框架Spectron VS Puppeteer
Electron桌面App测试框架Spectron VS Puppeteer 前言 Electron Spectron 介绍 试用 试用评价 Puppeteer 介绍 试用 试用评价 总结 前言 根据 ...
- electron 桌面端业务中的小结(坑)
文章目录 简介 安装electron依赖 本地数据库选择 indexedDB 封装的库 SQLite Lowdb electron-store electron-json-storage-alt.el ...
- 用 Vue 建立一个简单的 electron 桌面应用
2019独角兽企业重金招聘Python工程师标准>>> 1. electron简介 2. 工具介绍 3. 实践效果,步骤 1)一个简单的 Electron 桌面应用都是冲 Hello ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
最新文章
- python做商品推荐系统_一种商品智能推荐系统的设计的制作方法
- 4_Tensorflow框架的使用(20181217-)
- Linux运维之网络运维
- 【IT资讯】编程语言面临重新洗牌,这六种要凉凉
- Openstack 与VMware 不同CPU迁移原理
- Silverlight实例教程 - Out of Browser的Debug和Notifications窗口
- 计算机的特点 分类及其应用,2016计算机知识:计算机的特点、分类及其应用(1)...
- SSIA的完整形式是什么?
- [Linux] linux服务器主机性能、空间监控脚本
- couchdb 安装_如何在Ubuntu上安装CouchDB –分步指南
- kvm虚拟化学习笔记(二)之linux kvm虚拟机安装
- javascript开发植物大战僵尸网页版游戏源代码下载
- docker 安装wiki.js 和wekan
- 浏览器打开163邮箱提示“登录环境异常,暂时无法登录”?可能是电脑在念旧……(NET::ERR_CERT_DATE_INVALID)
- (个人翻译)Scrivener交互式手册中文版FowWindows 03基础操作
- Report ZD600PSR028_1
- 2.Hadoop 生态圈及核心组件简介
- 利用手机工具教你快速完成英语翻译在线翻译中文
- 基于L298N的电机驱动电路
- Everything Is Generated In Equal Probability HDU-6595 期望DP
热门文章
- 简明 CSS2.1 参考手册
- 二次型(Quadratic Form)
- 使用describe()查看catering_sale.xls数据的基本情况,通过箱式图检测出catering_sale.xls中的异常值
- PHP(2):PHP读取MS Sql Server 2014数据库数据
- SREcon大会预告 | 百度运维专家对智能故障诊断的思考
- 宅男必备:iStripper for Mac(桌面上的跳舞女郎表
- 深入理解双亲委托机制
- 中国科学院大学计算机学院夏令营,2019年中国科学院大学生数学夏令营招募通知...
- iOS Mac小白必备的基本操作
- 安装完Ubuntu16.04后要做的事