electron 仿制QQ登錄界面

youkede 發布于2019-08-23 12:28 / 1216人閱讀

摘要：首先來看看的登錄界面準備開發制作一個窗口先主進程代碼暫時調用界面基本布局我們先大概做一個這樣的界面頁面代碼樣式代碼取消全部的外邊距和內邊距設置窗口的樣式設置手型加一個邊框調試樣式最后要刪除或者更改設置寬度必須要和主進程中設置的一樣不能大于主

首先來看看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
寫入如下代碼:

表單頁css

需要將 .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;
}

效果

最后看到是這樣的

復選框美化 組件代碼

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

效果

注冊頁面

我們改進一點因為qq的注冊是一個連接到web頁面去申請qq號碼的不過我做的是點擊注冊將界面切換到注冊界面,只不過是
在寫注冊界面代碼之前先將父組件種的login注釋掉備用 (別刪除哦) 在父組件中引入Register組件
注冊的邏輯是這樣的在注冊界面輸入手機號和圖形驗證碼獲取到短信驗證碼輸入之后跳轉到下一步輸入密碼
如果將全部的邏輯寫到一個組件中會導致太長雖然有辦法解決但是之后使用動畫就很難看了!

界面代碼

界面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;
}

父組件代碼

部分代碼:

效果

注冊步驟2 界面代碼

展示

footer代碼 jie簡介

在上面中footer里面顯示了注冊賬號
其實這只是暫時的方案為了方便截圖
首先來分析一下在登錄頁面的時候在底部顯示注冊賬號在注冊第一步的時候在底部左側顯示已經賬號,在第二步驟的時候顯示返回上一步
我們有很多辦法在子組件通知父組件去顯示不同的文字
作者給出兩個方案:
1: 通過子組件給父組件傳值
2: 使用vuex
3: 將footer拆分到各個組件中
我們代碼中使用拆分就行了比較簡單點
將父組件的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
});

效果展示

添加動畫效果

上面這些完成之后有點單調尤其是切換的時候我們可以用到 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賬號出了問題一直登錄不上去所以就先發布到碼云了

云服務器 GPU云服務器登錄界面 qq登錄登錄注冊界面 qq空間登錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98581.html

electron仿制百度網盤客戶端2(登錄界面制作)

摘要：效果預覽尺寸測量百度網盤客戶端的尺寸是主界面頂部開始制作下載安裝制作登錄界面首先將主界面隱藏掉只需要在主進程里面設置就可以了之后制作一個登錄界面創建一個在主進程之中引入代碼創建路由創建登錄界面樣式代碼微軟雅黑圖標下載去阿里效果預覽 showImg(https://segmentfault.com/img/bVbizN2?w=1512&h=622); 尺寸測量百度網盤客戶端的尺寸是:...

劉東 2019-08-23 12:30 評論0 收藏0
electron制作聊天界面(仿制qq)

摘要：將炙啖朱亥，持觴勸侯嬴。三杯吐然諾，五岳倒為輕眼花耳熱后，意氣素霓生。救趙揮金槌，邯鄲先震驚。千秋二壯士，烜赫大梁城?？v死俠骨香，不慚世上英。誰能書閣下，白首太玄經。是唐代大詩人李白借樂府古題創作的一首詩。效果圖:showImg(https://segmentfault.com/img/bVbj3Yd?w=1215&h=735); 樣式使用scss和flex布局這也是制作IM系統的...

LucasTwilight 2019-08-23 13:41 評論0 收藏0

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

electron 仿制QQ登錄界面

相關文章

electron仿制百度網盤客戶端2(登錄界面制作)

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

發表評論

0條評論

youkede

女|高級講師

TA的文章

最新活動

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

electron 仿制QQ登錄界面

相關文章

electron仿制百度網盤客戶端2(登錄界面制作)

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

發表評論

0條評論

youkede

女|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！