学习electron
weixin_46852620
这个作者很懒,什么都没留下…
展开
-
browserView嵌入两个子窗口
通过browserView嵌入两个子窗口,先显示一个a窗口,等b窗口创建完之后关闭a窗口,再显示b窗口win = new BrowserWindow({ width: 1200, height: 700, minWidth: 1200, minHeight: 700, webPreferences: { nodeIntegration: true, webviewTag: true } }); let view = new B原创 2021-01-30 15:33:30 · 624 阅读 · 0 评论 -
BrowserView嵌套子窗口
newWinpage = new BrowserWindow({ width: 450, height: 660, minWidth: 450, minHeight: 660, frame: false, webPreferences: { nodeIntegration: true, webviewTag: true } }); newWinpage.loadURL("https:www.baidu.com") .原创 2021-01-30 15:36:50 · 284 阅读 · 0 评论 -
全局快捷键
var electron = require("electron");var app = electron.app;var BrowserWindow = electron.BrowserWindow;var globalShortcut = electron.globalShortcut;var mainWindow = null;app.on("ready", () => { mainWindow = new BrowserWindow({ width: 1920,原创 2021-01-30 15:37:31 · 65 阅读 · 0 评论 -
打开文件对话框
dialog.showOpenDialog()方法打开,他有两个参数,一个是设置基本属性,另一个是回调函数const { dialog } = require('electron').remote btn.onclick = function () { // 打开文件对话框 dialog.showOpenDialog({ title: '选择图片', //对话框的标题 defau原创 2021-01-30 15:37:41 · 554 阅读 · 0 评论 -
Electron无边框窗口(最小化、最大化、关闭、拖动)
一、无边框窗口要创建无边框窗口,只需在BrowserWindow的options中将frame设置为 false,通过将 transparent 选项设置为 true, 还可以使无框窗口透明mainWindow = new BrowserWindow({ width: 800, height: 600, frame:false, transparent:true})二、可拖拽区.titlebar { -webkit-app-region: drag; -webkit-us原创 2021-01-30 15:37:54 · 1874 阅读 · 0 评论 -
父子窗口通信
父页面parent.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first electron</title></head><body>原创 2021-01-30 15:38:20 · 100 阅读 · 0 评论 -
让网页充满整个窗口
如何让一个网页充满整个窗口1.创建一个窗口对象 BrowserWindow,设置窗口的高度和宽度2.创建一个浏览器对象 BrowserView3.设置 BrowserView 作用的窗口,即newWin.setBrowserView(view)4.设置 BrowserView 的高度和宽度 与窗口保持一致5.设置browserView视图宽度随窗口变化 view.setAutoResize({ width: true, height: true })6.设置 BrowserView 加载的网址原创 2021-01-30 15:36:34 · 1273 阅读 · 2 评论 -
electron 页面Menu、鼠标右键Menu和自定义快捷键globalShortcut
electron menu模块const { app, BrowserWindow, globalShortcut } = require('electron')const path = require('path')var mainWindow = null // 声明要打开的主窗口const { Menu } = require('electron')app.on('ready', () => { // 设置窗口的高度和宽度 mainWindow = new BrowserWi原创 2021-01-30 15:38:40 · 530 阅读 · 0 评论 -
打开对话框
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <原创 2021-01-30 15:38:53 · 176 阅读 · 0 评论 -
切换页面和打开窗口
window.location.href 切换窗口内容function changePage (pageUrl) { window.location.href = pageUrl}window.open 打开新的窗口function windowOpen () { // window.open 来创建一个新的窗口时候,将会创建一个 BrowserWindow 的实例,并且将返回一个标识,这个界面通过标识来对这个新的窗口进行有限的控制. // window.open(url[, fr原创 2021-01-30 15:36:24 · 202 阅读 · 0 评论 -
main.js入口文件
// app 代表整个应用本身const {app, BrowserWindow} = require('electron')let mainWindow// 创建一个主窗口function createWindow () { mainWindow = new BrowserWindow({ width: 800, minWidth: 400, // maxWidth: 1200, minHeight:300,原创 2021-01-30 15:34:57 · 594 阅读 · 0 评论 -
window.open子父窗口之间的通信
window.opener.postMessage子窗口向父窗口传递信息window.opener.postMessage(message,targetOrigin),是将消息发送给指定来源的父窗口,如果未指定来源则发送给*,即所有窗口。message : 传递的消息,是String类型的值targetOrigin : 指定发送的窗口在传递消息时,你需要在子窗口的页面中设置一些内容,所以我们不能使用远程的页面,而需要自己建立一个。在项目根目录,建立一个popup_page.html文件。 代码如下原创 2021-01-30 15:39:18 · 1863 阅读 · 0 评论 -
window.open打开子窗口
var mybtn = document.querySelector('#mybtn')mybtn.onclick = function(e){ window.open('https://jspang.com')}原创 2021-01-30 15:36:13 · 312 阅读 · 0 评论 -
BrowserView嵌入网页
打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。var BrowserView = electron.BrowserView //引入BrowserViewvar view = new BrowserView() //new出对象mainWindow.setBrowserView(view) // 在主窗口中设置view可用view.setBounds({x:0,y:100,width:1200, height:800}) //定义view的原创 2021-01-30 15:36:00 · 492 阅读 · 0 评论 -
通过链接打开浏览器
<a id="aHref" href="https://jspang.com">技术胖的博客</a>var { shell } = require('electron')var aHref = document.querySelector('#aHref') aHref.onclick = function(e){ e.preventDefault() var href = this.getAttribute('href') shell.openE原创 2021-01-30 15:35:51 · 720 阅读 · 0 评论 -
打开调试模式
由于我们已经定义了顶部菜单,没有了打开调试模式的菜单了,这时候可以使用程序来进行打开。在主进程中加入这句代码就可以了。mainWindow.webContents.openDevTools()var electron = require('electron') var app = electron.app var BrowserWindow = electron.BrowserWindow;var mainWindow = null ;app.on('ready',()=>{原创 2021-01-30 15:35:40 · 817 阅读 · 0 评论 -
创建右键菜单
当我们要使用Menu模块,它是主线中的模块,如果想在渲染线程中使用,就必须使用remote。代码如下const { remote} = require('electron')var rigthTemplate = [ {label:'粘贴'}, {label:'复制'}]var m = remote.Menu.buildFromTemplate(rigthTemplate)window.addEventListener('contextmenu',function(e){原创 2021-01-30 15:35:28 · 83 阅读 · 0 评论 -
electron创建菜单
Menu属于是主线程下的模块,所以只能在主线程中使用新建一个menu.js文件,然后编写如下代码,然后再打开主进程main.js文件,在ready生命周期中,直接加入下面的代码,就可以实现自定义菜单了const template = [ { label: '工具', submenu: [ { label: '打開', accelerator: 'ctrl+n', //快捷鍵原创 2021-01-30 15:35:20 · 114 阅读 · 0 评论 -
渲染进程使用remote
Electron使用romote报错 : Uncaught TypeError: Cannot read property ‘BrowserWindow‘ of undefined在Electron 10.x中,enableRemoteModule的默认值为false,也就是默认情况下是不支持使用remote模块的,因此使用remote模块的应用程序需要将enableRemoteModule显式设置为true。mainWindow = new BrowserWindow({ width:400原创 2021-01-30 15:39:02 · 543 阅读 · 0 评论