electron的使用

这篇具有很好参考价值的文章主要介绍了electron的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

五、Electron 19

1、什么是 Electron

参见 PPT。

2、Electron 初探

2.1 常见的桌面GUI工具介绍

名称 语音 优点 缺点
QT C++ 跨平台、性能好、生态好 依赖多,程序包大
PyQT Python 底层集成度高、易上手 授权问题
WPF C# 类库丰富、扩展灵活 只支持Windows,程序包大
WinForm C# 性能好,组件丰富,易上手 只支持Windows,UI差
Swing Java 基于AWT,组件丰富 性能差,UI一般
NW.js JS 跨平台性好,界面美观 底层交互差、性能差,包大
Electron JS 相比NW发展更好 底层交互差、性能差,包大
CEF C++ 性能好,灵活集成,UI美观 占用资源多,包大
  • 底层依赖 + 调用:CEF、QT、Swing
  • UI美观:Electron(NW.js)、PyQT
  • 跨平台:Swing(JAVA)、PyQT(Python、C++)、Electron(前端)

技术是为业务服务的,选择合适的最重要!

2.2 桌面端设计与开发要点

1、UX/UI设计概念

**UX设计:**UX(User Experience)即用户体验,其核心是用户,体验指用户在使用产品以及与产品发生交互时出现的主观感受和需求满足。

UI设计:UI(User Interface)使用者界面,可以说是 UX 设计的一部分,其中重要的图形化或者可视化部分,都是由 UI 设计来完成的。

2、核心原则

简单易用。

3、通用原则

交互简单:上手就会,一看就懂

风格统一:菜单、导航、按钮反馈、颜色、预知提示

认知一致:名词、友好提示、划分信息、突出展示

4、桌面端设计

保持与PC端统一的风格设计与交互设计。

加入定制的菜单与专业操控设计。

减少资源加载。

2.3 初始化项目 + 项目依赖介绍

1、Electron 官网

https://www.electronjs.org/

2、初始化一个项目

felixlu electron $ npm init -y
npm i electron -D

3、配置启动脚本

在 package.json 里配置 npm 脚本:

{
  "scripts": {
    "start": "electron ."
  },
}

4、创建入口文件

  • 在项目根目录下创建文件 index.html:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron Demo</title>
</head>
<body>
  hello Electron
</body>
</html>
  • 在项目根目录下创建 index.js 文件,这是程序的入口文件:
const { app } = require('electron')

// 主进程
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

3、Electron 核心概念

3.1 Electron 主进程与渲染进程

**主进程:**启动项目时运行的 main.js 脚本就是我们说的主进程。在主进程运行的脚本可以以创建 Web 页面的形式展示 GUI。主进程只有一个

**渲染进程:**每个 Electron 的页面都在运行着自己的进程,这样的进程称之为渲染进程(基于Chromium的多进程结构)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AJGUKNht-1667203192497)(./images/image-20220622220437989.png)]

主进程使用 BrowserWindow 创建实例,主进程销毁后,对应的渲染进程回被终止。主进程与渲染进程通过 IPC 方式(事件驱动)进行通信。

3.2 主进程事件生命周期

main process modules/app/event:https://www.electronjs.org/zh/docs/latest/api/app

app.on('window-all-closed', () => {
  console.log('window-all-closed')
  // 对于 MacOS 系统 -> 关闭窗口时,不会直接推出应用
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('quit', () => {
  console.log('quit')
})

app.whenReady().then(() => {
  createWindow()
  // 在MacOS下,当全部窗口关闭,点击 dock 图标,窗口再次打开。
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

3.3 渲染进程如何使用 Node 模块

1、通过 webPreferences/nodeIntegration

const win = new BrowserWindow({
  width: 800,
  height: 400,
  webPreferences: {
  	nodeIntegration: true,
  	contextIsolation: false
  }
})
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron Demo</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <h1>
    hello Electron
  </h1>
  <div id="root">
    <p>electronVersion: {{electronVersion}}</p>
    <p>nodeVersion: {{nodeVersion}}</p>
    <p>chromeVersion: {{chromeVersion}}</p>
  </div>
  <script>
    // const path = require('path')
    // console.log(path)
    const app = Vue.createApp({
      data() {
        return {
          electronVersion: process.versions.electron,
          nodeVersion: process.versions.node,
          chromeVersion: process.versions.chrome
        }
      }
    })
    app.mount('#root')
  </script>
</body>
</html>

2、通过 webPreferences/preload 实现文章来源地址https://www.toymoban.com/news/detail-482664.html

const win = new BrowserWindow({
    width: 800,
    height: 400,
    webPreferences: {
      // 在启动应用时在渲染进程里预加载 js
      preload: path.join(__dirname, './preload-js/index.js')
    }
  })
// preload-js/index.js

// const { contextBridge } = require('electron')
// contextBridge.exposeInMainWorld('myAPI', {
//  desktop: true
// })

const { createApp } = require('vue')
window.addEventListener('load', () => {
  const app = createApp({
    data() {
      return {
        electronVersion: process.versions.electron,
        nodeVersion: process.versions.node,
        chromeVersion: process.versions.chrome
      }
    }
  })
  app.mount('#root')
})

到了这里,关于electron的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Electron-React18-MacOS桌面管理系统|electron27+react仿mac桌面

    基于 React18+Electron27+ArcoDesign 仿macOS桌面端系统框架 ElectronMacOS 。 electron-react-macOs 基于 electron27.x+vite4+react18+arcoDesign+zustand 等技术构建桌面版仿MacOs框架系统解决方案。支持 中英文/繁体、dark+light主题、桌面多层级路由、多窗口路由页面、动态换肤、Dock悬浮菜单 等功能。 Elec

    2024年02月05日
    浏览(34)
  • Electron桌面应用开发基础

    Electron 是一种基于 Chromium 和 Node.js 的开源框架,可以用于快速构建跨平台的桌面应用程序。与传统的桌面应用程序不同,Electron 应用程序使用 HTML、CSS 和 JavaScript 技术 栈来实现界面设计和业务逻辑,并且具有良好的跨平台性能和扩展性。 跨平台性:Electron 可以在 Windows、M

    2024年02月08日
    浏览(44)
  • electron桌面开发相关注意点

    electron的部署以及配置 如果使用的是pnpm,请先配置一下镜像,否则会安装失败的: 如果是npm,其实也一样的, 不过你也有另外一个选择: 添加 .npmrc文件,内容如下:

    2024年02月21日
    浏览(32)
  • 从零搭建vue+electron桌面应用

    1.全局下载electron 2.全局下载vue脚手架 3.创建vue项目(这里用的是vue2版本) 4.安装打包插件 首先进入项目目录 安装打包插件 5.安装electron-builder,安装后可以直接生成主进程的配置文件 6.在vue.config.js中添加以下配置 作完以上步骤之后,会在src根目录生成background.js,这个文件

    2024年02月17日
    浏览(40)
  • Electron 桌面应用开发从基础到进阶

    Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架,它使开发人员能够使用 Web 技术(HTML、CSS 和 JavaScript)构建跨平台的桌面应用程序。它已经被众多知名公司使用,例如 GitHub、Slack、Microsoft 等等。本文将介绍如何使用 Electron 开发桌面应用程序。 安装 Electron 在开

    2024年02月03日
    浏览(36)
  • vite + electron 构建前端桌面应用程序

    npm yarn 选择是否继续 项目名称 选择框架 选择项目语言 项目构建成功,根据提示进入项目目录,安装依赖 electron 官网:https://www.electronjs.org/zh/docs/latest/ vite-plugin-electron :https://github.com/electron-vite/vite-plugin-electron 安装依赖(electron 安装比较慢,耐心等待即可) 编写 Electron 入

    2024年02月06日
    浏览(52)
  • electron桌面应用开发——快速入门教程

    本文将介绍electron基本使用和构建electron+vite+vue3脚手架开发项目,带你快速入门。 Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用的框架。 通过将 Chromium 和 Node.js 嵌入到其二进制文件中,Electron 允许你维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平

    2024年01月17日
    浏览(75)
  • Electron-ChatGPT桌面端ChatGPT实例|electron25+vue3聊天AI模板EXE

    基于 electron25+vite4+vue3 仿制chatgpt客户端聊天模板 ElectronChatGPT 。 electron-chatgpt 使用最新桌面端技术 Electron25.x 结合 Vite4.x 全家桶技术开发跨端模仿ChatGPT智能聊天程序模板。支持 经典+分栏两种布局、暗黑+明亮主题模式,集成electron封装多窗口及通讯 功能。 编码工具:vscode 框架

    2024年02月08日
    浏览(42)
  • Vue3 Vite electron 开发桌面程序

    Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是 Chromium 浏览器内核和 Node.js 运行时环境。 Chromium 内核提供了现代浏览器的功能,

    2024年02月16日
    浏览(43)
  • 前端桌面应用开发实践:Electron入门指南

    随着互联网的快速发展,前端开发不再局限于网页应用,而是逐渐涉及到桌面应用的开发。Electron作为一种流行的前端桌面应用开发框架,为开发者提供了一种快速构建跨平台桌面应用的方式。本文将介绍Electron的基本概念和使用方法,并通过一个简单的示例来说明其开发实践

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包