Electron 初识-搭建一个简易桌面应用
Electron
快速入门
简介
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
应用的入口
在 Electron 中，入口是一个 JavaScript 脚本。不同于直接提供一个URL，你需要手动创建一个浏览器窗口，然后通过 API 加载 HTML 文件。你还可以监听窗口事件，决定何时让应用退出。
主进程
在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
渲染进程
由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
优势
- 效率高，桌面效果佳
- 可以访问操作系统层面的东西。
- 摆脱了不同浏览器之间的差异和版本的限制（浏览器的沙盒机制）。
劣势
- 窗口创建背景的问题，在html没有被加载完成前，窗口只用用背景色去填充，不能使用个性化的背景图案，这会造成首次加载的体验不好。
- 打包出来的APP太大，就是最简单的应用打包出来都有40多MB。
简单项目搭建
访问源码： https://gitee.com/ting-hui/electron-demo/tree/01-start-project/
安装node.js，npm
本地创建一个新文件夹
命令管理进入文件夹
初始化项目
DOS窗口使用
npm init初始化一个项目
初始化完成后会在文件夹中生成一个package.json的文件
修改package.json文件
package name: 项目名字叫啥
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址
keywirds： 项目关键字
author: 作者的名字
license: 发行项目需要的证书
安装Electron
全局安装
npm install -g electron，单独给每个要开发的应用安装时，需要进入到开发的应用文件夹中，运行npm install --save-dev electron命令，此处以给单个app安装为例，执行成功后会生成一个node_modules文件夹：
Electron应用开发程序示例
先创建项目入口文件
app.js，const { app, BrowserWindow } = require('electron') function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
}) // 并且为你的应用加载index.html
win.loadFile('index.html') // 打开开发者工具
win.webContents.openDevTools()
} // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow) //当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
}) // 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。 最后，创建准备展示的
index.html：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node
<script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
启动应用
会在桌面弹出框：
打包
electron-packager
- 安装
npm install -g elecron-packager
打包
直接DOM窗口执行命令打包：
electron-packager . HelloWorld --win --out=./out --arch=x64 --app-version=1.0.0 --electron-version=v9.0.4
package.json文件配置：
{
"name": "test-electron",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron index.js",
"package": "electron-packager . HelloWorld --win --out=./out --arch=x64 --app-version=1.0.0 --electron-version=v9.0.4"
},
"author": "dq",
"license": "ISC",
"devDependencies": {}
}
然后执行以下命令打包：
npm run-script package
命令参数
参数设置
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
及简打包：
electron-packager ./ --all参数 描述 备注 sourcedir 打包文件的目录位置 appname 当前应用构建名称 plateform 构建平台 可取的值有 darwin,linux,mas,win32out 打包文件输出文件夹位置 icon 打包文件的图标 electron-version electron的版本号 overwrite 覆盖原有的build 让新生成的包覆盖原来的包
Electron 打包问题
WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.npm ERR!npm ERR!
问题原因，电脑上没有Framework 4.5以上的版本或者Powershell 3以上的版本
Framework 可以控制台或者管家查看有没有
Powershell 可以win+R输入看看能不能唤醒控制台，有极个别会唤醒不了
可以去 C:\Windows\System32\WindowsPowerShell\v1.0 这个地址下看看有没有powershell.exe
有的话打开，然后输入指令：
Get-Host | Select-Object Version
查看版本号，通常win7自带的是2.0的，然后去升级一下
https://download.microsoft.com/download/E/7/6/E76850B8-DA6E-4FF5-8CCE-A24FC513FD16/Windows6.1-KB2506143-x64.msu
运行更新，更新完重启就可以了
Electron 初识-搭建一个简易桌面应用的更多相关文章
- Angularjs,WebAPI 搭建一个简易权限管理系统
Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...
- 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移
本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...
- express + mongodb 搭建一个简易网站 （四）
express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...
- express + mongodb 搭建一个简易网站 （三）
express + mongodb 搭建一个简易网站 (三) 前面已经实现了基本的网站功能,现在我们就开始开搞一个完整的网站,现在整个网站的UI就是下面的这个样子. 我们网站的样子就照着这个来吧. 1 ...
- express + mongodb 搭建一个简易网站(二)
express + mongodb 搭建一个简易网站 (二) 在搭建网站(一)中,实现了简单的路由功能,这离一个完整的网站还差的有点远,继续撸代码吧. 1.首先在根目录下新建一个views文件夹,用来 ...
- express + mongodb 搭建一个简易网站(一)
express + mongodb 搭建一个简易网站(一) 前言:后台使用node.js的express框架,数据库使用mongodb,模板使用ejs.大概就这些. 开始第一个简易网站之旅吧.... ...
- 如何搭建一个简易的 Web Terminal（一）
前言 在介绍本篇文章的时候,先说一下本篇文章的一些背景.笔者是基于公司的基础建设哆啦 A 梦(Doraemon)一些功能背景写的这篇文章,不了解.有兴趣的同学可以去 袋鼠云 的 github 下面了解 ...
- jquery+flask+keras+nsfw快速搭建一个简易鉴黄工具
1. demo 地址:http://www.huchengchun.com:8127/porn_classification 接口说明: 1. http://www.huchengchun.com:8 ...
- Node：使用express搭建一个简易的服务器
①安装node环境 在node.js官网下载LTS长期支持版本,然后傻瓜式安装 ②查看是否安装成功 打开cmd终端,输入node -v 有版本号,则安装成功.再输入npm -v 有版本号,则npm也安 ...
随机推荐
- Java实现 LeetCode 217 存在重复元素
217. 存在重复元素 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3 ...
- java实现第五届蓝桥杯武功秘籍
武功秘籍 小明到X山洞探险,捡到一本有破损的武功秘籍(2000多页!当然是伪造的).他注意到:书的第10页和第11页在同一张纸上,但第11页和第12页不在同一张纸上. 小明只想练习该书的第81页到第9 ...
- Linux用户管理命令useradd、passwd、who详解
创建用户命令useradd 命令useradd,所在路径为: 可以看到命令useradd的路径为:/usr/sbin/useradd,因此它的执行权限是root 命令的功能是创建一个新用户,例如:us ...
- Python接口自动化测试脚本-实现禅道登录
未来应用方向:UI自动化测试或接口自动化测试发现的Bug可自动录入禅道,带截图与相关报错信息. #!/usr/bin/env python # -*- coding: UTF-8 -*- '''=== ...
- mysql基础-新版5.7.10源码安装-记录(一)
0x01 MySQL 从 5.5 版本开始,通过 ./configure 进行编译配置方式已经被取消,取而代之的是 cmake 工具 引用一句话 cmake的重要特性之一是其独立于源码(out-of- ...
- Python如何绘制可视化图？给你一段代码，你能自己做出来吗
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 喜欢的朋友欢迎关注小编,除了分享技术文章之外还有很多福利 没有数据生成的图 ...
- Web应用中解决问题的方案步骤?
我们学一个东西,通常两个目的: - 为了解决现有的问题 - 为了解决将来可能会有的问题 所以,在学这些东西之前,先必须了解,它们是用来解决什么问题的. 在Web应用中,我们需要解决的问题可以归纳为三类 ...
- 纯 HTML/CSS 高仿 Win10 加载动画
自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了),自己想用就拿去用吧 转圈加载 在线演示 HTML: <div class="loading"> ...
- 一文搞懂GitLab安装部署及服务配置
GitLab安装部署 Git,GitHub,GitLab,这三个东东长得好像呀,都是个啥? Git是Linus Torvalds(如果不知道这位大神是谁,请出门左转,慢走不送~)为了帮助管理Linux ...
- MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新
MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新 关键代码: //发送数据通知 //from txwtech@163.com LRESULT CCommSampleDlg::O ...