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. iOS10新特性

    1.Siri API 的开放自然是 iOS 10 SDK 中最激动人心也是亮眼的特性.Apple 加入了一套全新的框架 Intents.framework 来表示 Siri 获取并解析的结果. 在 i ...

  2. C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析与解决方法

    对于C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析,目前本人分析两种情况,如下: 情况一: 借鉴麒麟.NET ...

  3. sparksql udf的运用----scala及python版(2016年7月17日前完成)

    问:udf在sparksql 里面的作用是什么呢? 答:oracle的存储过程会有用到定义函数,那么现在udf就相当于一个在sparksql用到的函数定义: 第二个问题udf是怎么实现的呢? regi ...

  4. bash里面的一些符号说明

    $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代码(返回值) $- 使用Set命令设定的Flag一览 $* 所有参 ...

  5. html5 app开发,你知道多少?

    随着大量新生移动设备的兴起,改变了互联网的未来,html5技术为开发者提供了一个跨平台的移动app开发方案,并且该方案具有很好的扩展性和灵活性,但就国内使用html5开发app应用技术来讲,还是有欠缺 ...

  6. Android Studio中获取查看签名SHA1证书指纹数据或MD5的方法

    原来在Eclipse中获取SHA1或者MD5,在IDE界面上就可以查找到. 切换到Android Studio后,如何查看呢?找了半天没找到.那就老办法命令行. 第一步.打开Android Studi ...

  7. 可爱的Python_课后习题_CDay−4 可用的首个Python 脚本

    读取文件cdays−4-test.txt 内容,去除空行和注释行后,以行为单位进行排序,并将结果输出为cdays−4-result.txt. cdays−4-test.txt的内容 #some wor ...

  8. (转)CMOS Sensor的调试经验分享

    CMOS Sensor的调试经验分享 我这里要介绍的就是CMOS摄像头的一些调试经验. 首先,要认识CMOS摄像头的结构.我们通常拿到的是集成封装好的模组,一般由三个部分组成:镜头.感应器和图像信号处 ...

  9. PCB的封装尺寸

    PCB封装主要分为贴片式与插件式 1)贴片元件封装说明发光二极管:颜色有红.黄.绿.蓝之分,亮度分普亮.高亮.超亮三个等级,常用的封装形式有三类:0805.1206.121  (常用封装为RB.1/. ...

  10. Android--自定义加载框

    1,在网上看了下好看的加载框,看了一下,挺好看的,再看了下源码,就是纯paint画出来的,再加上属性动画就搞定了 再来看一下我们的源码 LvGhost.java package com.qianmo. ...