Electron-vue客户端开发总结

CodeHor
• 阅读 1638

最近做了Electron-vue相关的客户端开发

做出了如下总结:

利用new BrowserWindow()方法创建窗口对象

能满足开发项目的窗口属性有

win = new BrowserWindow({
    width: 700,
    height: 600,
    minWidth:1000,
    minHeight:600,
        // 文档https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html
    webPreferences: {
        nodeIntegration: true,
        webviewTag: true,
        webSecurity: false,
        allowDisplayingInsecureContent: true,
        allowRunningInsecureContent: true,
    },
})

如果想把客户端窗口顶部菜单去掉

在webPreferences同级节点加上

frame: false,// 去除顶部操作按钮

Electron-vue客户端开发总结
自定义最小化、最大化、关闭窗口按钮功能实现:

在主进程中写入以下代码段

// 控制窗口大小以及关闭
ipcMain.on('close', () => {
    win.destroy();
})
// 窗口最小化
ipcMain.on('toMinimize', () => {
    win.minimize();
})
// 窗口最大化和还原
ipcMain.on('toMaximize', () => {
    if (win.isMaximized()) {
        win.unmaximize();
    } else {
        win.maximize();
    }
})

如果想拖拽窗口利用如下方法:

首先在vue的main.js中引入electron的ipcRenderer

Vue.prototype.$electron = window.require('electron').ipcRenderer

设置公用vue组件为窗口顶部,id为web-top

在mounted中写入

let _this = this;
dragElement(document.getElementById(("web-top")));
function dragElement(elmnt) {
    let [pos1,pos2,pos3,pos4] = [0,0,0,0];
    if (document.getElementById(elmnt.id + "header")) {
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    } else {
        elmnt.onmousedown = dragMouseDown;
        }
        function dragMouseDown(e) {
        e = e || window.event;
        pos3 = e.clientX;
                 pos4 = e.clientY;
                 document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    }    function elementDrag(e) {
        e = e || window.event;
                // e.movementX、e.movementY分别为窗口移动的方位和像素,为正负数值
        var param = e.movementX + "," + e.movementY;
        _this.$electron.send('changeWinPosition',param);
    }
    function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

在主进程中写入

// 拖拽调整窗口位置
ipcMain.on('changeWinPosition', (event, arg) => {
    let [x,y] =[0,0];
    x = arg.split(",")[0];
    y = arg.split(",")[1];
    win.setBounds({ x: win.getPosition()[0] + parseInt(x), y: win.getPosition()[1] + parseInt(y) })
})
点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Karen110 Karen110
3年前
​一篇文章总结一下Python库中关于时间的常见操作
前言本次来总结一下关于Python时间的相关操作,有一个有趣的问题。如果你的业务用不到时间相关的操作,你的业务基本上会一直用不到。但是如果你的业务一旦用到了时间操作,你就会发现,淦,到处都是时间操作。。。所以思来想去,还是总结一下吧,本次会采用类型注解方式。time包importtime时间戳从1970年1月1日00:00:00标准时区诞生到现在
Stella981 Stella981
3年前
PhoneGap设置Icon
参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html通过config.xml中的<icon标签来设置Icon<iconsrc"res/ios/icon.png"platform"ios"width"57"height"57"densi
Stella981 Stella981
3年前
PyQt(Python+Qt)学习随笔:窗口对象尺寸调整相关的函数resize、showMaximized、showNormal、showMinimized
resize(width,height)resize可以直接调整窗口的尺寸,调整效果类似于鼠标直接拉伸或缩小窗口,但窗口大小的最大值、最小值受窗口的sizePolicy、sizeHint、minimumSize、maximumSize、minimumSizeHint、拉伸因子以及窗口布局的sizeConstrai
Wesley13 Wesley13
3年前
Maven学习总结(七)——eclipse中使用Maven创建Web项目
Maven学习总结(七)——eclipse中使用Maven创建Web项目一、创建Web项目1.1 选择建立Maven Project  选择File  New Project,如下图所示:在New窗口中选择
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
JEE开发异常处理
      在Java开发中,到处可见Exception或者它的子类。如何在一个已有的框架中或者自己的项目中利用好异常,而不让异常漫天飞,需要开发的积累和总结,这篇日志就为这个目的总结几年来的开发对异常使用总结吧。      首先认识Java异常体系结构,Java中使用Throwable作为所有的异常父类,下面有两大子类Error和Excepti
Wesley13 Wesley13
3年前
Java 设计模式
前言23种经典的模式,根据用途我们又可以分为三大类,分别为创建型模式、结构型模式和行为型模式。创建型模式创建型模式的作用就是创建对象,说到创建一个对象,最熟悉的就是new一个对象,然后set相关属性。但是,在很多场景下,我们需要给客户端提供更加友好的创建对象的方式,尤其是那种我们定义了类,但是需要提供给其他开发者用的时
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
缕析条分Scroll属性 | 京东云技术团队
最近有项目需要使用js原生开发滑动组件,频繁要用到dom元素的各种属性,其中以各种类型的height和top属性居多,名字相近,含义也很容易搞混。因此特地总结归纳了一下常用的知识点,在文末我们来挑战实现一个简易的移动端Scroll组件。
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(