Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

本文基于Windows进行开发的过程,记录下来,以便日后使用,Electron官网:https://electronjs.org/docs

1,安装node.js

  进入官网下载、安装。https://nodejs.org/en/

2,安装cnpm

  安装命令(打开系统的cmd.exe来执行命令): npm install -g cnpm --registry=https://registry.npm.taobao.org

3,安装Electron

  安装命令: cnpm install -g electron

4,安装Electron-forge

  Electron工具整合项目:https://github.com/electron-userland/electron-forge

  安装命令: cnpm install -g electron-forge

5,新建项目

  F盘新建Electron项目文件夹 F:\Electron。

  在Electron文件夹下,按住Shift键并右键单击空白处,选择在此处打开命令窗口来启动cmd.exe。

  执行 electron-forge init 项目名称 命令来生成名为myapp的项目文件夹,同时安装项目所需要的模块、依赖项等。

  命令: electron-forge init myapp

6,启动项目

  cd到myapp目录下,执行命令 electron-forge start 来启动app(也可以简单的用npm start来运行)。

7,项目文件

  项目的目录结构:node_modules 文件夹下是各种模块、类库,src下是app的源代码文件,package.json是描述包的文件。

  src/index.js:这是app主进程的入口,在这里创建了mainWindow浏览器窗口,

  使用mainWindow.loadURL(\file://${__dirname}/index.html`)来加载index.html主页,

  我们也可以在此链接我们需要链接的网址,来实现web桌面应用,例:mainWindow.loadURL(`https://www.cnblogs.com/`),

  使用mainWindow.webContents.openDevTools()`来打开开发者工具用于调试(这个操作通常在发布app时删除)。

  然后是app的事件处理:

  ready: 当Electron完成初始化后触发,这里初始化后就会去创建浏览器窗口并加载主页面。
  window-all-closed: 当所有浏览器窗口被关闭后触发,一般此时就退出应用了。
  activate: 当app激活时触发,一般针对macOS要需要处理。

  src/index.html:这是主页面,除了显示Well hey there!!!的信息外,没什么具体内容。

8,package.json配置

  "productName": "myapp" 打包后的文件名称

  "version": "1.0.0" 版本号

  若想更换打包程序的图标,可以在config->electronPackagerConfig->icon中进行设置,

  (例如:我们把app.ico放在src目录下就可以这样配置"icon":"src/favicon.ico")

9,编译打包

  输入以下命令进行编译打包: npm run make

  修改package.json,在electronPackagerConfig部分添加"asar": true。
  "electronPackagerConfig": {
    "asar": true
  }
  重新打包后源码文件会被打包进app.asar文件中(该文件仍然在src目录下)。

  可以直接运行打包后的myapp.exe启动程序

  

  

Electron 安装与使用的更多相关文章

  1. electron 安装

    1.从网上下载的是nodejs的v0.10.42版本的安装文件,安装node-v0.10.42-x86.msi都使用默认安装,安装完成后会安装在C:\Program Files\nodejs\目录下, ...

  2. Electron安装过程深入解析(读完此文解决Electron应用无法启动,无法打包的问题)

    1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...

  3. Electron安装

    1.安装nodejs和npm 官网下载地址:https://nodejs.org/en/download/ 安装包:下载.msi 安装完成后: nodejs.npm都会安装好,path环境变量也自动设 ...

  4. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  5. electron安装到第一个实例

    1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.cmd下输入:npm install electron-prebu ...

  6. electron安装与使用

    系统 WIN10 X64 1. python-2.7.15.amd64.msi 2. node-v10.4.1-x64.msi 3. VS2015 community(社区版) 4. npm conf ...

  7. electron 安装失败解决办法

    1.安装node https://nodejs.org/en/download/2.安装镜像工具npm install -g cnpm --registry=https://registry.npm. ...

  8. electron 安装使用

    1.安装 node.js 链接:http://pan.baidu.com/s/1o7W7BIy 密码:y6od 一路next 我安装在F:\Program Files\node.js下 2.检查nod ...

  9. 为Electron 安装 vue-devtool等扩展

    相关代码: https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js 在SPA逐渐成为构建优秀交互体验应 ...

随机推荐

  1. 限制mongodb内存占用过高方法

    1.mongodb必须是以服务的方式启动的.即能用service mongodb start的方式启动 资源限制用这个命令systemctl set-property <servicename& ...

  2. dell R730 安装windwos 2008 R2在windows loading files...完成后屏幕无信号(iDrac绿屏)

    dell R730 安装windwos 2008 R2在windows loading files...完成后,Starting Windows时屏幕无信号(iDrac绿屏) 解决方法: F2  进行 ...

  3. oracle undo表空间大小修改

    redhat:清空回收站 rm -rf  /home/登录用户名/.Trash 例子:rm -rf /home/.Trash-root df命令可以显示目前所有文件系统的可用空间及使用情形: 例子:d ...

  4. 数据抽取 CDC

    什么是数据抽取 数据抽取是指从源数据源系统抽取目的数据源系统需要的数据.实际应用中,数据源较多采用的是关系数据库. [编辑] 数据抽取的方式 (一) 全量抽取 全量抽取类似于数据迁移或数据复制,它将数 ...

  5. javascript系列--Object.assign实现浅拷贝的原理以及实现

    一.前言 之前在前面一篇学习了赋值,浅拷贝和深拷贝.介绍了这三者的相关知识和区别. 传送门:https://www.mwcxs.top/page/592.html 本文会介绍浅拷贝Object.ass ...

  6. 视频支持拖动进度条播放的实现(基于nginx)

    http协议下的flv/mp4流式播放支持的三个要点: 1 服务器端要支持flv/mp4流式播放,现在nginx或者lighttpd都是支持这样的应用的,还支持mp4的流式播放(默认编译版本一般都是打 ...

  7. 面试总结之Linux/Shell

    Linux Linux cshrc文件作用 Linux如何起进程/查看进程/杀进程 Linux 文件755 代表什么权限 Linux辅助线程 Linux进程间通信方法 pipeline,msgq... ...

  8. mysql/oracle ip地址比较

    SELECT hub_gid FROM CPP_HUB_IPSEGMENT WHERE IpToLong(#{ip}) BETWEEN IpToLong(ip_begin) AND IpToLong( ...

  9. DbUtils: JDBC Utility Component Examples

    DbUtils: JDBC Utility Component Examples \JDBCCollector\jdbc\src\main\java\com\ai\toptea\collection\ ...

  10. JSP的taglib示例

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2 ...