欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

electron初接触

程序员文章站 2022-06-15 19:39:47
...

Electron

底层使用的是C++，JS运行框架基于谷歌的 V8 引擎和 Node.js 的开发框架，允许用 JavaScript 开发跨平台（Windows、Mac OS X 和 Linux）桌面应用。

Electron 就是 GitHub 推出的

技术文档

优点

  1. 热更新，轻量安装
  2. 跨端开发
  3. 入门门槛低
  4. 启动和运行不依赖于网络；
  5. 桌面应用可以即时启动，不需要等待资源从网络上下载完再启动；
  6. 桌面应用可以访问计算机的操作系统和硬件资源

传统web应用缺点

  1. 依赖于网络应用
  2. 大量数据加载会影响网页加载速度
  3. 前端不易处理大文件
  4. web安全策略，不可以直接访问本机硬件
  5. 某些浏览器不兼容的

出现的原因

  • 网速的提升，以及使用互联网的成本越来越低，使得相比其他通信渠道，互联网的使用人口基数正在大规模增加；
  • Web 浏览器受益于不断加剧的竞争， IE 之外的浏览器不断出现，这些浏览器拥有的新特性，继而让 Web 应用也可以利用这些新特性做出一些新的东西出来；
  • 相比像 C 和 C++ 这样的底层语言，简单易学的 HTML、CSS 和 JavaScript 降低了开发者制作 Web 应用的准入门槛；
  • 开源软件的崛起意味着分发和获取软件的成本大大降低，这就使得开发者哪怕只有有限的经验和经历，只要拥有对应的开发技能都可以构建他们自己的 Web 应用。

安装

npm install electron -g
// 安装完成之后查看版本
electron -v
// 卸载
npm uninstall electron
// 升级
npm update electron -g

hellow world

我们新建一个文件夹，初始化package.json

npm init -y

package.json文件:

{
  "name": "first",
  "version": "1.0.0",
  "description": "",
  "main": "first.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我们修改这个入口文件，我一般使用main.js来替换

{
  "name": "first",
  "version": "1.0.0",
  "description": "",
  "main": "main.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

main.js文件

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
  }
app.on('ready', createWindow)

app 对象包含一些方法，如 on 方法用于将事件绑定到事件函数中。

事件分为2种：

  1. 原生事件
  2. Web 事件

BrowserWindow是一个主窗口类。

同时，同一个目录下创建index.html 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
<h1>这是第一个Electron应用</h1>
</body>
</html>

运行

electron .

electron初接触

使用app添加事件

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
  }
app.on('ready', createWindow)
app.on('window-all-closed',()=>{
  console.log('窗口被关闭');
})

electron初接触

我们发现虽然触发了关闭事件，但是命令行没有完全退出，我们需要触发命令行退出。

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
  }
app.on('ready', createWindow)
app.on('window-all-closed',()=>{
  console.log('窗口被关闭');
   //非 Mac OS X 平台，直接调用 app.quit() 方法退出程序
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

打开detools

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
     // 打开控制台
    win.webContents.openDevTools()
  }
app.on('ready', createWindow)
app.on('window-all-closed',()=>{
  console.log('窗口被关闭');
   //非 Mac OS X 平台，直接调用 app.quit() 方法退出程序
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

electron初接触

更多……
  • 支持创建多窗口应用，而且每个窗口都有自己独立的 JavaScript 上下文；
  • 可以通过屏幕 API 整合桌面操作系统的特性，也就是说，使用 Web 技术编写的桌面应用的效果与使用本地编程语言（如 C++）开发的桌面应用的效果类似；
  • 支持获取计算机电源状态；
  • 支持阻止操作系统进入省电模式（对于演示文稿类应用非常有用）；
  • 支持创建托盘应用；
  • 支持创建菜单和菜单项；
  • 支持为应用增加全局键盘快捷键；
  • 支持通过应用更新来自动更新应用代码，也就是热更新技术；
  • 支持汇报程序崩溃；
  • 支持自定义 Dock 菜单项；
  • 支持操作系统通知；
  • 支持为应用创建启动安装器。
相关标签： 前端 electron

上一篇： Python基于wordcloud及jieba实现中国地图词云图

下一篇： object-c 学习笔记(一)基础术语

推荐阅读