electron 订阅
2014年7月,名为“电子”(Electron)的小型卫星专用运载火箭。 [1]  由新西兰政府和硅谷共同赞助的火箭实验室(Rocket Lab)宣布成功研制。 展开全文
2014年7月,名为“电子”(Electron)的小型卫星专用运载火箭。 [1]  由新西兰政府和硅谷共同赞助的火箭实验室(Rocket Lab)宣布成功研制。
信息
18m
制造商
火箭实验室(Rocket Lab)
特    点
小型卫星专用运载火箭
重    量
大于10t
中文名
电子
直    径
1m
发射场
新西兰玛希亚半岛的私有发射场
外文名
Electron
Electron性能数据
“电子”火箭是一种碳复合材料火箭,低地球轨道运载能力为110kg。采用液体燃料发动机,推力约32000磅。 火箭高18m,直径1m,重量大于10t。
收起全文
精华内容
下载资源
问答
  • Electron

    千次阅读 2019-04-07 18:28:02
    Electron 如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。 一...

    Electron

    如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

    一、介绍

    1. Web 技术
      Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
    2. 开源
      Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。
    3. 跨平台
      Electron 兼容 Mac, Windows 和 Linux, 它构建的应用可在这三个操作系统上面运行。

    二、入门

    1. Electron的API
      Electron API
    2. Electron Fiddle
      Electron Fiddle 最简单的 Electron 入门方式。

      Electron Fiddle 让您可以创建和进行小型 Electron 实验。它会在打开后用一个快速启动模板迎接你 - 更改一些东西,选择你想要用以运行它的 Electron 版本,随意玩耍。然后,将您的 Fiddle 保存为一个 GitHub Gist 或保存到一个本地文件夹。一旦将其推送到 GitHub ,任何人都可以通过仅仅在地址栏中输入它来快速尝试您的 Fiddle 。

    3. Electron Forge
      Electron Forge

      The command line interface for ambitious Electron applications

      	npm install -g electron-forge
      	
      	# create a new project
      	electron-forge init my-new-project
      	cd my-new-project
      	electron-forge start
      
    4. 快速启动
      electron-quick-start
      # 克隆示例项目的仓库
      $ git clone https://github.com/electron/electron-quick-start
      
      # 进入这个仓库
      $ cd electron-quick-start
      
      # 安装依赖并运行
      $ npm install && npm start
      
    5. Electron-vue
      Electron-vue

      该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。

    三、项目实战

    1、electron-quick-start
    1. clone 之后 npm i 或者 yarn
    2. npm start 或者 electron .
    3. 代码
    //主进程
    const {app, BrowserWindow} = require('electron')	//引入
    let mainWindow										//定义窗口的变量名
    function createWindow () {							//创建窗口函数
      mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true	//是否完整的支持 node. 默认值为true. (有坑)
        }
      })
      mainWindow.loadFile('index.html')		//加载页面,可以是本地页面,也可以是网页链接
      //mainWindow.loadURL('https://www.baidu.com');
      mainWindow.on('closed', function () {	//关闭时释放变量
        mainWindow = null
      })
    }
    app.on('ready', createWindow)			//app ready事件
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
    })
    app.on('activate', function () {
      if (mainWindow === null) createWindow()
    })
    
    2、electron-vue
    1. vue init simulatedgreg/electron-vue my-project
    2. yarn
    3. yarn run dev
      electron-vue
    3、pddcjdz

    入口文件 main.js(主进程)

    mainWindow = new BrowserWindow({
        width: 1300,
        height: 800,
        webPreferences: {
          //是否完整的支持 node. 默认值为true  嵌入页面的话某些情况 需要关闭nodeIntegeration来兼容web资源的依赖加载。
          nodeIntegration: false,	
          //当设置为 false, 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的
          webSecurity: false,		
          //允许一个 https 页面运行 http url 里的资源,包括 JavaScript, CSS 或 plugins.
          allowRunningInsecureContent: true,	
          //在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。
          preload: path.resolve(path.join(__dirname, './src/preload.js'))
        }
      })
    

    入口中引入的脚本文件 preload.js

    const electron = require('electron')		//引入electron
    const request = require('superagent');		//引入superagent
    // DOM变异事件 https://developer.mozilla.org/zh-CN/docs/Web/Events#DOM%E5%8F%98%E5%BC%82%E4%BA%8B%E4%BB%B6
    document.addEventListener('DOMNodeInserted', (event) => {	
        window.cjdz = {
            request,	//把 爬虫 request 和 electron暴露出去。
            electron,
            version: 1.0
        }
    });
    //如果 nodeIntegration 值为true的话,是可以不用把electron暴露出去的,后面在页面中可以直接 使用 require('electron')来获取electron,但是为true的话代表使用electron集成的node,会和其他的一些地方有冲突; 如果为false的话,就需要把electron暴露出去,通过 window.把它找出来。
    
    4、开发

    一个electron项目只要一个主进程(main.js)
    可以有多个渲染进程
    electron使用Chromium来展示web页面,每个页面运行在自己的渲染进程中。
    正常项目开发即可。

    四、打包

    1、electron-packager
    electron-packager
    2、electron-builder

    A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box.
    一个完整的解决方案,可以为macOS,Windows和Linux打包并构建一个可供分发的 Electron,Proton Native 或Muon应用程序,并提供开箱即用的“自动更新”支持。

    electron-builder比electron-packager有更丰富的的功能,支持更多的平台,同时也支持了自动更新。除了这几点之外,由electron-builder打出的包更为轻量,并且可以打包出不暴露源码的setup安装程序。

    electron-builder
    electron-builder(中文)
    打包一般 是:–mac(Mac)、–x64(window64)、–ia32(window32),Linux一般比较少:–linux;

    "build": {
      "productName": "my-project",	//打包名
      "appId": "org.simulatedgreg.electron-vue",	//appID
      "directories": {
        "output": "build"			//输出目录
      },
      "files": [					//打包文件目录
        "dist/electron*"
      ],
      "dmg": {						//Mac配置  macOS DMG选项
        "contents": [
          {
            "x": 410,
            "y": 150,
            "type": "link",
            "path": "/Applications"
          },
          {
            "x": 130,
            "y": 150,
            "type": "file"
          }
        ]
      },
      "mac": {		//与构建macOS目标的方式相关的选项。
        "icon": "build/icons/icon.icns"		//Mac图标
      },
      "win": {		//与构建Windows目标的方式相关的选项。
        "icon": "build/icons/icon.ico"		//windows图标
      },
      "linux": {	//与构建linux目标的方式相关的选项。
        "icon": "build/icons"				//Linux图标
      }
    }
    

    打包scripts

    "scripts": {
      "start": "electron .",
      "pack": "electron-builder --dir",
      "mac": "electron-builder --mac",
      "win64": "electron-builder --win --x64",
      "win32": "electron-builder --win --ia32"
    },
    

    yarn / npm run mac //会生成.dmg文件
    yarn / npm run win64 //生成.exe文件
    yarn / npm run win32 //生成.exe文件
    注意:
    win64和win32 生成.exe文件是同一个文件源,所以要打包之后标注一下然后在打包另一个系统。

    electron-builder的使用
    electron-builder的用法
    Building(构建参数):
    Command Line Interface (CLI)

    参数平台类型/参考
    –mac, -m, -o, --macosBuild for macOSarray
    –linux, -lBuild for Linuxarray
    –win, -w, --windowsBuild for Windowsarray
    –x64Build for x64 (64位安装包)boolean
    –ia32Build for ia32(32位安装包)boolean
    –armv7lBuild for armv7lboolean
    –arm64Build for arm64boolean
    –dirBuild unpacked dir. Useful to testboolean
    –prepackaged, --pd预打包应用程序的路径以可分发的格式打包
    –projectDir, --project项目目录的路径默认为当前工作目录
    –config, -c配置文件路径默认为electron-builder.yml

    发布配置
    Publish

    图标生成
    window和Mac图标生成

    其他需求

    1、点击关闭弹框确认

    在主进程中对 mainWindow 进行 close事件监听,不是closed。
    引用electron的 dialog

    const {dialog} = require('electron');
    mainWindow.on('close', (e) => {
      e.preventDefault(); //阻止事件默认行为
      let message = '退出后,如需使用需重新登录,请确认是否退出?';
      //let message = copyTaskFlag ? '退出后,正在抓取的商品将无法继续抓取,请确认是否最小化?' : '退出后,如需使用需重新登录,请确认是否退出?'
      dialog.showMessageBox({	//引用dialog
        type: 'info',
        title: '退出拼多多超级店长',
        defaultId: 0,
        message: message,
        buttons: ['最小化','直接退出']	
      },(index)=>{
        if(index===0){		//对应 buttons 数组的下标
          e.preventDefault();
          mainWindow.minimize();	//最小化
        } else {
          mainWindow = null;
          app.exit();				//退出应用 立即退出程序
          //app.quit();				//退出应用 尝试关闭所有窗口 
        }
      })
    });
    

    两种退出:exit()和quit()

    1. exit:
      直接退出整个应用
    2. quit:
      不会直接退出应用,是关掉客户端会留在任务栏里面。
      在mianWindow的close事件用这个的话,会弹出两次弹框。如果需要这种退出的话需要单独写 flag 处理一下。
    2、主进程与渲染进程通信

    ipcMain
    ipcRenderer
    ipcMain:在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息。 从渲染器进程发送的消息将被发送到该模块。
    ipcRenderer:可以使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。 也可以接收主进程回复的消息。
    简单实例:
    Q:点击关闭按钮的时候,在渲染进程中有正在复制的时候点击关闭按钮展示一段话,没有正在复制的时候展示另一段话。
    主进程:

    const {ipcMain} = require('electron');
    let copyTaskFlag = false;		//定义一个变量 flag	
    ipcMain.on('copyTask-message', (event, arg) => {	//监听渲染进程事件 on 监听的 事件名要和 渲染进程的事件名一致。
      copyTaskFlag = arg;			//arg 为渲染进程事件传过来的值
    });
    

    渲染进程:

    const { ipcRenderer } = require('electron')		//渲染进程中引入
    ipcRenderer.send('copyTask-message', options);	//send
    
    3、客户端右键

    一个新的客户端右键是没有任何东西的,需要自定义的。

    //右键菜单:1 调用 electron的 menu 中的配置 https://electronjs.org/docs/api/menu-item
    	let electron = require('electron');
        const remote = require('electron').remote;
        const Menu = remote.Menu;
        const MenuItem = remote.MenuItem;
        var menu = new Menu();
        menu.append(new MenuItem({ label: '复制', selector: "copy:" ,role: "copy:" }));
        menu.append(new MenuItem({ type: 'separator' }));
        menu.append(new MenuItem({ label: '剪切', selector: "cut:", role: "cut:"}));
        menu.append(new MenuItem({ type: 'separator' }));
        menu.append(new MenuItem({ label: '粘贴', selector: "paste:", role: "paste:"}));
        window.addEventListener('contextmenu', function (e) {
          e.preventDefault();
          menu.popup(remote.getCurrentWindow());
        }, false);
    
    //右键菜单:2 使用document的方法。
        let electron = require('electron');
        const remote = electron.remote;
        const Menu = remote.Menu;
        const MenuItem = remote.MenuItem;
        let menu = new Menu();
        menu.append(new MenuItem({ label: '复制', click: function() {
            document.execCommand("copy", "false", null);
        }}));
        menu.append(new MenuItem({ type: 'separator' }));
        menu.append(new MenuItem({ label: '黏贴', click: function() {
            document.execCommand("paste", "false", null);
        }}));
        menu.append(new MenuItem({ type: 'separator' }));
        menu.append(new MenuItem({ label: '刷新', click: function() {
            location.reload();
        }}));
        window.addEventListener('contextmenu', function (e) {
          e.preventDefault();
          menu.popup(remote.getCurrentWindow());
        }, false);
    
    4、remote 模块

    remote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径。
    在Electron中, GUI 相关的模块 (如 dialog、menu 等) 仅在主进程中可用, 在渲染进程中不可用。 为了在渲染进程中使用它们, ipc 模块是向主进程发送进程间消息所必需的。 使用 remote 模块, 你可以调用 main 进程对象的方法。

    在渲染进程中:
    1、使用dialog

    const electron = require('electron').remote;
    const dialog = electron.dialog;
    

    2、BrowserWindow

    const { BrowserWindow } = require('electron').remote
    let win = new BrowserWindow({ width: 800, height: 600 })
    win.loadURL('https://blog.csdn.net/guoqiankunmiss')
    
    
    展开全文
  • electron

    2019-09-28 00:00:15
    npm i -D electron@latest # Electron 6.0.10 # Node 12.4.0 # Chromium 76.0.3809.146 $ npm i -D electron@beta # Electron 7.0.0-beta.5 # Node 12.8.1 # Chromium 78.0.3905.1 $ np...

     

    npm i -D electron@latest
    # Electron   6.0.10
    # Node       12.4.0
    # Chromium   76.0.3809.146
    $ npm i -D electron@beta
    # Electron   7.0.0-beta.5
    # Node       12.8.1
    # Chromium   78.0.3905.1
    $ npm i -D electron-nightly
    展开全文
  • 本文介绍了npm config set/delete命令和./.npmrc文件的关系。介绍了npm三种更换下载源的方法。介绍了解决electron下载慢的方法。

    写在前面:大家好K。首先为你点进这篇有趣的文章点赞👍!文章在撰写过程中难免有疏漏和错误,欢迎你在下方留言指出文章的不足之处;如果觉得这篇文章对你有用,也欢迎你点赞和留下你的评论。更多内容请点进👉我的博客K。👈阅览。

    你一定会发现了用npm install安装electron很慢,看看如何解决这个问题吧

    1. npm config命令 与 ~/.npmrc文件

    npm config set添加配置与~/.npmrc文件内容是相互影响的。

    1. 在使用npm config set 变量名 值方式添加变量时,npm全局配置信息会改变,且~/.npmrc文件中会自动添加上变量名=值。(如果是第一次使用没有~/.npmrc文件,npm会自动创建该文件)

    2. 使用npm config delete 变量名删除变量时,npm全局配置信息会改变,且~/.npmrc中会自动删除掉变量名=值。(如果将用户自定的变量都删除完后,npm会自动删除~/.npmrc文件)

    3. 开发者手动在~/.npmrc文件中增删变量名=值,npm配置信息也会相应的发生改变。

    示例

    在shell中输入:

    npm config set ELETRON_MIRROR https://npm.taobao.org/mirrors/electron/
    npm config set registry https://registry.npm.taobao.org/
    

    使用npm config list查看npm配置信息,显示:

    npm配置信息

    第一行用注释提示这是用户手动配置的东西,之后就会显示这些用户手动添加的变量。不论用户是通过命令来增删还是直接修改~/.npmrc文件,这里的值都会发生改变。当没有用户配置变量时,将不会显示这些行(包括那行注释)。

    2. npm换源

    npm通常在下载模块时很慢,我们有三种方法改善这一情况:

    • 法一

    下载安装cnpm工具,替代npm,以后都使用cnpm安装模块:

    # 全局安装cnpm
    npm install -g cnpm
    

    -g选项表示全局安装,而不是只能在某个项目文件夹中使用。

    优点:一劳永逸解决npm下载慢的问题;

    缺点:会额外安装软件,有软件洁癖的话可能受不了。

    • 法二(不推荐)

    每次运行时都指定下载源的地址:

    # 示例:指定安装源,全局安装cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    加上--registry=XXX.XXX表示,本次从XXX.XX网址下载模块。

    优点:不必安装新的软件;

    缺点:每次都添加那么长一些代码很不方便。

    • 法三(强烈推荐)

    往用户配置中添加registry变量,有两种方法

    1. 执行命令
    npm config set registry https://registry.npm.taobao.org/
    
    1. 手动创建./.npmrc文件(如果没有的话),里面添加一行:registry=https://registry.npm.taobao.org/

    此时输入npm config list命令,就会多出上面👆截图中的内容。

    3. 添加electron镜像地址

    解决了npm下载慢的问题,但是在安装electron时发现,后面下载electron的时候还是很慢,而且因为eletron很大,还很有可能导致连接超时。这是因为下载electron时,还要去别的地址下载文件。这该怎么解决呢?

    我们可以通过类似npm换源的第三种方法,在配置文件中添加electron的阿里云镜像地址:

    输入命令:

    npm config set ELETRON_MIRROR https://npm.taobao.org/mirrors/electron/
    

    或直接在./.npmrc文件中添加一行ELETRON_MIRROR=https://npm.taobao.org/mirrors/electron/

    此时,经过添加两个变量registryELETRON_MIRROR,执行npm config list,会有上面👆截图中的三行。

    注意必须要全大写ELETRON_MIRROR,地址最后的/可要可不要,配置信息中会自动加上。

    展开全文
  • 该文件是使用Electron开发的demo,使用electron-packager、electron-builder打包的例子
  • Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新(包含源码)
  • electron + vue + element 开发基础 先配置国内淘宝镜像 ~/.npmrc 中添加 registry=https://registry.npm.taobao.org disturl=https://npm.taobao.org/dist sass-binary-site=...
  • electron最新版

    2020-12-20 11:41:48
    electron最新版
  • electron succinctly

    2019-04-17 17:11:07
    electron开发简明教程,Electron is a framework built by the folks at GitHub (now part of Microsoft), which allows you to practically “convert” web applications into fully featured desktop ...
  • electron.zip

    2020-03-24 16:04:15
    下载后解压到 node_modules / electron npm install electron安装后报错无法运行的小伙伴,说明electron没下载成功 下载后解压到node_modules目录即可,npm install electron安装后无法运行的小伙伴,下载这个...
  • Electron实战专题

    2018-10-23 11:12:20
    Electron允许用Web技术开发跨平台桌面应用。本套餐深入介绍关于Electron的各种技术,包括但不限于Electron安装、Electron对话框、Electron菜单、数据存储,在Electron中编译SQLite本地模块,托盘等
  • Electron基于electron-builder进行打包,运行window和Mac上,使用electron-updater实现检测更新
  • electron-demo1 基于electron技术示例demo程序,主要用于试验上层界面使用html+css+js前端技术,业务代码使用nodejs和c++ addon的跨win/mac的桌面客户端技术方案
  • electron-print-demo electron打印示例 run $ npm install $ npm start
  • electron | electron-packager打包问题汇总

    万次阅读 热门讨论 2019-09-16 19:09:43
    electron-packager打包问题汇总:operation not permitted,下载慢,ECONNRESET

    更新记录

    2019/10/18 更新 权限不足 问题,添加改用electron-builder方法。
    2019/11/21 更新 打包超时问题 问题,添加 修改系统变量 方法。

    欢迎直接提问

    为避免幸存者误差带来的困境,检验方法的普适性,欢迎大家在本文提出的方法行不通时,直接提问!

    前言

    electron-packager的使用非常简单,但在实际打包中却遇到了诸多问题,下面将逐一列举并分析。

    operation not permitted

    问题现象

    打包时,npm首先需要下载electron内核到缓存文件夹下,此时读写文件夹会出现权限问题。

    EPERM: operation not permitted, lstat 'C:\Users\XXXX\AppData\Local\Temp\electron-download-rtze3Z\electron-v6.0.9-win32-x64.zip'
    

    解决方案

    更换管理员用户

    假如你所使用的用户不是管理员,那么打包时会遇到没有权限的问题,所以需要将当前用户提权到管理员权限或切换至管理员角色(注意:是用管理员用户登录,而不是使用管理员权限运行cmd)

    改用electron-builder

    若还未解决,请换用electron-builder。
    经测试,使用electron-builder不会出现因下载prebuilder文件而出现的权限问题。(2019.10.22更新)

    打包慢,无反应

    问题现象

    > electron-demo@1.0.0 pack X:\myElectronProj\electron-demo
    > electron-packager . electron-client --win --out ../electron-client --arch=x64 
    

    electron-packager打包并不显示当前进度,也没有报错,但一直没有结果。

    问题分析

    electron-packager在当前机器的首次打包前,会下载electron的预编译文件至当前用户,而electron-prebuilder的默认源在国外,在网络不好的情况下,即便有代理,速度非常慢。
    本问题的最大坑点在于,下载预编译文件的进度不显示在命令行。

    解决方案

    1. 修改npm镜像

    首先,你可以更换阿里镜像源,全局执行如下npm脚本再重新打包

    npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
    

    2. 修改系统环境变量

    由于未知原因,electron-packger / electron-builder 在真实打包时并不识别npm的镜像地址,此时,你需要修改环境变量
    变量名:

    ELECTRON_MIRROR
    

    变量值:

    http://npm.taobao.org/mirrors/electron/
    

    在这里插入图片描述
    然后,再重启cmd,使环境变量生效,进行打包即可。

    Error: read ECONNRESET

    npm超时,解决方法与上条相同。

    展开全文
  • electron应用合集 electron-starter 快速创建Electron应用的模板; electron-vue-starter 快速创建Electron Vue应用的模板; gitnote 管理Github仓库Issue的客户端; Electron + Vue实现; 使用Github作为笔记存储;...
  • 电子原子 使用表示缺少符号的 macOS崩溃报告。 该库下载符号化所需的dSYM资产,并将其存储在相对于模块的cache文件夹中。 这些文件很大(〜300MB),最初可能...运行electron-atos并指定文件路径和所使用的Electron
  • electron入门篇

    2021-02-27 18:59:40
    本文件讲述了Electron从入门到开发中常用的小功能。适合大家对Electron知识的入门学习和巩固基础知识。希望可以帮助到,爱学习的你。剑未佩妥,出门便是江湖,加油!
  • React + Electron App骨架 该项目是测试React和部署电子的骨架。 使用npx create-react-app react-electron来构建react应用程序。 使用npm install electron --save-dev实施的电子npm install electron --save-dev...
  • Covalent-ElectronElectron平台,可使用Covalent和Electron构建桌面应用程序 Covalent是Teradata提供的可重用的UI平台,用于使用通用标准和工具构建Web应用程序。 它基于Angular 2和Material Design。 共价...
  • electron-vue

    2020-01-18 21:08:17
    # build electron application for production 只生成vue静态文件不会自动打包,打包程序已经关闭,因为打包会失败 npm run build # 打包成桌面程序 执行如下命令 electron-builder # lint all JS/Vue ...
  • 电子不和谐 包装结构 包含Electron bot的源代码。 server-包含Electron bot的服务器源代码。 执照
  • electron中文手册

    2019-02-28 08:47:50
    electron.epub electron.mobi electron.pdf electron.chm 四个文件打包,内容是一样的,不过chm文件老是弹窗脚本错误,有点难受,不过内容可以正常看 百度云链接:1Mqqpnfewa5jSHcJaNDXJvg 前边加上:链接:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,394
精华内容 15,757
关键字:

electron