对于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. 在docker中运行ASP.NET Core Web API应用程序(附AWS Windows Server 2016 widt Container实战案例)

    环境准备 1.亚马逊EC2 Windows Server 2016 with Container 2.Visual Studio 2015 Enterprise(Profresianal要装Updat ...

  2. Android学习路线总结，绝对干货

    title: Android学习路线总结,绝对干货 tags: Android学习路线,Android学习资料,怎么学习android grammar_cjkRuby: true --- 一.前言 不 ...

  3. AFNetworking 3.0 源码解读 总结（干货）（下）

    承接上一篇AFNetworking 3.0 源码解读 总结(干货)(上) 21.网络服务类型NSURLRequestNetworkServiceType 示例代码: typedef NS_ENUM(N ...

  4. 在开启DRS的集群中修复VMware虚拟主机启动问题

    通过iSCSI方式连接到ESXi主机上的外挂存储意外失联了一段时间,导致部分虚拟主机在集群中呈现出孤立的状态,单独登陆到每台ESXi上可以看到这些虚拟主机都变成了unknow状态.因为有过上一次(VM ...

  5. VSCode添加Sciter脚本Tiscript高亮支持

    Sciter中的Tiscript脚本不是标准的Javascript,是对Javascript的扩展.所以在常用的编辑器和IDE上对于高亮的支持很不好. 不过在Sciter论坛中找到了在VSCode上的 ...

  6. StringUtils的isBlank与isEmply

    1.public static boolean isEmpty(String str) 判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0 StringUtil ...

  7. nginx服务器安装及配置文件详解

    nginx在工作中已经有好几个环境在使用了,每次都是重新去网上扒博客,各种编译配置,今天自己也整理一份安装文档和nginx.conf配置选项的说明,留作以后参考.像负载均衡配置(包括健康检查).缓存( ...

  8. python select网络编程详细介绍

    刚看了反应堆模式的原理,特意复习了socket编程,本文主要介绍python的基本socket使用和select使用,主要用于了解socket通信过程 一.socket模块 socket - Low- ...

  9. 《Note --- Unreal 4 --- Sample analyze --- StrategyGame（continue...）》

    ---------------------------------------------------------------------------------------------------- ...

  10. Xamarin.Android之SQLiteOpenHelper

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...