vue+element+electron仿微信实现

news2024/12/26 0:09:46

一.仿得太像了有木有~

1.登录窗口

 

2.主窗口

 二.构思,以微信设计布局构思

  1. 以微信布局构思,参考element提供的组件;
  2. element提供的tabs标签页刚好能实现切换效果,element tabs 标签页;
  3. element tabs标签页虽然能达到切换效果,但是样式是在差异较大,所以需要自主编写样式覆盖element tabs标签页默认样式,以达到微信ui的样式效果,毫无疑问这是最大挑战,也是最核心的工作了;
  4. 右边的内容都由左边的tab切换而来,所以最左边是一个tabs列表,最右边消息窗口和发送窗口由每一个不同的会话点击切换而来,所以消息会话列表也决定用tabs标签页来实现;
  5. 登录窗口和主窗口采用同一个窗口,主要是考虑到vue项目主骨架一体的问题,为了简单方便,当然也可以创建不同的窗口来实现,问题不大;
  6. 整体构思完整,可以动手了。

三.构建项目

当然这里不会详细真的手把手教你创建项目,因为官方文档都很详细,不做多余的工作哈~

直接看官方文档,收益更大:

electron官方文档

1.可以理解electron为我们提供一个应用的盒子,盒子里面还是与普通网页、网站实现一样,同时提供应用特有的功能,能与网页进行通讯和交互

electron主脚本与vue不一样,electron的是background.js,vue的是main.js,两者不冲突,可以理解为两个不同的框架

 

2.创建登录窗口:

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]当前访问地址:" + startPage);
    win.webContents.openDevTools();
    //win.webContents.openDevTools();
  } else {
    createProtocol("app");
    //win.loadURL(website.appUrl);
    win.loadURL(`file://${__dirname}/index.html`);
    console.info(
      "[win][index]当前访问地址:" + process.env.WEBPACK_DEV_SERVER_URL
    );
  }

 3.登录完成创建主窗口,不如说是变化窗口大小,跳转到主页面:

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

4.首页tabs,覆盖element默认样式:

<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;">
                                地区:北京
                            </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;">发消息</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,//总未读数量
                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){//刷新消息总未读数量
                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组件思想

更新已读未读消息数量

 7.发送信息

 

四.总结

  • 信息发送内容过大时样式会存在问题
  • 后续有更好的实现方式,将优化更换实现方式

五.感谢看到这里,需要源码或有什么问题和想说的请私聊!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/71685.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如果把网络原理倒过来看,从无到有,一切如此清晰

从物理层到数据链路层 也从上篇我们创造一个计算机网络&#xff0c;你会去怎么设计&#xff1f;&#xff0c;追溯到计算机网络互联的本质就是通信问题&#xff0c;所以从物理层解决使用何种信号来传输比特的问题。 再从物理设备中的集线器&#xff0c;聊到二层的交换机&#…

零基础CSS入门教程(9)——背景颜色和背景图片

本章目录1.任务目标2.背景颜色3.背景图片4.小结1.任务目标 我们前几小节学习了如何设置字体格式&#xff0c;我们这一小节学习一下如何设置背景颜色和图片 2.背景颜色 我们可以通过background-color给标签设置背景颜色&#xff0c;例如&#xff1a; <!DOCTYPE html> …

【世界杯限定】致敬梅西,用Python刻画足球场上的战神

最近卡塔尔世界杯正在火热的进行着&#xff0c;相信球迷们一定不会错过每一场精彩的比赛吧&#xff0c;在看球的同时&#xff0c;小伙伴们不要忘记自己的学习与工作哦&#xff0c;本人纯属路人&#xff0c;虽然不是很懂球&#xff0c;但是很喜欢梅西&#xff0c;所以我开始关注…

云边协同下的统一应用管理: 基于 OpenYurt 和 KubeVela 的解决方案

作者&#xff1a;乔中沛&#xff08;伊灵&#xff09; 背景 随着万物互联场景的逐渐普及&#xff0c;边缘设备的算力也不断增强&#xff0c;如何借助云计算的优势满足复杂多样化的边缘应用场景&#xff0c;让云原生技术延伸到端和边缘成为了新的技术挑战&#xff0c;“云边协…

RNA-seq 详细教程:样本质控(6)

学习目标 了解计数数据变换方法的重要性了解 PCA (principal component analysis)了解如何使用 PCA 和层次聚类评估样本质量1. 质控 DESeq2 工作流程的下一步是 QC&#xff0c;其中包括样本和基因程度上&#xff0c;以对计数数据执行 QC 检查&#xff0c;以帮助我们确保样本或重…

[附源码]Python计算机毕业设计Django右脑开发教育课程管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;我…

iOS现有APP上架流程​

一. 登录App Store Connect​ 1.登录App Store Connect(apple.com)账号密码登录​ 2.点击“我的App”-->”选中升级的APP”-->创建新的APP版本号​ 输入版本的升级内容--》然后点击右上角的“存储”按钮&#xff0c;保存本次修改。​ 上传更新App Store安装包​ Xcode-…

【Rust日报】2022-12-07 测量 Rust 中 HashMap 的开销

测量 Rust 中 HashMap 的开销在处理将大量数据放入 HashMap的项目时&#xff0c;作者开始注意到 HashMap 占用了大量内存并对最小内存使用量进行了粗略计算&#xff0c;得到的常驻内存是预期的两倍多。我们都知道 HashMaps 以空间换取时间。通过使用更多空间&#xff0c;我们能…

Apache HTTP 两个路径穿越漏洞复现

目录 Apache HTTP Server 2.4.49 路径穿越漏洞&#xff08;CVE-2021-41773&#xff09; 漏洞环境&#xff1a; 漏洞复现&#xff1a; 漏洞复现成功&#xff01; Apache HTTP Server 2.4.50 路径穿越漏洞&#xff08;CVE-2021-42013&#xff09; 漏洞复现分析&#xff1a; 漏…

React - Hooks 使用(函数组件中使用 React 特性)

React - Hooks 使用&#xff08;函数组件中使用 React 特性&#xff09;一. 为什么要使用 HOOKS&#xff1f;二. HOOKS 概念三. HOOKS 用法1. useState1.1 参数及返回值1.2 setState 两种写法1.3 setState 示例2. useEffect2.1 useEffect 实例3. useRef3.1 useRef 实例四. 一个…

R语言中的偏最小二乘回归PLS-DA

主成分回归&#xff08;PCR&#xff09;的方法 本质上是使用第一个方法的普通最小二乘&#xff08;OLS&#xff09;拟合来自预测变量的主成分&#xff08;PC&#xff09;。这带来许多优点&#xff1a; 预测变量的数量实际上没有限制。 相关的预测变量不会破坏回归拟合。 但是…

Letbook Cookbook题单——数组4

Letbook Cookbook题单——数组4 59. 螺旋矩阵 II 难度中等 给你一个正整数 n &#xff0c;生成一个包含 1 到 n^2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; [外链图片转存失败,源站可能有防盗链机制,建议将图片保…

毕业设计-基于大数据的PM2.5浓度预测的研究-python

目录 前言 课题背景和意义 实现技术思路 实现效果图样例 前言 &#x1f4c5;大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几年各个学校要求的毕设项目越来越难,有不少课题是研究生级别难度的,对本科…

Excel 函数大全之TRANSPOSE function

TRANSPOSE function 有时您需要切换或旋转单元格。您可以通过复制、粘贴和使用转置选项来完成此操作。但是这样做会产生重复的数据。如果您不想这样,您可以使用 TRANSPOSE 函数键入公式。例如,在下图中,公式=TRANSPOSE(A1:B4)将单元格 A1 到 B4 水平排列。 注意: 如果您有…

Docker基本命令

目录一、Docker基本命令二、Docker镜像常用命令三、Docker 容器常用命令一、Docker基本命令 启动Docker systemctl start docker 停止Docker systemctl stop docker 重启Docker systemctl restart docker 开机启动Docker systemctl enable docker 查看Docker概要信息 dock…

通过动态图形感受数学之美

这两天正在使用PTC Mathcad 软件&#xff0c;它可以通过公式绘制出对应的曲线&#xff0c;通过曲线更容易的去理解公式中各种参数的含义。 下面先看几个例子 可以看到这个软件的函数和绘图功能是非常好用的&#xff0c;唯一的缺点就是&#xff1a;当参数范围比较宽的时候&#…

python+django企业员工人事档案管理系统arlys

系统主要分为两种角色&#xff0c;每个角色的功能如下所示&#xff1a; 管理员功能模块&#xff1a; 1.员工资料管理&#xff1a;查看员工列表&#xff0c;添加职工&#xff0c;修改信息&#xff08;搜索员工使用模糊查询&#xff09; 2.部门管理&#xff1a;查看部门列表&am…

vue.js:全局组件和局部组件

全局组件和局部组件 全局组件的定义的代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"author" content"xiaonaihu" /><meta name"generator" content"HBuilder X" …

知识图谱-KGE-语义匹配-双线性模型-2016:HolE

【paper】 Holographic Embeddings of Knowledge Graphs【简介】 本文是麻省理工的研究人员发表在 AAAI 2016 上的文章&#xff0c;提出了 HolE(Holographic Embedding)&#xff0c;是一个基于向量循环关联操作的组合向量空间模型。 组合表示 不同论文里对同一类方法的表述不…

第十四届蓝桥杯集训——JavaC组第五篇——四则运算/(求余/取模)

第十四届蓝桥杯集训——JavaC组第五篇——四则运算/(求余/取模) 目录 第十四届蓝桥杯集训——JavaC组第五篇——四则运算/(求余/取模) 四则运算 基础运算&#xff1a; 符号优先级 计算示例&#xff1a; 异常处理 取模运算% 基础概念 奇偶数 四则运算 大家都知道&…