electron 仿制QQ登录界面

摘要：首先来看看的登录界面准备开发制作一个窗口先主进程代码暂时调用界面基本布局我们先大概做一个这样的界面页面代码样式代码取消全部的外边距和内边距设置窗口的样式设置手型加一个边框调试样式最后要删除或者更改设置宽度必须要和主进程中设置的一样不能大于主

首先来看看qq的登录界面:

import {BrowserWindow, webContents, app, ipcMain} from "electron"

LoginWindow();    //暂时调用

ipcMain.on("quitApp", () => {
    app.quit();
});

function LoginWindow() {
    const loginURL = process.env.NODE_ENV === "development" ? `http://localhost:9080/#/login` : `file://${__dirname}/index.html/#/login`;
    const loginWindow = new BrowserWindow({
        width: 430,
        height: 328,
        alwaysOnTop: true,
        modal: true,
        frame: false,
        darkTheme: true,
        resizable: false,
        minimizable: false,
        maximizable: false,
        transparent: true,
        webPreferences: {
            devTools: false,
        }
    });


    loginWindow.setMenu(null);
    loginWindow.loadURL(loginURL);
}

我们先大概做一个这样的界面

/**
取消全部的外边距和内边距
 */
* {
    padding: 0;
    margin: 0;
}

/*设置窗口的样式*/
.mainWindow {
    cursor: pointer;    /*设置手型*/
    border: 1px solid red;  /*加一个边框 调试样式 最后要删除或者更改**/
    width: 428px;   /*设置宽度  必须要和主进程中设置的一样 不能大于主进程中设置的宽度 否则会出现滚动条*/
    height: 326px;  /*设置高度  必须要和主进程中设置的一样 不能大于主进程中设置的高度 否则会出现滚动条*/
    position: relative; /*设置为相对定位*/
    border-radius: 4px; /*设置圆角*/
}

/**
header的样式 header中只会有一个关闭按钮 处于右上角
 */
.mainWindow header.header {
    position: absolute; /*设置绝对定位 因为背景在他下面*/
    height: 30px;   /*设置高度*/
    background: rgba(0, 0, 0, 0.5); /*暂时设置的 后面要删除或者更改*/
    border-radius: 4px 4px 0 0; /*给header的左上角 右上角设置圆角 不然会出现很尴尬的页面*/
    width: 428px;   /* 因为设置了绝对定位 设置宽度*/
}

/**
背景
 */
.mainWindow main .bg {
    height: 124px;  /*设置高度*/
    width: 428px;   /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    border-radius: 4px 4px 0 0; /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/
    background: blue;  /*暂时设置的 后面要删除或者更改*/
}

/**
放置表单的元素
 */
.mainWindow main .body {
    width: 428px;  /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    height: 172px;  /*设置高度 这里的高度是 主窗口(326) - footer(30) - 背景(124) 因为header设置了绝对定位 所以不用关 */
    background: green;  /*暂时设置的 后面要删除或者更改*/
}

.mainWindow footer.footer {
    position: absolute; /* 设置绝对定位 要让他处于窗口的最底部*/
    height: 30px; /*设置高度 */
    background: red;  /*暂时设置的 后面要删除或者更改*/
    bottom: 0;  /*让footer处于底部*/
    width: 428px; /* 因为设置了绝对定位 设置宽度*/
}

注意 不要使用内置的拖动 我们要自己实现!
在页面中加入以下代码就可以实现拖动了!

data() {
            return {
                windowX: 0,
                windowY: 0,
            }
        },
        mounted() {
            let win = this.$electron.remote.getCurrentWindow();

            document.addEventListener("mousedown", function (e) {
                this.windowX = e.x;
                this.windowY = e.y;
                document.addEventListener("mousemove", moveEvent);
            });

            document.addEventListener("mouseup", function () {
                this.windowX = 0;
                this.windowY = 0;
                document.removeEventListener("mousemove", moveEvent)
            });

            function moveEvent(e) {

                win.setPosition(e.screenX - this.windowX, e.screenY - this.windowY)
            }
        }

将css里面的 .bg修改成:

.mainWindow main .bg {
    height: 124px;  /*设置高度*/
    width: 428px;   /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    border-radius: 4px 4px 0 0; /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/
    background: url("../images/login-back.gif") 10px;
    background-size: 100%;
}

完成之后效果如如下:

顶部的logo和最小化就不做了 只做一个关闭的按钮
去阿里巴巴图标库下载字体文件之后放到assets/fonts目录中
在页面中加入:

 import "@/assets/fonts/iconfont.css"

header代码:

css文件
注意 在css .mainWindow header.header 添加
由于我背景图的关系 按钮可能不太明显 这问题不大 大家可以自己换一个图!

background: rgba(255, 255, 255, 0.2); /*暂时设置的 后面要删除或者更改*/
text-align: right;

.mainWindow header.header span{
    display: inline-block;
    height: 30px;
    width:30px;
    text-align: center;
    line-height: 30px;
    color:#E4393c;
}
.mainWindow header.header span:hover{
    background-color: rgba(255,255,255,0.6);
}

创建一个子组件 login.vue
写入如下代码:

需要将 .mainWindow main .body 的背景颜色调成#FFFFFF

.form form{
    padding:10px 90px 0 90px;
}
.form_item{
    height: 40px;
    position: relative;
}
.form_item i.iconfont{
    position: absolute;
    top:5px;
}
.form_item input{
    outline: none;
    border:none;
    padding-left: 20px;
    font-size: 16px;
    width: 230px;
    height: 30px;
    border-bottom: 1px solid #CCC;
}
.buttons{
    text-align: center;
}
.buttons button{
    background-color: #CF000E;
    border: none;
    width: 250px;
    color: #FFFFFF;
    height: 35px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
}

最后看到是这样的

                
自动登录
                
记住密码
                忘记密码

.login_options{
    margin-bottom: 10px;
    margin-top: 5px;
}
.login_options .option_item {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    position: relative;
    border: 1px solid orange;
    vertical-align: middle;
    cursor: pointer;
    top: -2px;
}

.login_options .option_item input {
    opacity: 0;
}
.login_options  i.text{
    display: inline-block;
    margin-right: 14px;
    font-size: 13px;
    font-style: normal;
}

.login_options .option_item span.checked {
    position: absolute;
    top: -4px;
    right: -3px;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.option_item span.checked img {
    width: 100%;
    height: 100%;
}

input[type="checkbox"] + span {
    opacity: 0;
}

input[type="checkbox"]:checked + span {
    opacity: 1;
}

我们改进一点 因为qq的注册是一个连接到web页面去申请qq号码的 不过我做的是点击注册将界面切换到注册界面,只不过是
在写注册界面代码之前先将父组件种的login注释掉备用 (别删除哦) 在父组件中引入Register组件
注册的逻辑是这样的 在注册界面输入手机号和图形验证码 获取到短信验证码输入之后跳转到下一步输入密码
如果将全部的逻辑写到一个组件中会导致太长 虽然有办法解决 但是之后使用动画就很难看了!

.captcha {
    position: absolute;
    width: 120px;
    height: 30px;
    top: -2px;
    right: 0;
}

.captcha img {
    width: 100%;
    height: 100%;
}

.send_sms_captcha {
    position: absolute;
    top: -2px;
    right: 0;
}
.send_sms_captcha  button{
    width:120px;
    height: 30px;
    border:none;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
}

部分代码:

在上面中footer里面显示了注册账号
其实这只是暂时的方案 为了方便截图
首先来分析一下 在登录页面的时候在底部显示注册账号 在注册第一步的时候在底部左侧显示已经账号,在第二步骤的时候显示返回上一步
我们有很多办法在子组件通知父组件去显示不同的文字
作者给出两个方案:
1: 通过子组件给父组件传值
2: 使用vuex
3: 将footer拆分到各个组件中
我们代码中使用拆分就行了 比较简单点
将父组件的footer删除
往组件login.vue steps1.vue steps2.vue 组件中加入footer

const state = {
    steps: true,
    login: true,
};

const actions = {
    toggleSteps: function ({state, commit}) {
        // state.steps = true;
        state.steps = !state.steps;
    },

    toggleLogin({state, commit}){
        state.login = !state.login;
    }
};

export default ({
    state,
    actions
});

上面这些完成之后有点单调 尤其是切换的时候 我们可以用到 animateCss
animateCss 下载地址:https://daneden.github.io/ani...

子组件加入:

 import "@/assets/css/animate.css"

之后我们在代码中加入效果就行了
将父组件改成:

子组件 register.vue改成:

修改下css 因为要使用动画就要将main定位才能用
加入:

.mainWindow main {
    position: absolute;
}

效果展示:

到这里就差不多了 代码太多没法一一发布上来 如果有需要的可以去github下载或者加QQ群 814270669
github地址:https://github.com/lihaotian0...
码云地址: https://gitee.com/leehaotian/...

我的github账号出了问题 一直登录不上去 所以就先发布到码云了