对于electron是个新手,下面纯属个人理解。如有错误，欢迎指出。
 
一.安装
　如果你本地按照github上的

# Install the `electron` command globally in your $PATH

npm install electron-prebuilt -g
安装不起来的话，没事。按照这个博友的方法来安装即可。Electron安装
 
二.Electron是什么
类似NW.js。但是好像比它强大很多。而且社区很活跃，很有前途。
 
三.废话不多说，直接上实例。
main.js（主进程）
const electron = require('electron')

const app = electron.app

const BrowserWindow = electron.BrowserWindow

let mainWindow

function createWindow(){

    mainWindow = new BrowserWindow({

        width:800,

        height:400

    })

    mainWindow.loadURL(`file://${__dirname}/index.html`);

    mainWindow.webContents.openDevTools()

    mainWindow.on('closed', function () {

        mainWindow = null

    })

}

app.on('ready',createWindow);

app.on('window-all-closed', function () {

  if (process.platform !== 'darwin') {

    app.quit()

  }

})
 
1.创建窗口的用法：
  BrowserWindow 类让你有创建一个浏览器窗口的权力。
  当然这里面有很多options 
  new BrowserWindow([options])
  • options Object
    • width Integer - 窗口宽度,单位像素. 默认是 800.
    • height Integer - 窗口高度,单位像素. 默认是 600.
    • x Integer - 窗口相对于屏幕的左偏移位置.默认居中.
    • y Integer - 窗口相对于屏幕的顶部偏移位置.默认居中...等等
 
2.app 模块是为了控制整个应用的生命周期设计的
 app有很多事件：
     ready:当 Electron 完成初始化时被触发，常用的
     window-all-closed:当所有的窗口都被关闭时触发，常用的
     quit:当应用程序正在退出时触发，常用的
     ....等等
 
3.mainWindow.webContents.openDevTools()这个是调用开发者工具的，用来调试页面
 
4.所以上面的js应该就很好理解了吧。
    
html:
<!DOCTYPE html>

<html>

<head>

    <title>zqz_electron</title>

    <meta charset="utf-8">

</head>

<script type="text/javascript">

    const remote = require('electron').remote;

    const Menu = remote.Menu;

    const MenuItem = remote.MenuItem;

    var menu = new Menu();

    menu.append(new MenuItem({ label: 'MenuItem1', click: function() { alert('zqz click  item 1'); } }));

    menu.append(new MenuItem({ type: 'separator' }));

    menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));

    window.addEventListener('contextmenu', function (e) {

      e.preventDefault();

      menu.popup(remote.getCurrentWindow());

    }, false);

</script>

<body>

<input type="file">选取文件</input>

</body>

</html>
 
页面要注意：
    1. html中的require('electron').remote与js中的electron = require('electron')是不一样的。
        remote是什么：remote 模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径
        在这里，js就是主进程，页面中的js就是渲染进程。
        如果要使得独立js中与页面js的代码互相操作。必要要使用这样的通讯途径。(这个例子没有很好的验证，在我下一篇的例子上就有，还有ipc)
 
    2.Menus：是用来创建一个新的菜单.
    
    3.MenuItem：菜单项模块允许你向应用或menu添加选项
    
 
package.json
 {

  "name": "zqz",

  "version": "1.0.0",

  "main": "main.js",

  "scripts": {

    "start": "electron main.js"

  },

  "devDependencies": {

  }

}
运行：
    
效果：
 
 
 

Electron使用与学习--(基本使用与菜单操作)的更多相关文章

  1. 【Electron】Electron开发入门（八）：自定义electron框架外壳（shell）的菜单（Menu）

    1.自定义electron框架外壳(shell)的菜单(Menu) electron的main.js里代码: const Menu = require('electron').Menu; var te ...

  2. QT学习之窗口右键菜单

    #QT学习之窗口右键菜单 QWidget 及其子类都有右键菜单,主要因为其有两个与右键菜单相关联的函数: Qt::ContextMenuPolicy contextMenuPlicy() const ...

  3. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  4. 【php学习之路】字符串操作

           无论学习那种语言,字符串操作都是必备的基础.学php的时候总是会不知不觉的与C#比较,用起来总觉得怪怪的没有那么顺手,有些命名也差别很大,再加上很多函数命名是简写形式不百度下还真不知道什 ...

  5. RX学习笔记：JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  6. 树莓派学习笔记——使用文件IO操作GPIO SysFs方式

    0 前言     本文描写叙述假设通过文件IO sysfs方式控制树莓派 GPIO端口.通过sysfs方式控制GPIO,先訪问/sys/class/gpio文件夹,向export文件写入GPIO编号, ...

  7. Windows phone 8 学习笔记(2) 数据文件操作

    原文:Windows phone 8 学习笔记(2) 数据文件操作 Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方 ...

  8. IOS开发－UI学习－sqlite数据库的操作

    IOS开发-UI学习-sqlite数据库的操作 sqlite是一个轻量级的数据库,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了,而且它的处理速度比Mysql.PostgreSQL这 ...

  9. 扫雷游戏制作过程（C#描述）：第五节、菜单操作（续）

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 发布版已经分享到百度网盘 菜单操作(续) 接着节前一章节的内容,我们继续完善菜单栏的功能. 我们首先,先完善Rank的选项,我们希望我 ...

随机推荐

  1. In-Memory：内存数据库

    在逝去的2016后半年,由于项目需要支持数据的快速更新和多用户的高并发负载,我试水SQL Server 2016的In-Memory OLTP,创建内存数据库实现项目的负载需求,现在项目接近尾声,系统 ...

  2. dotNET跨平台相关文档整理

    一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...

  3. 细说WebSocket - Node篇

    在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...

  4. Python高手之路【五】python基础之正则表达式

    下图列出了Python支持的正则表达式元字符和语法: 字符点:匹配任意一个字符 import re st = 'python' result = re.findall('p.t',st) print( ...

  5. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

  6. jQuery学习之路（6）- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  7. AJAX实现登录界面

    使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒.但是,php跳转的方式 需要额外加载其他界面,用户体验差.AJAX可实现当前页面只刷新需要的数据,不对当前网页进行 重新加载或者是 ...

  8. spring maven pom.xml设置

    spring pom.xml设置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  9. Android之SAX解析XML

    一．SAX解析方法介绍 SAX(Simple API for XML)是一个解析速度快并且占用内存少的XML解析器,非常适合用于Android等移动设备. SAX解析器是一种基于事件的解析器,事件驱动 ...

  10. win10系统下连接无线网络掉线问题解决办法

    打开驱动精灵----系统诊断 找一个可修复的驱动点击 选择连不上网中的查看更多 有连不上网络,网络连接受限,解决无线间歇性掉网问题 进入计算机管理----设备管理 修改无线网络属性(名称含有wirel ...