快捷導(dǎo)航

vue+element+electron仿微信實(shí)現(xiàn)代碼

更新時(shí)間：2022年12月15日 14:06:47 作者：愛(ài)芳芳

這篇文章主要介紹了vue+element+electron仿微信實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一.仿得太像了有木有~

1.登錄窗口

2.主窗口

二.構(gòu)思，以微信設(shè)計(jì)布局構(gòu)思

以微信布局構(gòu)思，參考element提供的組件；
element提供的tabs標(biāo)簽頁(yè)剛好能實(shí)現(xiàn)切換效果，element tabs 標(biāo)簽頁(yè)；
element tabs標(biāo)簽頁(yè)雖然能達(dá)到切換效果，但是樣式是在差異較大，所以需要自主編寫(xiě)樣式覆蓋element tabs標(biāo)簽頁(yè)默認(rèn)樣式，以達(dá)到微信ui的樣式效果，毫無(wú)疑問(wèn)這是最大挑戰(zhàn)，也是最核心的工作了；
右邊的內(nèi)容都由左邊的tab切換而來(lái)，所以最左邊是一個(gè)tabs列表，最右邊消息窗口和發(fā)送窗口由每一個(gè)不同的會(huì)話點(diǎn)擊切換而來(lái)，所以消息會(huì)話列表也決定用tabs標(biāo)簽頁(yè)來(lái)實(shí)現(xiàn)；
登錄窗口和主窗口采用同一個(gè)窗口，主要是考慮到vue項(xiàng)目主骨架一體的問(wèn)題，為了簡(jiǎn)單方便，當(dāng)然也可以創(chuàng)建不同的窗口來(lái)實(shí)現(xiàn)，問(wèn)題不大；
整體構(gòu)思完整，可以動(dòng)手了。

三.構(gòu)建項(xiàng)目

當(dāng)然這里不會(huì)詳細(xì)真的手把手教你創(chuàng)建項(xiàng)目，因?yàn)楣俜轿臋n都很詳細(xì)，不做多余的工作哈~

直接看官方文檔，收益更大：

electron官方文檔

1.可以理解electron為我們提供一個(gè)應(yīng)用的盒子，盒子里面還是與普通網(wǎng)頁(yè)、網(wǎng)站實(shí)現(xiàn)一樣，同時(shí)提供應(yīng)用特有的功能，能與網(wǎng)頁(yè)進(jìn)行通訊和交互

electron主腳本與vue不一樣，electron的是background.js，vue的是main.js，兩者不沖突，可以理解為兩個(gè)不同的框架

2.創(chuàng)建登錄窗口：

win = new BrowserWindow({
    width: 230,
    height: 350,
    maximizable: false,
    minimizable: true,
    center: true,
    title: "愛(ài)芳芳防微信",
    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)前訪問(wèn)地址：" + 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)前訪問(wèn)地址：" + process.env.WEBPACK_DEV_SERVER_URL
    );
  }

3.登錄完成創(chuàng)建主窗口，不如說(shuō)是變化窗口大小，跳轉(zhuǎn)到主頁(yè)面：

function initHomeWin(){//設(shè)置窗口
  win.webContents.send('homeWin');
  win.hide();
  //延時(shí)居中窗口
  setTimeout(function(){
    win.setSize(1000, 600, true);
    win.center();
    win.show();
  },1000);
}

4.首頁(yè)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)芳芳
                                <i class="el-icon-s-custom" style="color: #35c4de;"></i>
                            </div>
                            <div style="font-size: 14px;color: gray;">
                                微信號(hào)：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.增加頭像點(diǎn)擊出卡片效果：

6.切換消息會(huì)話，每一個(gè)消息會(huì)話共用一個(gè)頁(yè)面，vue組件思想

更新已讀未讀消息數(shù)量

7.發(fā)送信息

四.總結(jié)

信息發(fā)送內(nèi)容過(guò)大時(shí)樣式會(huì)存在問(wèn)題后續(xù)有更好的實(shí)現(xiàn)方式，將優(yōu)化更換實(shí)現(xiàn)方式五.感謝看到這里，需要源碼或有什么問(wèn)題和想說(shuō)的請(qǐng)私聊！

到此這篇關(guān)于vue+element+electron仿微信實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue+element+electron仿微信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: