vue+element+electron仿微信實現(xiàn)代碼
更新時間：2022年12月15日 14:06:47 作者：愛芳芳
這篇文章主要介紹了vue+element+electron仿微信實現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一.仿得太像了有木有~
1.登錄窗口
2.主窗口
二.構(gòu)思，以微信設(shè)計布局構(gòu)思
- 以微信布局構(gòu)思，參考element提供的組件；
- element提供的tabs標(biāo)簽頁剛好能實現(xiàn)切換效果，element tabs 標(biāo)簽頁；
- element tabs標(biāo)簽頁雖然能達(dá)到切換效果，但是樣式是在差異較大，所以需要自主編寫樣式覆蓋element tabs標(biāo)簽頁默認(rèn)樣式，以達(dá)到微信ui的樣式效果，毫無疑問這是最大挑戰(zhàn)，也是最核心的工作了；
- 右邊的內(nèi)容都由左邊的tab切換而來，所以最左邊是一個tabs列表，最右邊消息窗口和發(fā)送窗口由每一個不同的會話點擊切換而來，所以消息會話列表也決定用tabs標(biāo)簽頁來實現(xiàn)；
- 登錄窗口和主窗口采用同一個窗口，主要是考慮到vue項目主骨架一體的問題，為了簡單方便，當(dāng)然也可以創(chuàng)建不同的窗口來實現(xiàn)，問題不大；
- 整體構(gòu)思完整，可以動手了。
三.構(gòu)建項目
當(dāng)然這里不會詳細(xì)真的手把手教你創(chuàng)建項目，因為官方文檔都很詳細(xì)，不做多余的工作哈~
直接看官方文檔，收益更大：
1.可以理解electron為我們提供一個應(yīng)用的盒子，盒子里面還是與普通網(wǎng)頁、網(wǎng)站實現(xiàn)一樣，同時提供應(yīng)用特有的功能，能與網(wǎng)頁進(jìn)行通訊和交互
electron主腳本與vue不一樣，electron的是background.js，vue的是main.js，兩者不沖突，可以理解為兩個不同的框架
2.創(chuàng)建登錄窗口：
win = new BrowserWindow({
width: 230,
height: 350,
maximizable: false,
minimizable: true,
center: true,
title: "愛芳芳防微信",
icon: winIcon, // sets window icon
//menu: null,
resizable: false,
frame: false,
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
webviewTag: false,
webSecurity: false,
plugins: true,
},
});
win.on("move", (arg1) => {
return;
});
win.setAlwaysOnTop(true);
if (process.env.WEBPACK_DEV_SERVER_URL) {
let startPage = process.env.WEBPACK_DEV_SERVER_URL + "/index.html";
//win.loadURL(website.appUrl);
win.loadURL(startPage);
console.info("[win]當(dāng)前訪問地址：" + startPage);
win.webContents.openDevTools();
//win.webContents.openDevTools();
} else {
createProtocol("app");
//win.loadURL(website.appUrl);
win.loadURL(`file://${__dirname}/index.html`);
console.info(
"[win][index]當(dāng)前訪問地址：" + process.env.WEBPACK_DEV_SERVER_URL
);
}
3.登錄完成創(chuàng)建主窗口，不如說是變化窗口大小，跳轉(zhuǎn)到主頁面：
function initHomeWin(){//設(shè)置窗口
win.webContents.send('homeWin');
win.hide();
//延時居中窗口
setTimeout(function(){
win.setSize(1000, 600, true);
win.center();
win.show();
},1000);
}4.首頁tabs，覆蓋element默認(rèn)樣式：
<template>
<div style="" class="menu-tab">
<div style="width: 55px;height: 50px;position: absolute;top: 30px;z-index: 99;text-align: center;">
<el-popover
placement="right"
width="250"
trigger="click">
<div>
<div style="display: flex;margin: 10px;overflow: hidden;">
<div>
<el-image :src="avatar" style="width: 60px;height: 60px; border-radius: 5px;"></el-image>
</div>
<div style="margin-left: 10px;">
<div style="font-size: 16px;color: #000;">
愛芳芳
<i class="el-icon-s-custom" style="color: #35c4de;"></i>
</div>
<div style="font-size: 14px;color: gray;">
微信號：love_fang
</div>
<div style="font-size: 14px;color: gray;">
地區(qū)：北京
</div>
</div>
</div>
<div style="text-align: center;border-top: 1px solid #f0f0f0;padding-top: 20px;">
<el-button type="success" size="small" style="width: 110px;">發(fā)消息</el-button>
</div>
</div>
<el-image :src="avatar" slot="reference" style="width: 36px;height: 36px; border-radius: 5px;cursor: pointer;"></el-image>
</el-popover>
</div>
<el-tabs tab-position="left" v-model="activeName" @tab-click="loadTab">
<el-tab-pane label="" name="first" key="first">
<span slot="label" :class="(menuText==='first'?'menu-active':'menu-icon')">
<el-badge :value="unReadNum" :max="99" :hidden="unReadNum === 0" class="item">
<i class="el-icon-chat-round"></i>
</el-badge>
</span>
<menu-chat @refreshUnReadNum="refreshUnReadNum"></menu-chat>
</el-tab-pane>
<el-tab-pane label="" name="second" key="second">
<span slot="label" :class="(menuText==='second'?'menu-active':'menu-icon')"><i class="el-icon-s-check"></i></span>
</el-tab-pane>
<el-tab-pane label="" name="third" key="third">
<span slot="label" :class="(menuText==='third'?'menu-active':'menu-icon')"><i class="el-icon-collection"></i></span>
</el-tab-pane>
<el-tab-pane label="" name="fourth" key="fourth">
<span slot="label" :class="(menuText==='fourth'?'menu-active':'menu-icon')"><i class="el-icon-folder-opened"></i></span>
</el-tab-pane>
<el-tab-pane label="" name="fifth" key="fifth">
<span slot="label" :class="(menuText==='fifth'?'menu-active':'menu-icon')"><i class="el-icon-orange"></i></span>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import menuChat from '@/views/index/menu_chat/index.vue';
export default {
name: "homeWin",
components:{
menuChat:menuChat,
},
data() {
return {
unReadNum: 121,//總未讀數(shù)量
activeName:'first',
menuText: 'first',
avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F22%2F20210622154903_3c36a.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672907135&t=77ba3e01d433d87c1e0ea51f9aa39dd3'
};
},
watch: {
},
created() {
},
mounted() {
},
methods: {
loadTab(tab, event) {//切換消息列表
this.menuText = tab.name;
},
refreshUnReadNum(subNum){//刷新消息總未讀數(shù)量
console.info('subNum=' + subNum);
if(subNum && subNum > 0){
this.unReadNum = this.unReadNum - subNum;
if(this.unReadNum < 0){
this.unReadNum = 0;
}
}
}
}
};
</script>
<style>
.menu-tab{
height: 100%!important;
}
.menu-tab>.el-tabs{
height: 100%!important;
}
.menu-tab>.el-tabs>.el-tabs__header{
height: 100%!important;
}
.menu-tab>.el-tabs>.el-tabs__header .el-tabs__nav-wrap{
height: 100%!important;
}
.menu-tab>.el-tabs>.el-tabs__header .el-tabs__nav{
height: 100%!important;
}
.menu-tab>.el-tabs>.el-tabs__header .el-tabs__nav-scroll{
height: 100%!important;
background-color: rgb(46,46,46)!important;
}
.menu-tab .is-left{
margin-right: 0!important;
}
.menu-tab .el-tabs__active-bar{
display: none!important;
}
.menu-tab>.el-tabs>.el-tabs__header .el-tabs__item{
width: 55px;
padding: 0!important;
text-align: center!important;
}
.menu-tab #tab-first{
margin-top: 60px!important;
}
.menu-icon{
font-size: 20px!important;
color: #cccccc !important;
}
.menu-active{
font-size: 20px!important;
color: rgb(7,193,96)!important;
}
.menu-tab .el-tabs__content{
height: 100%!important;
}
.menu-tab .el-tab-pane{
height: 100%!important;
}
</style>
5.增加頭像點擊出卡片效果：
6.切換消息會話，每一個消息會話共用一個頁面，vue組件思想
更新已讀未讀消息數(shù)量
7.發(fā)送信息
四.總結(jié)
信息發(fā)送內(nèi)容過大時樣式會存在問題后續(xù)有更好的實現(xiàn)方式，將優(yōu)化更換實現(xiàn)方式五.感謝看到這里，需要源碼或有什么問題和想說的請私聊！
到此這篇關(guān)于vue+element+electron仿微信實現(xiàn)的文章就介紹到這了,更多相關(guān)vue+element+electron仿微信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項目優(yōu)化的一些實戰(zhàn)策略，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue.js編譯時給生成的文件增加版本號，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在本篇文章中，我們給大家詳細(xì)講述了vue中如何配置less的詳細(xì)代碼和步驟，有需要的朋友跟著學(xué)習(xí)下。2018-09-09
Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的示例代碼
這篇文章主要詳細(xì)介紹了Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的方法步驟,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)計算器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue?如何引入本地某個文件?require，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue的土著指令和自定義指令的用法講解 ,需要的朋友可以參考下2018-02-02
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本篇文章主要給大家講述了VueJS應(yīng)用中管理用戶權(quán)限的詳細(xì)過程和方法，以及相關(guān)的代碼展示，需要的朋友參考下吧。2018-02-02