vue+element+electron仿微信实现

一.仿得太像了有木有~

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默认样式：

5.增加头像点击出卡片效果：

 6.切换消息会话，每一个消息会话共用一个页面，vue组件思想

更新已读未读消息数量

 7.发送信息

 

四.总结

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

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