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的更多相关文章

随机推荐

  1. python-django rest framework框架之分页

    1. 以前django做的分页组件当数据量特别大的时候,性能不是很高,有以下三种方式处理:        a. 记录当前访问页的最后一条数据id,往后取多少条        b. 最多显示120页   ...

  2. php调用oracle存储

    //todo 调用oracle 存储$config = //数据库配置文件 里面包含 用户密码和host和端口以及dbname $conn = oci_connect($config['usernam ...

  3. 安卓——AppTheme

    <?xml version="1.0" encoding="utf-8"?> <resources> <style name=&q ...

  4. json字符串转Map、json数组

    json数组转map public static void main(String[] args){ String strArr = "[{\"0\":\"zh ...

  5. (待解决,效率低下)47. Permutations II C++回溯法

    思路是在相似题Permutations的基础上,将结果放到set中,利用set容器不会出现重复元素的特性,得到所需结果 但是利用代码中的/* */部分通过迭代器遍历set将set中的元素放在一个新的v ...

  6. MP3文件结构解析(超详细)

    转自:http://blog.csdn.net/u010650845/article/details/53520426 MP3文件结构解析(超详细) 1. MP3文件结构解析 1.1. 概述 1.1. ...

  7. Matlab远程调试 转

        Matlab的调试总体分为,直接调试和间接调试.1.直接调试:(1)去掉句末的分号:(2)单独调试一个函数:将第一行的函数声明注释掉,并定义输入量,以脚本方式执行 M 文件:(3)适当地方添加 ...

  8. 【性能测试工具ab】ab工具使用

    1.在安装了apache服务器后,或者wampserver后,在bin目录下,有一个ab.exe文件 2.使用,进入ab.exe所在的文件夹 3.ab -c   10 -n  1000     htt ...

  9. TNS

    Oracle中TNS的完整定义:transparence Network Substrate透明网络底层,监听服务是它重要的一部分,不是全部,不要把TNS当作只是监听器 ORACLE当中,如果想访问某 ...

  10. highcharts,highStock 中文图表配置

    感谢开源的支持! https://github.com/hcharts/highcharts-zh_CN