当前位置:首页 > electron > 正文内容

electron

自由小鸟5年前 (2020-10-22)electron2344

1,在项目打开第三方网站
》1主进程中写

  1. var BrowserView = electron.BrowserView //引入BrowserView
  2. var view = new BrowserView() //new出对象
  3. mainWindow.setBrowserView(view) // 在主窗口中设置view可用
  4. view.setBounds({x:0,y:100,width:1200, height:800}) //定义view的具体样式和位置
  5. view.webContents.loadURL('https://jspang.com') //wiew载入的页面

》2在渲染层用webview

  1. <webview src=""></webview>

2,自定义菜单

  1. const { Menu ,BrowserWindow} = require('electron')
  2. var template = [
  3. {
  4. label:'凤来怡洗浴会所',
  5. submenu:[
  6. {
  7. label:'精品SPA',
  8. //主要代码--------------start
  9. click:()=>{
  10. win = new BrowserWindow({
  11. width:500,
  12. height:500,
  13. webPreferences:{ nodeIntegration:true}
  14. })
  15. win.loadFile('yellow.html')
  16. win.on('closed',()=>{
  17. win = null
  18. })
  19. }
  20. //主要代码----------------end
  21. },
  22. {label:'泰式按摩'}
  23. ]
  24. },
  25. {
  26. label:'大浪淘沙洗浴中心',
  27. submenu:[
  28. {label:'牛奶玫瑰浴'},
  29. {label:'爱情拍拍手'}
  30. ]
  31. }
  32. ]
  33. var m = Menu.buildFromTemplate(template)
  34. Menu.setApplicationMenu(m)

然后再打开主进程main.js文件,在ready生命周期中,直接加入下面的代码,就可以实现自定义菜单了。

  1. require('./main/menu.js')

3,绑定快捷键的属性是accelerator属性,比如我们新打开一个窗口,我们就的代码可以写成这样

  1. const { Menu ,BrowserWindow} = require('electron')
  2. var template = [
  3. {
  4. label:'凤来怡洗浴会所',
  5. submenu:[
  6. {
  7. label:'精品SPA',
  8. accelerator:`ctrl+n`, //这里是主要代码
  9. click:()=>{
  10. win = new BrowserWindow({
  11. width:500,
  12. height:500,
  13. webPreferences:{ nodeIntegration:true}
  14. })
  15. win.loadFile('yellow.html')
  16. win.on('closed',()=>{
  17. win = null
  18. })
  19. }
  20. },
  21. {label:'泰式按摩'}
  22. ]
  23. },
  24. {
  25. label:'大浪淘沙洗浴中心',
  26. submenu:[
  27. {label:'牛奶玫瑰浴'},
  28. {label:'爱情拍拍手'}
  29. ]
  30. }chengxu
  31. ]
  32. var m = Menu.buildFromTemplate(template)
  33. Menu.setApplicationMenu(m)

4,当我们要使用Menu模块,它是主线中的模块,如果想在渲染线程中使用,就必须使用remote。代码如下:

  1. const { remote} = require('electron')
  2. var rigthTemplate = [
  3. {label:'粘贴'},
  4. {label:'复制'}
  5. ]
  6. var m = remote.Menu.buildFromTemplate(rigthTemplate)
  7. window.addEventListener('contextmenu',function(e){
  8. //阻止当前窗口默认事件
  9. e.preventDefault();
  10. //把菜单模板添加到右键菜单
  11. m.popup({window:remote.getCurrentWindow()})
  12. })

5,程序打开调试模式

  1. mainWindow.webContents.openDevTools()

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=98

“electron” 的相关文章

electron

electron

Electron简要介绍一开始学习electron的时候,我被官网文档密密麻麻的概念所镇住了: 概念太多,没有办法一下子接受。所以我自己学习完electron开发后,做了一张图。来看看图理解一下什么是electron,以及它包括了啥: 图解electron由Node.js+Chromiu...

electron 学习笔记

electron 特性1,支持多窗口应用,每一个窗口都会有自己独立的javascript上下文2,通过屏幕API整合桌面系统的特性,与本地开发语言编写的桌面应用的效果类似3,支持获取计算机电源状态4,支持阻止操作进入省电模式,对于一些演示文稿类的应用非常有用5,支持创建托盘应用6,支持创建菜单和菜单...