electron 仿制QQ登錄界面

youkede 發(fā)布于2019-08-23 12:28 / 1307人閱讀

摘要：首先來(lái)看看的登錄界面準(zhǔn)備開(kāi)發(fā)制作一個(gè)窗口先主進(jìn)程代碼暫時(shí)調(diào)用界面基本布局我們先大概做一個(gè)這樣的界面頁(yè)面代碼樣式代碼取消全部的外邊距和內(nèi)邊距設(shè)置窗口的樣式設(shè)置手型加一個(gè)邊框調(diào)試樣式最后要?jiǎng)h除或者更改設(shè)置寬度必須要和主進(jìn)程中設(shè)置的一樣不能大于主

首先來(lái)看看qq的登錄界面:

準(zhǔn)備開(kāi)發(fā) 制作一個(gè)窗口先 主進(jìn)程代碼:

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

LoginWindow();    //暫時(shí)調(diào)用

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);
}

界面基本布局

我們先大概做一個(gè)這樣的界面

頁(yè)面代碼:

樣式代碼:

/**
取消全部的外邊距和內(nèi)邊距
 */
* {
    padding: 0;
    margin: 0;
}

/*設(shè)置窗口的樣式*/
.mainWindow {
    cursor: pointer;    /*設(shè)置手型*/
    border: 1px solid red;  /*加一個(gè)邊框 調(diào)試樣式 最后要?jiǎng)h除或者更改**/
    width: 428px;   /*設(shè)置寬度  必須要和主進(jìn)程中設(shè)置的一樣 不能大于主進(jìn)程中設(shè)置的寬度 否則會(huì)出現(xiàn)滾動(dòng)條*/
    height: 326px;  /*設(shè)置高度  必須要和主進(jìn)程中設(shè)置的一樣 不能大于主進(jìn)程中設(shè)置的高度 否則會(huì)出現(xiàn)滾動(dòng)條*/
    position: relative; /*設(shè)置為相對(duì)定位*/
    border-radius: 4px; /*設(shè)置圓角*/
}

/**
header的樣式 header中只會(huì)有一個(gè)關(guān)閉按鈕 處于右上角
 */
.mainWindow header.header {
    position: absolute; /*設(shè)置絕對(duì)定位 因?yàn)楸尘霸谒旅?/
    height: 30px;   /*設(shè)置高度*/
    background: rgba(0, 0, 0, 0.5); /*暫時(shí)設(shè)置的 后面要?jiǎng)h除或者更改*/
    border-radius: 4px 4px 0 0; /*給header的左上角 右上角設(shè)置圓角 不然會(huì)出現(xiàn)很尷尬的頁(yè)面*/
    width: 428px;   /* 因?yàn)樵O(shè)置了絕對(duì)定位 設(shè)置寬度*/
}

/**
背景
 */
.mainWindow main .bg {
    height: 124px;  /*設(shè)置高度*/
    width: 428px;   /*設(shè)置寬度 也可以不用設(shè)置 因?yàn)檫@個(gè)元素沒(méi)有設(shè)置絕對(duì)定位 所以默認(rèn)就是100%*/
    border-radius: 4px 4px 0 0; /*給左上角 右上角設(shè)置圓角 不然會(huì)出現(xiàn)很尷尬的頁(yè)面 這里和header重合在一起了*/
    background: blue;  /*暫時(shí)設(shè)置的 后面要?jiǎng)h除或者更改*/
}

/**
放置表單的元素
 */
.mainWindow main .body {
    width: 428px;  /*設(shè)置寬度 也可以不用設(shè)置 因?yàn)檫@個(gè)元素沒(méi)有設(shè)置絕對(duì)定位 所以默認(rèn)就是100%*/
    height: 172px;  /*設(shè)置高度 這里的高度是 主窗口(326) - footer(30) - 背景(124) 因?yàn)閔eader設(shè)置了絕對(duì)定位 所以不用關(guān) */
    background: green;  /*暫時(shí)設(shè)置的 后面要?jiǎng)h除或者更改*/
}

.mainWindow footer.footer {
    position: absolute; /* 設(shè)置絕對(duì)定位 要讓他處于窗口的最底部*/
    height: 30px; /*設(shè)置高度 */
    background: red;  /*暫時(shí)設(shè)置的 后面要?jiǎng)h除或者更改*/
    bottom: 0;  /*讓footer處于底部*/
    width: 428px; /* 因?yàn)樵O(shè)置了絕對(duì)定位 設(shè)置寬度*/
}

窗口拖動(dòng)

注意不要使用內(nèi)置的拖動(dòng) 我們要自己實(shí)現(xiàn)!
在頁(yè)面中加入以下代碼就可以實(shí)現(xiàn)拖動(dòng)了!

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)
            }
        }

設(shè)置背景圖

將css里面的 .bg修改成:

.mainWindow main .bg {
    height: 124px;  /*設(shè)置高度*/
    width: 428px;   /*設(shè)置寬度 也可以不用設(shè)置 因?yàn)檫@個(gè)元素沒(méi)有設(shè)置絕對(duì)定位 所以默認(rèn)就是100%*/
    border-radius: 4px 4px 0 0; /*給左上角 右上角設(shè)置圓角 不然會(huì)出現(xiàn)很尷尬的頁(yè)面 這里和header重合在一起了*/
    background: url("../images/login-back.gif") 10px;
    background-size: 100%;
}

完成之后效果如如下:

制作頂部

頂部的logo和最小化就不做了只做一個(gè)關(guān)閉的按鈕
去阿里巴巴圖標(biāo)庫(kù)下載字體文件之后放到assets/fonts目錄中
在頁(yè)面中加入:

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

header代碼:

css文件
注意在css .mainWindow header.header 添加
由于我背景圖的關(guān)系按鈕可能不太明顯這問(wèn)題不大大家可以自己換一個(gè)圖!

background: rgba(255, 255, 255, 0.2); /*暫時(shí)設(shè)置的 后面要?jiǎng)h除或者更改*/
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);
}

制作表單頁(yè) 表單界面代碼

創(chuàng)建一個(gè)子組件 login.vue
寫(xiě)入如下代碼:

表單頁(yè)css

需要將 .mainWindow main .body 的背景顏色調(diào)成#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;
}

效果

最后看到是這樣的

復(fù)選框美化 組件代碼


                
自動(dòng)登錄
                
記住密碼
                忘記密碼

css代碼

.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;
}

效果

注冊(cè)頁(yè)面

我們改進(jìn)一點(diǎn) 因?yàn)閝q的注冊(cè)是一個(gè)連接到web頁(yè)面去申請(qǐng)qq號(hào)碼的不過(guò)我做的是點(diǎn)擊注冊(cè)將界面切換到注冊(cè)界面,只不過(guò)是
在寫(xiě)注冊(cè)界面代碼之前先將父組件種的login注釋掉備用 (別刪除哦) 在父組件中引入Register組件
注冊(cè)的邏輯是這樣的在注冊(cè)界面輸入手機(jī)號(hào)和圖形驗(yàn)證碼獲取到短信驗(yàn)證碼輸入之后跳轉(zhuǎn)到下一步輸入密碼
如果將全部的邏輯寫(xiě)到一個(gè)組件中會(huì)導(dǎo)致太長(zhǎng) 雖然有辦法解決但是之后使用動(dòng)畫(huà)就很難看了!

界面代碼

界面Css代碼

.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;
}

父組件代碼

部分代碼:

效果

注冊(cè)步驟2 界面代碼

展示

footer代碼 jie簡(jiǎn)介

在上面中footer里面顯示了注冊(cè)賬號(hào)
其實(shí)這只是暫時(shí)的方案為了方便截圖
首先來(lái)分析一下在登錄頁(yè)面的時(shí)候在底部顯示注冊(cè)賬號(hào) 在注冊(cè)第一步的時(shí)候在底部左側(cè)顯示已經(jīng)賬號(hào),在第二步驟的時(shí)候顯示返回上一步
我們有很多辦法在子組件通知父組件去顯示不同的文字
作者給出兩個(gè)方案:
1: 通過(guò)子組件給父組件傳值
2: 使用vuex
3: 將footer拆分到各個(gè)組件中
我們代碼中使用拆分就行了比較簡(jiǎn)單點(diǎn)
將父組件的footer刪除
往組件login.vue steps1.vue steps2.vue 組件中加入footer

login.vue:

steps1.vue

steps2.vue

vuex 代碼

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
});

效果展示

添加動(dòng)畫(huà)效果

上面這些完成之后有點(diǎn)單調(diào) 尤其是切換的時(shí)候我們可以用到 animateCss
animateCss 下載地址:https://daneden.github.io/ani...

子組件加入:

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

之后我們?cè)诖a中加入效果就行了
將父組件改成:

子組件 register.vue改成:

修改下css 因?yàn)橐褂脛?dòng)畫(huà)就要將main定位才能用
加入:

.mainWindow main {
    position: absolute;
}

效果展示:

到這里就差不多了代碼太多沒(méi)法一一發(fā)布上來(lái) 如果有需要的可以去github下載或者加QQ群 814270669
github地址:https://github.com/lihaotian0...
碼云地址: https://gitee.com/leehaotian/...

我的github賬號(hào)出了問(wèn)題一直登錄不上去所以就先發(fā)布到碼云了

GPU云服務(wù)器云服務(wù)器登錄界面 qq登錄登錄注冊(cè)界面 qq空間登錄

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98581.html

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

electron 仿制QQ登錄界面

相關(guān)文章

electron仿制百度網(wǎng)盤(pán)客戶(hù)端2(登錄界面制作)

electron制作聊天界面(仿制qq)

發(fā)表評(píng)論

0條評(píng)論

youkede

女|高級(jí)講師

TA的文章

最新活動(dòng)

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

electron 仿制QQ登錄界面

相關(guān)文章

electron仿制百度網(wǎng)盤(pán)客戶(hù)端2(登錄界面制作)

electron制作聊天界面(仿制qq)

發(fā)表評(píng)論

0條評(píng)論

youkede

女|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！