首页 技术 正文
技术 2022年11月9日
0 收藏 846 点赞 3,296 浏览 2547 个字

对于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.appconst BrowserWindow = electron.BrowserWindowlet mainWindowfunction 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 – 窗口相对于屏幕的顶部偏移位置.默认居中…等等

具体参见:https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md 2.app 模块是为了控制整个应用的生命周期设计的 app有很多事件:     ready:当 Electron 完成初始化时被触发,常用的     window-all-closed:当所有的窗口都被关闭时触发,常用的     quit:当应用程序正在退出时触发,常用的     ….等等具体参见:https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/app.md 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:是用来创建一个新的菜单.    具体参见:https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/menu.md        3.MenuItem:菜单项模块允许你向应用或menu添加选项    具体参见:https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/menu-item.md     package.json

 {
"name": "zqz",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"devDependencies": { }
}

运行:Electron使用与学习–(基本使用与菜单操作)Electron使用与学习–(基本使用与菜单操作)    Electron使用与学习–(基本使用与菜单操作)效果:Electron使用与学习–(基本使用与菜单操作)Electron使用与学习–(基本使用与菜单操作)   

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,488
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,736
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,487
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,127
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,289