对于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. Redis数据库

    Redis是k-v型数据库的典范,设计思想及数据结构实现都值得学习. 1.数据类型 value支持五种数据类型:1.字符串(strings)2.字符串列表(lists)3.字符串集合(sets)4.有 ...

  2. Android Button的基本使用

    title: Android Button的基本使用 tags: Button,按钮 --- Button介绍: Button(按钮)继承自TextView,在Android开发中,Button是常用 ...

  3. kafka源码分析之一server启动分析

    0. 关键概念 关键概念 Concepts Function Topic 用于划分Message的逻辑概念,一个Topic可以分布在多个Broker上. Partition 是Kafka中横向扩展和一 ...

  4. PHP之使用网络函数和协议函数

    使用其他Web站点的数据 <html> <head> <title> Stock Quote From NASDAQ </title> </hea ...

  5. 就这么漂来漂去---一个毕业三个月的java程序员的裸辞风波

    注:这并不是一篇技术文章,而是记录了我这几个月经历的入职,裸辞,找工作的心路历程,简单介绍一个博主的情况,我是16年毕业生,校招进了一家北京的公司,java开发,和很多年轻人一样,干了一段时间,我发现 ...

  6. Solr高级查询Facet

    一.什么是facet solr种以导航为目的的查询结果成为facet,在用户查询的结果上根据分类增加了count信息,然后用户根据count信息做进一步搜索. facet主要用于导航实现渐进式精确搜索 ...

  7. 2Sum

    用哈希表(unordered_map)使得时间复杂度从O(n*n)降到O(n),空间复杂度从O(1)增到O(n):一边找一边插入哈希表 注意 在C++11以前要使用unordered_map需要 #i ...

  8. css知多少之绝对定位小记

    一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...

  9. Android的Kotlin秘方（II）：RecyclerView 和 DiffUtil

    作者:Antonio Leiva 时间:Sep 12, 2016 原文链接:http://antonioleiva.com/recyclerview-diffutil-kotlin/ 如你所知,在[支 ...

  10. iOS在导航栏上居中显示分段控件(UISegmentedControl)

    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:nil]; segmentedCont ...