Electron_01
1、通过 https://electron.atom.io/ 下载 electron-v1.4.15-win32-x64.zip 之后
2、通过
asar pack “你的项目文件夹” app.asar 将项目压缩并改名为 app.asar
3、把自己的项目 放在 以上解压文件的 resource 文件夹下
4、点击 electron.exe 运行项目
实例项目:
Electron App的目录结构如下:
your-app/
├── package.json
├── main.js
└── index.html
其中的package.json和Node Modules里表现的一样,而main.js则是启动你App的脚本,它将会开启主进程。package.json的一个例子:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注:当package.json里不存在main时,Electron将会默认使用index.js
main.js应当创建一个窗口并处理系统事件。一个典型的例子如下:
'use strict';
const electron = require('electron');
const app = electron.app; // 控制App生命周期的模块
const BrowserWindow = electron.BrowserWindow; // 创建原生窗口的模块
// 保持对窗口对象的全局引用。如果不这么做的话,JavaScript垃圾回收的时候窗口会自动关闭
var mainWindow = null;
// 当所有的窗口关闭的时候退出应用
app.on('window-all-closed', function() {
// 在 OS X 系统里,除非用户按下Cmd + Q,否则应用和它们的menu bar会保持运行
if (process.platform != 'darwin') {
app.quit();
}
});
// 当应用初始化结束后调用这个方法,并渲染浏览器窗口
app.on('ready', function() {
// 创建一个窗口
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载index.js
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打开 DevTools
mainWindow.webContents.openDevTools();
// 窗口关闭时触发
mainWindow.on('closed', function() {
// 如果你的应用允许多个屏幕,那么可以把它存在Array里。
// 因此删除的时候可以在这里删掉相应的元素
mainWindow = null;
});
});
最后,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>
运行&生成应用
通过electron-prebuilt运行
如果你通过npm全局安装了electron-prebuilt,那么在App文件目录下跑这句就可以运行它:
electron .
Electron_01的更多相关文章
随机推荐
- python-django rest framework框架之分页
1. 以前django做的分页组件当数据量特别大的时候,性能不是很高,有以下三种方式处理: a. 记录当前访问页的最后一条数据id,往后取多少条 b. 最多显示120页 ...
- php调用oracle存储
//todo 调用oracle 存储$config = //数据库配置文件 里面包含 用户密码和host和端口以及dbname $conn = oci_connect($config['usernam ...
- 安卓——AppTheme
<?xml version="1.0" encoding="utf-8"?> <resources> <style name=&q ...
- json字符串转Map、json数组
json数组转map public static void main(String[] args){ String strArr = "[{\"0\":\"zh ...
- (待解决,效率低下)47. Permutations II C++回溯法
思路是在相似题Permutations的基础上,将结果放到set中,利用set容器不会出现重复元素的特性,得到所需结果 但是利用代码中的/* */部分通过迭代器遍历set将set中的元素放在一个新的v ...
- MP3文件结构解析(超详细)
转自:http://blog.csdn.net/u010650845/article/details/53520426 MP3文件结构解析(超详细) 1. MP3文件结构解析 1.1. 概述 1.1. ...
- Matlab远程调试 转
Matlab的调试总体分为,直接调试和间接调试.1.直接调试:(1)去掉句末的分号:(2)单独调试一个函数:将第一行的函数声明注释掉,并定义输入量,以脚本方式执行 M 文件:(3)适当地方添加 ...
- 【性能测试工具ab】ab工具使用
1.在安装了apache服务器后,或者wampserver后,在bin目录下,有一个ab.exe文件 2.使用,进入ab.exe所在的文件夹 3.ab -c 10 -n 1000 htt ...
- TNS
Oracle中TNS的完整定义:transparence Network Substrate透明网络底层,监听服务是它重要的一部分,不是全部,不要把TNS当作只是监听器 ORACLE当中,如果想访问某 ...
- highcharts,highStock 中文图表配置
感谢开源的支持! https://github.com/hcharts/highcharts-zh_CN