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. 【Python】matplotlib 双y轴绘制及合并图例

    1.双y轴绘制 关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...

  2. 详解hdparm: linux下的硬盘测速工具

    hdparm的功能:显示与设定硬盘的参数.hdparm可检测,显示与设定IDE或SCSI硬盘的参数. 语法: hdparm [-CfghiIqtTvyYZ][-a <快取分区>][-A & ...

  3. Spring集成Mybatis(Dao方式开发)

    Spring整成Mybatis注意事项:  1. 关键jar包不能少 2.可以单独整理好Mybatis框架,测试无误再集成Spring 3.集成时,参数级别的细节可以选择忽略,但思路必须清晰 代码如下 ...

  4. ThinkPHP think-migration 简洁使用教程

    ThinkPHP think-migration 简洁使用教程 migration:一种数据库的版本控制,让团队在修改数据库结构的同时,保持彼此的进度一致.帮你更简单的管理数据库.基于原生 think ...

  5. bootstrap 在超小屏布局时使用 clearfix

    bootstrap 在超小屏布局时使用 clearfix 先看案例,一共四个 div,使用 col-xs-6, 所以在特别小型设备上时会变成两行. 不过我们发现如果第一个 div 内容多了后会变成如下 ...

  6. bzoj 4372 烁烁的游戏——动态点分治+树状数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4372 和 bzoj 3070 震波 是一个套路.注意区间修改的话,树状数组不能表示 dis ...

  7. redis Linux 、Windows ubuntu 下的安装

    Redis 安装 2018-07-05 Window 下安装 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 ...

  8. ANSI和UNICODE编程的注意事项

    建立UNICODE编码工程 在VC60下,默认方式下建立的是ANSI编码的工程(注:编译的exe内部,其资源字符是以UNICODE保存),建立UNICODE编码工程的方法: 1.为工程添加UNICOD ...

  9. Android XML数据解析

    XML:可扩展标记语言.一般用于数据存储,SharedPreference就是使用xml文件保存信息的,SQLite底层也是xml文件,在网络方面通常作为信息的载体,把数据包装成xml来传递. XML ...

  10. docker-ubuntu镜像,nginx镜像

    docker 是将程序与机器隔开,使程序不受环境影响. 安装 sudo apt-get install docker.io ## 好用的一些命令 1.停用全部运行中的容器: docker stop $ ...