1,electron搭建

electron可以用js来创建丰富的桌面应用

一个electron应用的目录结构

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

1,安装electron:全局安装

 npm install electron -g

2,package.json内容

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

3,如果 main 字段没有在 package.json 声明,Electron会优先加载 index.js

创建main.js文件

const electron = require('electron');
const app = electron.app; // 控制应用生命周期的模块。
const BrowserWindow = electron.BrowserWindow; //创建原生浏览器窗口的模块

// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
// window 会被自动地关闭
var mainWindow = null;

//当所有窗口被关闭了,退出。
app.on('window-all-closed', function() {
// 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前
// 应用会保持活动状态
if (process.platform != 'darwin') {
app.quit();
}
});

//当 Electron 完成了初始化并且准备创建浏览器窗口的时候
//这个方法就被调用
app.on('ready', function() {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({width: 800, height: 600});

// 加载应用的 index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');

// 打开开发工具
mainWindow.openDevTools();

// 当 window 被关闭,这个事件会被发出
mainWindow.on('closed', function() {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 但这次不是。
mainWindow = null;
});
});

 4,创建展示的index.html文件



  
    Hello World!
  
  
    

Hello World!

We are using io.js and Electron .

5,运行应用

electron .

 

转载于:https://www.cnblogs.com/maxwell-xu/p/8310942.html

你可能感兴趣的:(json,开发工具,javascript,ViewUI)