首页 > 其他分享 >Electron初体验

Electron初体验

时间:2024-08-21 13:15:46浏览次数:6  
标签:Node 初体验 渲染 Process js Electron 进程

为什么使用electron

最近准备开发一个国产麒麟系统上的桌面程序,主要完成Linux命令的可视化,而electron作为目前最活跃的跨平台桌面应用程序的框架之一,它可以使用网页技术(如 HTML、CSS 和 JavaScript)来创建桌面应用程序,同时利用 Node.js 的强大能力来访问操作系统底层功能,可以充分利用前端社区与Node.js的各种技术栈实现强大的功能。

与操作系统交互

Electron 的架构主要分为三个核心部分:主进程(Main Process)、渲染进程(Renderer Process) 以及 预加载脚本(Preload Script)。

1. 主进程(Main Process)

  • 功能:主进程是 Electron 应用程序的入口点,控制应用程序的生命周期。它运行 Node.js 环境下的 JavaScript 代码,并负责创建和管理所有的渲染进程(即应用的窗口)。

2. 渲染进程(Renderer Process)

  • 功能:渲染进程是每个应用窗口的独立进程,它运行在 Chromium 中,并负责显示用户界面(UI)。渲染进程执行的代码是 Web 技术(HTML、CSS、JavaScript)。

3. 预加载脚本(Preload Script)

  • 功能:预加载脚本在渲染进程加载网页内容之前执行,运行在隔离的上下文中。它可以通过桥接方式将 Node.js API 暴露给渲染进程,同时仍然保证安全性。

electron实践

命令可视化工具的总体架构如下

后台UI: vue-element-admin

后台Server: Golang

客户端UI: vue-element-admin

客户端操作: node.js

效果图

 

标签:Node,初体验,渲染,Process,js,Electron,进程
From: https://www.cnblogs.com/chenyishi/p/18371237

相关文章

  • electron 官网速通
    前言:参考Electron中文网。核心知识点:有哪些进程,进程之间的通信,electronAPI分类及怎么调用。一、快速开始1.新建一个my-electron的文件夹。2.运行npminit创建package.json文件。3.填写author和description字段,应用打包必须。4.运行npminstall--save-......
  • 清除 Electron 中的缓存数据
    Electron将其缓存存储在以下文件夹中:window:C:\Users<user>\AppData\Roaming<yourAppName>\CacheLinux:/home//.config//Cache操作系统:/Users//Library/ApplicationSupport//Cacheletcache=app.getPath('cache');//获取缓存的路径constcachePath=path.......
  • 从质疑到相见恨晚,合宙Air780EP智能照明初体验
    最近,老板接到一个大订单,让我开发一款智能照明灯的项目。 为了让产品更具特色,要求添加4G联网功能,并且能够根据环境光的颜色和亮度自动调整照明设备的色温和亮度,使光线更加舒适自然。老板特别交代项目紧急,要我尽快完成开发。我心里有些担大梁的期待,又有些赶时间的无奈。身为打......
  • electron-forge通过Squirrel.Windows打包导致的asar文件过大的解决方案
    环境我的Eectron环境如下:"@electron-forge/cli":"^7.1.0","@electron-forge/maker-deb":"^7.1.0","@electron-forge/maker-rpm":"^7.1.0","@electron-forge/maker-squirrel":"^7.1.0",&q......
  • Containerd初体验
    一、Containerd概述1.什么是Containerd        Containerd(containerDaemon)是一个开源的容器运行时,它提供了一种标准化的方式来管理容器的生命周期。该项目最初是由Docker开发团队创建的,并在后来成为一个独立的项目,被纳入了cloudNativecomputingFoundation(......
  • Electron 的contextBridge
    contextBridge是Electron框架中用于在渲染器进程(通常是Web页面)和主进程之间安全地暴露API的一种方式。它允许开发者在保持主进程和渲染器进程之间清晰分离的同时,从主进程向渲染器进程安全地传递方法和属性。这是通过创建一个单向的、只能从主进程到渲染器进程的桥接......
  • vue初体验-引入vue,以及实现双向绑定
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......
  • electron 镜像
    解压node-v20.15.1-linux-x64.tar.gz到/home/cnki/vm;;环境变量~/.bashrcexportNODE_HOME=/home/cnki/vm/node-v20.15.1-linux-x64exportPATH=$NODE_HOME/bin:$PATH;;npmnpmconfigsetregistryhttp://mirrors.cloud.tencent.com/npm/electron(x64,arm)修改.......
  • Electron项目
    ​ 这个项目的一个亮点就是他把我们常用的一些需求我都进行了一些落地实现,因为国内资源还是挺少的,大家自学electron的话可能只能去看文档,看文档又get不到一些重点。就比如说像electron打包就没有实际的教程,我是综合了官方文档和stackoverflow里面的一些回答给了一个可行的方案。......
  • Electron项目
    ​ 这个项目的一个亮点就是他把我们常用的一些需求我都进行了一些落地实现,因为国内资源还是挺少的,大家自学electron的话可能只能去看文档,看文档又get不到一些重点。就比如说像electron打包就没有实际的教程,我是综合了官方文档和stackoverflow里面的一些回答给了一个可行的方案。......