【electron】remote/accelerator/BrowserView/contextmenu/shell/dialog

最新推荐文章于 2024-08-16 09:24:03 发布

逆风飞翔的代码单身狗

最新推荐文章于 2024-08-16 09:24:03 发布

阅读量595

点赞数

分类专栏： electron 文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_41530639/article/details/115701855

版权

electron 专栏收录该内容

3 篇文章

订阅专栏

normal：

app – 引入窗口管理

BrowserWindow --主窗口

main.js

var electron = require('electron')

var app = electron.app //引入app
var BrowserWindow = electron.BrowserWindow //窗口引用
var mainWindow = null

app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:600,
        height:400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        } // 加上这句话，electron就可以支持node以及require()语法了
    })
    mainWindow.loadFile('index.html')
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
})

remote – 从主进程继承方法和属性

remote — 当子窗口需要使用到主窗口的方法或者函数、属性

remote.js
var btn = document.querySelector('#btn')
var BrowserWindow = require('electron').remote.BrowserWindow

btn.onclick = ()=>{
    var new_Win = new BrowserWindow({
        width:400,
        height:300,
        webPerferences:{
            nodeIntegration:true
        }
    })
    new_Win.loadFile('1.html')
    new_Win.on('closed',()=>{
        new_win = null
    })
}

index-remote.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">打开新的窗口</button>
    <div class="show"></div>
    <script src="./render/remote.js"></script>
</body>
</html>

main.js


var electron = require('electron')

var app = electron.app //引入app
var BrowserWindow = electron.BrowserWindow //窗口引用
var mainWindow = null

app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:600,
        height:400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        } // 加上这句话，electron就可以支持node以及require()语法了
    })
    mainWindow.loadFile('index-remote.html')
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
})

menu —改变菜单栏

Menu — 主进程的菜单模块配合 e.buildFromTemplate e.setApplicationMenu 使用

menu.js

var {Menu} = require('electron')

var {BrowserWindow} = require('electron')

var template = [
    {
        label:'性别',
        submenu:[
            {
                label:'男',
                click:()=>{
                    var newWin = new BrowserWindow({
                        height:800,
                        width:400
                    })
                    newWin.loadFile('remote.html')
                    newWin.on('closed',()=>{
                        newWin = null
                    })
                }
            },
            {
                label:'女'
            }
        ]
    },
    {
        label:'大小',
        submenu:[
            {
                label:'大'
            },
            {
                label:'小'
            }
        ]
    }
]

var m =Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)


main.js
var electron = require('electron')

var app = electron.app //引入app
var BrowserWindow = electron.BrowserWindow //窗口引用

var mainWindow = null // 申明主窗口


app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:'100%',
        height:'100%',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        } // node 原生模块(fs)和npm的第三方插件都可以用
    }) //创建主窗口
    mainWindow.webContents.openDevTools()
    require('./main/menu.js')
    // require('./render/index-remote.js')
    mainWindow.loadFile('shell.html')  // 加载index.html 页面
    mainWindow.on('closed',()=>{
        mainWindow = null // 关闭主窗口
    })
})

shell – 窗口外打开网页

mainWindow.webContents.openDevTools() – 将这个添加到主进程中，会在窗口打开的时候自动打开调试工具

shell – 超链接不在electron当前应用内打开，而是通过浏览器打开

设置右击菜单之前需要把阻止事件默认行为(e.preventDefault())

shell.js

var {shell} = require('electron')
var aHref = document.querySelector('#a')

aHref.onclick = function(e){
    e.preventDefault()
    var Href = aHref.getAttribute('href')
    shell.openExternal(Href)
}


shell.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a id="a" href="https://jspang.com">技术胖</a>
    <script src="./render/shell.js"></script>
</body>
</html>

在主进程中添加
mainWindow.webContents.openDevTools() 可以在窗口打开同时打开调试工具


尝试写一个electron窗口

main.js


const electron = require('electron') // 引入全局的electron

var app = electron.app  // 实例化窗口
var  BrowserWindow = electron.BrowserWindow  //  创建主线程

var mainWindow = null  // 申明窗口

// 监听事件
app.on('ready',()=>{
	mainWindow = new BrowserWindow({
		width:800,
		height:600,
		webperferences:{
			nodeIntegration:true
		} // 申明node js的原生模块以及第三方依赖均可使用
	})
	mainWindow.loadFile('要加载的文件') // 加载页面
	mainWindow.on('closed',()=>{
		mainWindow = null  //监听页面，关闭的时候将申明的窗口归空
	})
})
```
如果不能正确加载试试将webPerferences修改为:
webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
} 

```
很久没写js了，新建了一个js文件，在html文件引入，一直报require is not defined


var fs = require('fs')

window.onload= function(){
    var btn = document.querySelector('#btn')
    var show = document.querySelector('#show')
    console.log(btn)
    btn.onclick = function(){

    }
}
console.log(123)

打开一个新的页面用到remote(远亲)

设置菜单用到Menu

单机Menu 的子级菜单可以在每一项内部添加click事件

contextmenu – 右击菜单

accelerator – 加速器,在这指代快捷键

contextmenu – 监听右击事件

popup – 弹出右键菜单栏 e.popup({window:remote.getCurrentWindow()})

index-remote.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">打开新的页面</button>
    <script src="./render/index-remote.js"></script>
</body>
</html>

index-remote.js

//  点击窗外跳转

var btn = document.querySelector('#btn')
var BrowserWindow = require('electron').remote.BrowserWindow

var template = [
    {
        label:'复制',
        accelerator:'ctrl+c'
    },
    {
        label:'粘贴',
        accelerator:'ctrl+v'
    }
]
btn.onclick = function(){
    newWin = new BrowserWindow({
        width:800,
        height:600
    })
    newWin.loadFile('remote.html')
    newWin.on('closed',()=>{
        newWin = null
    })
}

// 右击菜单栏

var {remote,} = require('electron')
var m = remote.Menu.buildFromTemplate(template)
window.addEventListener('contextmenu',function(e){
    e.preventDefault()
    m.popup({window:remote.getCurrentWindow()})
})

BrowserView – 把网页嵌入到窗口中

    // BrowserView -- 在窗口嵌入网页
    var BrowserView = electron.BrowserView // 引入BrowserView
    var view = new BrowserView() // 实例化BrowserView
    mainWindow.setBrowserView(view) // 主窗口调用view
    view.setBounds({x:10,y:100,width:1800,height:1200}) // 配置加载的网页窗口位置，宽高
    view.webContents.loadURL('https://jspang.com') // 加载的网址


main.js

var electron = require('electron')

var app = electron.app //引入app
var BrowserWindow = electron.BrowserWindow //窗口引用

var mainWindow = null // 申明主窗口


app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:2000,
        height:1600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        } // node 原生模块(fs)和npm的第三方插件都可以用
    }) //创建主窗口
    mainWindow.webContents.openDevTools()
    // require('./main/menu.js')

    // BrowserView -- 在窗口嵌入网页
    var BrowserView = electron.BrowserView
    var view = new BrowserView()
    mainWindow.setBrowserView(view)
    view.setBounds({x:10,y:100,width:1800,height:1200})
    view.webContents.loadURL('https://jspang.com')
    // require('./render/index-remote.js')
    // mainWindow.loadFile('index-remote.html')  // 加载index-remote.html 页面
    mainWindow.loadFile('index.html')
    mainWindow.on('closed',()=>{
        mainWindow = null // 关闭主窗口
    })
})

dialog – 打开文件对话框

main.js


var electron = require('electron')

var app = electron.app //引入app
var BrowserWindow = electron.BrowserWindow //窗口引用

var mainWindow = null // 申明主窗口


app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:2000,
        height:1600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        } // node 原生模块(fs)和npm的第三方插件都可以用
    }) //创建主窗口
    mainWindow.webContents.openDevTools()
    // require('./main/menu.js')

    // BrowserView -- 在窗口嵌入网页
    // var BrowserView = electron.BrowserView
    // var view = new BrowserView()
    // mainWindow.setBrowserView(view)
    // view.setBounds({x:10,y:100,width:1800,height:1200})
    // view.webContents.loadURL('https://jspang.com')


    // require('./render/index-remote.js')
    mainWindow.loadFile('choose.html')  // 加载index-remote.html 页面
    // mainWindow.loadFile('index.html')
    mainWindow.on('closed',()=>{
        mainWindow = null // 关闭主窗口
    })
})


choose.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="show-img">打开文件</button>
    <button id="save-img">保存文件</button>
    <button id="message-img">消息对话框</button>
    <img src="" alt="" id="img" style="width:100%" />
        
    <script>
        var showImg = document.getElementById('show-img')
        var {dialog} = require('electron').remote
        console.log(dialog)
        showImg.onclick = function(){
            console.log(123)
            dialog.showOpenDialog({
                title:'请选择照片',
                defaultPath:'WechatIMG24@2x.png',
                filters:[{name:'img',extensions:['png','jpg']}],
                buttonLabel:'确定'
            }).then(result=>{
                console.log(result.filePaths)
                let img = document.querySelector('#img')
                img.setAttribute('src',result.filePaths[0])
            }).catch(err=>{
                console.log(err)
            })
        }

        //  保存文件对话框
        var saveImg = document.getElementById('save-img')
        var fs = require('fs')
        saveImg.onclick = function(){
            dialog.showSaveDialog({
                title:'保存文件',
                defaultPath:'123.txt'
            }).then(result=>{
                console.log(result.filePath)
                fs.writeFileSync(result.filePath,'123')
            }).catch(ee=>{
                console.log(ee)
            })
        }

        //  消息对话框
        var messageImg = document.getElementById('message-img')
        messageImg.onclick = function(){
            dialog.showMessageBox({
                type:'warning',
                title:'在不在',
                message:'今天天气好,一起去打球吗？',
                buttons:['去,等我一会','不去了,我今天有点事']
            }).then(result=>{
                console.log(result) // 通过下标去判定点击的哪一个按钮
            }).catch(ee=>{
                console.log(ee)
            })
        }
    </script>
</body>
</html>

这里需要注意的是假如你打开的窗口既没有报错，但是点击按钮并不能打开一个文件对话框，请别怀疑自己，既然没有报错就说明代码本身是没有错误存在的
此时请注意看你的script标签
假如在html中你的script标签是用script：src快捷方式生成的，默认是不会产生效果的，此时你需要把src=""删除

PS：

remote --为什么用绝对路径和相对路径都不能正确的加载页面

在你新创建一个文件，想要运行时，它一直提示你require is not defined
此时你需要在main.js新建BrowserWindow的时候加入：

    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true,
    }

让它支持node.js的写法

在你使用dialog想弹出文件对话框时

 当你把main.js 写完，html文件也写好并且用mainWindow 去挂载这个html文件，窗口也可以打开成功，但是点击按钮，没有办法打开文件对话框的时候
 请注意看看你是不是通过script:src 的方式快捷生成的script标签，请把src=""删掉