1、全局安装electron

npm install electron -g

在cmd 直接输入 electron 直接启electron

2、编写第一个Electron应用

在任何地方,建立一个app的目录并新建3个文件:

app/
├── package.json
├── main.js
└── index.html

  

package.json

{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager ./ --all --out ~/Desktop/app --version 1.4.0 --overwrite --icon=./src/img/weather.ico"
}
}

main.js

const electron = require('electron');
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron; // 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win; function createWindow() {
// 创建一个新的浏览器窗口
win = new BrowserWindow({width: 1920, height: 1080}); // 并且装载应用的index.html页面
win.loadURL(`file://${__dirname}/index.html`); // 打开开发工具页面
//win.webContents.openDevTools(); // 当窗口关闭时调用的方法
win.on('closed', () => {
// 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里
// 存放窗口对象,在窗口关闭的时候应当删除相应的元素。
win = null;
});
} // 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
// 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
}); app.on('activate', () => {
// 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}
}); // 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。

  index.html 就可以随意添加的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

3、预览应用,就是把app那个文件直接投放到打开的 electron里面就可以查看效果了。

4、如果需要打包成asar 二级制的文件,

全局安装:npm install -g asar

打包:

C:>asar pack 文件夹路径 app.asar  //打包后只读不可修改的

5、发布成exe的问题。需要安装electron-prebuilt   npm install -g electron-prebuilt

6、在package写了发布的脚本,一直npm run-scritp package 打包就可以,ico的路径自己设置,也可以定义设置那个版本的:

那样就可以了,今天第一次接触,也遇到了第三方的库不能接入的问题。在github上找到的问题汇总:https://github.com/electron/electron/blob/master/docs-translations/zh-CN/faq/electron-faq.md

还有electron . 就是自动开始了,不用你在拖到打开的exe中了。

electron打包发布的更多相关文章

  1. 服务器(Liunx)打包发布java web工程

    Liunx服务器上打包发布web工程(开发工具Idea) 1.首先使用Idea自带的打包功能(点击package打包) 2.然后链接到服务器(我这里用的是Xshell链接工具) 3.将打好的war包传 ...

  2. Unity3D引用dll打包发布的问题及解决

    今年我们开始使用Unity3D开发MMORPG,脚本语言使用C#,这样我们就可以使用以往积累的许多类库.但是,在U3D中使用.NET dll的过程并不是那么顺利,比如我们今天遇到的这种问题. 一.问题 ...

  3. Ant自动编译打包&发布 android项目

    Eclipse用起来虽然方便,但是编译打包android项目还是比较慢,尤其将应用打包发布到各个渠道时,用Eclipse手动打包各种渠道包就有点不切实际了,这时候我们用到Ant帮我们自动编译打包了. ...

  4. Winform打包发布图解

    最近,机房收费系统的个人版接近尾声,到了打包发布的时刻.VB.NET的打包发布与VB6.0的打包发布存在不小的差别.下面我们来详细看一下如果打包发布. 第一步: 打开VS,新建项目,选择其他项目类型- ...

  5. QT5.4 计算器程序 打包&发布,解决dll的最新解决方案

    QT写界面还是很不错,就是打包会比较麻烦,折腾了一天总算是打包完成了. QT软件的打包发布一个难点是必备dll文件的识别,现在高版本QT自带了一个windeployqt工具,直接会把需要的dll生成一 ...

  6. Java学习之道:Java项目打包发布

    Java项目打包发布 如果只想发布为一个可执行的jar包,使用eclipse的Export功能就可以了 使用eclipse的Export功能,将项目中的所有package打包为一个pet.jar文件, ...

  7. QT5.4 计算器程序 打包&发布,解决dll的最新解决方案(图文并茂,很清楚)

    QT写界面还是很不错,就是打包会比较麻烦,折腾了一天总算是打包完成了. QT软件的打包发布一个难点是必备dll文件的识别,现在高版本QT自带了一个windeployqt工具,直接会把需要的dll生成一 ...

  8. Qt技巧:Win7下打包发布Qt程序(解释的比较清楚,把exe和dll伪装合并成一个文件)

    转自:http://www.stardrad.com/blog/qt-5%E7%A8%8B%E5%BA%8F%E5%9C%A8windows%E4%B8%8A%E7%9A%84%E5%8F%91%E5 ...

  9. c# 项目带皮肤一起打包发布解决办法

    c# 项目带皮肤一起打包发布解决办法 前提:c#语言   winform应用程序  皮肤为IrisSkin2 目标:在打包发布独立应用 程序时,将皮肤也一起打包发布,实现程序在其它机子安装时,皮肤效果 ...

随机推荐

  1. ORM系列之二:EF(2)Code First

    目录 1. Code First是什么? 2. Code First 简单示例 3. 数据存储 4. 迁移 Code First是什么 Code First 顾名思义就是先写代码,当然不是乱写,而是按 ...

  2. 视觉机器学习读书笔记--------SVM方法

    SVM是一种二类分类模型,有监督的统计学习方法,能够最小化经验误差和最大化几何边缘,被称为最大间隔分类器,可用于分类和回归分析.支持向量机的学习策略就是间隔最大化,可形式化为一个求解凸二次规划的问题, ...

  3. Java中Set Map List 的区别

    java中set map list的区别: 都是集合接口 简要说明 set --其中的值不允许重复,无序的数据结构 list   --其中的值允许重复,因为其为有序的数据结构 map--成对的数据结构 ...

  4. mssql java 运行

    public void rlgy() throws IOException { Statement sql; ResultSet rs; String driverName = "com.m ...

  5. python多线程实现同时执行两个while循环

    如果想同时执行两个while True循环,可以使用多线程threading来实现. 完整代码 #coding=gbk from time import sleep, ctime import thr ...

  6. Quartz2D 编程指南(二)变换、图案、阴影

    概览 图形上下文 路径 颜色与颜色空间 变换 图案 阴影 渐变 透明层 Quartz 2D 中的数据管理 位图与图像遮罩 CoreGraphics 绘制 Layer 5.变换 简介 Quartz 2D ...

  7. Linux配置notes

    终端支持中文输入: locale-gen en_US.UTF-8 export PYTHONIOENCODING=utf-8 export LANG="en_US.UTF-8" e ...

  8. margin属性

    可以设置position:absolute/relative/fixed,通过调节top/bottom/left/right实现元素的定位,这样很好,但是有时候想通过margin来实现. 下面是mar ...

  9. webapi post 请求多个参数

    Some programmers are tring to get or post multiple parameters on a WebApi controller, then they will ...

  10. Hive:常用的一些命令

    1.一般可以通过beeline,代理方式登录hive; 2.使用数据库abc_hive_db:use abc_hive_db; 3.查看数据库中有哪些表:show tables :有哪些特定表 sho ...