Lesson 1: Electron应用的代码结构
  1. Electron 简介
    Electron 是由 GitHub 维护的,基于io.js 和 Chromium的开源项目 。使用 JavaScript,HTML 和 CSS 构建运行在 Mac,Windows 和 Linux跨平台的桌面应用程序。

  2. Electron的基本文件结构
    Electron最简单的一个程序有三个文件,package.json, main.js和index.html。
    app/
    ├── package.json
    ├── main.js
    └── index.html

2.1) package.json的格式和node.js模式的格式完全相同,且该脚本里指定main.js作为整个App的启动脚本,其结构如下:

    {
         "name"    : "your-app",
         "version" : "0.1.0",
         "main"    : "main.js"
    }
    /*!!!注意!!! 如果在package.json中没有定义main.js,Electron则会尝试加载index.js文件.*/

2.2) main.js用于创建窗口和处理系统事件,一个典型的
的例子:

const electron = require('electron');
/* 用于控制App生命周期的模块*/
const {app} = electron;
/*用于创建native浏览器窗口的模块*/
const {BrowserWindow} = electron;

/*使用let关键字将win保存为全局窗口对象,以避免JavaScript在进行对象垃圾回收的时候将窗口自动关闭了*/
let win;
function createWindow() {
  /*创建native浏览器窗口.*/
  win = new BrowserWindow({width: 800, height: 600});

  /*加载app中的index.html.*/
  win.loadURL(`file://${__dirname}/index.html`);

  /* 打开开发工具 DevTools.*/
  win.webContents.openDevTools();

  /* 浏览器窗口关闭后发出关闭消息.通常用于监听关闭事件*/
  win.on('closed', () => {
    /* 间接引用窗口对象,通常情况下应该将该窗口保存起来,以作它用*/ 
    /*如果你的App支持多个窗口,则此时你应该移除与窗口对应的每一个element*/
    win = null;
  });
}

/*该函数将会在Electron初始化完成,并且即将准备创建浏览器窗口的时候调用.*/
 /* 部分API只能在该事件生效后才能被调用*/
app.on('ready', createWindow);

 /* 当所有窗口被关闭后,退出程序.*/
app.on('window-all-closed', () => {
 /* 在OS X下,除非用户明确的使用Cmd + Q键退出App,否则应用将仍然会保留按钮栏,这是所有程序的共性*/
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  /* 在OS X下, 当DOCK上的图标显示为被点击状态下,重新创建一个窗口时,将不会有新的窗口被打开,这是所有程序的共性*/
  if (win === null) {
    createWindow();
  }
});
/*在该文件下,你可以包含你App中定义的其他主要程序代码。当然 ,你也可以考虑把他们分离到一个新的.js文件下,并在main.js里面通过require 的形式加载进来*/

2.3) index.html 用于描述你想在网页中看到的内容:

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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangzewei0221/article/details/51565313
文章标签: javascript electron
个人分类: electron
想对作者说点什么? 我来说一句

sqlite数据库electron应用

2017年05月04日 23.08MB 下载

没有更多推荐了,返回首页

不良信息举报

Lesson 1: Electron应用的代码结构

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭