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
  1. 安装
npm install -g elecron-packager

  1. 打包

    直接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

  2. 命令参数

    参数设置

    electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

    及简打包：

    electron-packager ./ --all
    参数 描述 备注
    sourcedir 打包文件的目录位置
    appname 当前应用构建名称
    plateform 构建平台 可取的值有 darwin, linux, mas, win32
    out 打包文件输出文件夹位置
    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 初识-搭建一个简易桌面应用的更多相关文章

  1. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  2. 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移

    本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...

  3. express + mongodb 搭建一个简易网站 （四）

    express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...

  4. express + mongodb 搭建一个简易网站 （三）

    express + mongodb 搭建一个简易网站 (三) 前面已经实现了基本的网站功能,现在我们就开始开搞一个完整的网站,现在整个网站的UI就是下面的这个样子. 我们网站的样子就照着这个来吧. 1 ...

  5. express + mongodb 搭建一个简易网站(二)

    express + mongodb 搭建一个简易网站 (二) 在搭建网站(一)中,实现了简单的路由功能,这离一个完整的网站还差的有点远,继续撸代码吧. 1.首先在根目录下新建一个views文件夹,用来 ...

  6. express + mongodb 搭建一个简易网站(一)

    express + mongodb 搭建一个简易网站(一) 前言:后台使用node.js的express框架,数据库使用mongodb,模板使用ejs.大概就这些. 开始第一个简易网站之旅吧.... ...

  7. 如何搭建一个简易的 Web Terminal（一）

    前言 在介绍本篇文章的时候,先说一下本篇文章的一些背景.笔者是基于公司的基础建设哆啦 A 梦(Doraemon)一些功能背景写的这篇文章,不了解.有兴趣的同学可以去 袋鼠云 的 github 下面了解 ...

  8. jquery+flask+keras+nsfw快速搭建一个简易鉴黄工具

    1. demo 地址:http://www.huchengchun.com:8127/porn_classification 接口说明: 1. http://www.huchengchun.com:8 ...

  9. Node：使用express搭建一个简易的服务器

    ①安装node环境 在node.js官网下载LTS长期支持版本,然后傻瓜式安装 ②查看是否安装成功 打开cmd终端,输入node -v 有版本号,则安装成功.再输入npm -v 有版本号,则npm也安 ...

随机推荐

  1. Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓

    算法提高 现代诗如蚯蚓 时间限制:1.0s 内存限制:256.0MB 问题描述 现代诗如蚯蚓 断成好几截都不会死 字符串断成好几截 有可能完全一样 请编写程序 输入字符串 输出该字符串最多能断成多少截 ...

  2. Java实现蓝桥杯互补二元组

    分三处 1.当差值为0并且只有一个二元组就不管他 2.当差值为0并且二元组个数>=1加上他并减去它本身 3.当差值为存在并且不为0时直接加上他 因为都计算了两次,所以最后ans/2 用了map的 ...

  3. Java实现无向图的欧拉回路判断问题

    1 问题描述 Problem Description 欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input 测试输入包含若干测试 ...

  4. Python之Flask框架二

    今天接着上一篇继续写一篇关于flask的随笔. 本文大纲: 1.获取请求参数 2.一个函数处理多个请求方式 3.重定向 4.错误响应 5.全局错误处理 6.返回json格式数据 7.自定义返回内容状态 ...

  5. MySQL死锁及解决方案

    一.MySQL锁类型 1. MySQL常用存储引擎的锁机制 MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-level locking)或表 ...

  6. python3 驱动自动安装脚本

    from pywinauto.application import Applicationimport osimport timeos.system('start C:/Users/Administr ...

  7. MIT6.S081/6.828 实验1：Lab Unix Utilities

    Mit6.828/6.S081 fall 2019的Lab1是Unix utilities,主要内容为利用xv6的系统调用实现sleep.pingpong.primes.find和xargs等工具.本 ...

  8. 【Java】利用反射执行Spring容器Bean指定的方法，支持多种参数自动调用

    目录 使用情景 目的 实现方式 前提: 思路 核心类 测试方法 源码分享 使用情景 将定时任务录入数据库(这样做的好处是定时任务可视化,也可以动态修改各个任务的执行时间),通过反射执行对应的方法: 配 ...

  9. AJAX的GET请求、POST请求

    感谢:链接(视频讲解很详细) AJAX(Asynchronous Javascript and XML):异步的JavaScript和XML(不需要刷新网页就可以更新网页数据) XML:百度百科 是一 ...

  10. 检查*.ldf为何这么大

    testdb,只是个测试用文件,备份时突然发现*.ldf怎么这么大,当硬盘不要花银子买啊......--可随意删除...,有空再检查,累了休息... 如批量生成数据.或导入那个来自MySQL的Empl ...