electron vue 模仿qq登录界面功能实现

Rena ·

更新时间:2024-11-13

· 186 次阅读

1、使用vuecli创建vue项目

2、安装electron

3、vue项目安装Electron-builder打包工具

4、在vue项目的src下有个background.js文件

5、安装remote模块

6、代码

7、效果图

1、使用vuecli创建vue项目

我用的vue2

vue create qq_test 2、安装electron

npm install electron -g
//or
npm install electron@12.0.11   //老版本

3、vue项目安装Electron-builder打包工具

版本我选择的是12

vue add electron-builder 4、在vue项目的src下有个background.js文件

background.js里面有默认的配置，修改后我的配置大概如下

'use strict'
import { app, protocol, BrowserWindow, Menu, Tray } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 432,
    height: 331,
    alwaysOnTop: true,//窗口一直保持在其他窗口前面
    modal: true,
    frame: false,
    darkTheme: true,
    resizable: false,//用户不可以调整窗口
    center: true, // 窗口居中
    transparent: false,//窗口透明
    show: false,// 显示窗口将没有视觉闪烁（配合下面的ready-to-show事件）
    hasShadow: true,//窗口是否有阴影
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      // contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      devTools: true,//客户端可以打开开发者工具（在客户端打开快捷键：ctrl+shift+i）
      nodeIntegration: true,
      enableRemoteModule: true, // 使用remote模块(electron12版本就开始废除了,需要我们自己安装remote模块)
      contextIsolation: false,
      //解决axios请求跨域问题（不推荐，不安全，但简单好用）
      webSecurity: false,
    },
  })
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.once('ready-to-show', () => {
  win.show();
})
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

5、安装remote模块

因为electron12版本开始就废除了remote模块，我们需要自己安装

npm install @electron/remote --save
//or
cnpm install @electron/remote --save

能在客户端实现最大化、最小化、关闭功能

6、代码

1、Login.vue页面（登录页面）

里面的最小化图标、关闭图标、最大化图标请自己去 iconfont-阿里巴巴矢量图标库下载

<template>
  <div class="login" style="overflow:hidden;">
    <!-- 顶部 -->
    <header class="header">
      <!-- 最小化按钮 -->
      <span @click="minwin" class="iconfont icon-24gl-minimization"></span>
      <!-- 关闭按钮 -->
      <span @click="close" class="iconfont icon-guanbi"></span>
    </header>
    <main>
      <!-- 顶部背景图 -->
      <div class="bg">
        <img style="" src="../../assets/images/login.gif" />
      </div>
      <!-- 登录表单组件 -->
      <div class="body">
        <Login_form></Login_form>
      </div>
    </main>
    <footer class="footer">
      <div class="zczh" @click="zc">注册账号</div>
      <div>
        <span title="二维码登录" class="iconfont icon-erweima"></span>
      </div>
    </footer>
  </div>
</template>
<script>
import "@/assets/css/login.css";
import "@/assets/fonts/gb/iconfont.css";
import "@/assets/fonts/zxh/iconfont.css";
import "@/assets/fonts/ewm/iconfont.css";
import Login_form from "@/components/Login_form.vue";
//网页测试要关闭,打包成软件要启动
const { remote } = window.require("electron");
export default {
  name: "login",
  data() {
    return {};
  },
  components: {
    Login_form,
  },
  methods: {
    close() {
      // 只是关闭窗口，软件不退出
      // remote.getCurrentWindow().hide()
      // 关闭窗口，退出软件
      remote.getCurrentWindow().close();
    },
    // 最小化
    minwin() {
      // 最小化，在任务栏显示
      remote.getCurrentWindow().minimize()
      // 隐藏窗口,任务栏也隐藏
      // remote.getCurrentWindow().hide();
    },
    zc() {
      this.$router.push("/reg");
    },
  },
  mounted() {
    //显示窗口
    remote.getCurrentWindow().show();
  },
};
</script>
<style lang="scss" scpoed>
.login {
  max-width: 900px;
  overflow: hidden;
  min-width: 430px;
  .bg {
    img {
      width: 430px;
      height: 124px;
      object-fit: cover;
    }
  }
}
</style>

2、login.css

/**
取消全部的外边距和内边距
 */
* {
    padding: 0;
    margin: 0;
}
/*设置窗口的样式*/
.login {
    cursor: default;
    /*设置手型*/
    /* border: 1px solid red; */
    /*加一个边框 调试样式 最后要删除或者更改**/
    width: 430px;
    /*设置宽度  必须要和主进程中设置的一样 不能大于主进程中设置的宽度 否则会出现滚动条*/
    height: 329px;
    /*设置高度  必须要和主进程中设置的一样 不能大于主进程中设置的高度 否则会出现滚动条*/
    position: relative;
    /*设置为相对定位*/
    /* border-radius: 4px; */
    /*设置圆角*/
    border: 1px solid #464545;
    /* 拖 */
    -webkit-app-region: drag;
    /* 禁止滚动条 */
    overflow: hidden;
}
/**
header的样式 header中只会有一个关闭按钮 处于右上角
 */
.login header.header {
    position: absolute;
    /*设置绝对定位 因为背景在他下面*/
    height: 30px;
    /*设置高度*/
    /* border-radius: 20px 20px 0 0; */
    /*给header的左上角 右上角设置圆角 不然会出现很尴尬的页面*/
    width: 428px;
    /* 因为设置了绝对定位 设置宽度*/
    /* background: rgba(255, 255, 255, 0.2); */
    /*暂时设置的 后面要删除或者更改*/
    text-align: right;
}
/**
背景
 */
.login main .bg {
    height: 124px;
    /*设置高度*/
    width: 430px;
    /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    /* border-radius: 4px 4px 0 0; */
    /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/
    /* background: url("@/assets/images/login.gif") 10px; */
    background-size: 100%;
}
/**
放置表单的元素
 */
.login main .body {
    width: 428px;
    /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    height: 200px;
    /*设置高度 这里的高度是 主窗口(326) - footer(30) - 背景(124) 因为header设置了绝对定位 所以不用关 */
    /* background: green; */
    /*暂时设置的 后面要删除或者更改*/
}
.login footer.footer {
    position: absolute;
    /* 设置绝对定位 要让他处于窗口的最底部*/
    height: 30px;
    /*设置高度 */
    /* background: red; */
    /*暂时设置的 后面要删除或者更改*/
    bottom: 0;
    /*让footer处于底部*/
    width: 397.99px;
    /* 因为设置了绝对定位 设置宽度*/
    /* border-radius: 0 0 5px 5px; */
    background-color: #FFFFFF;
}
.login header.header span{
    display: inline-block;
    height: 30px;
    width:30px;
    text-align: center;
    line-height: 30px;
    color:#E4393c;
    cursor: pointer;
}
.login header.header span:hover{
    background-color: rgba(255,255,255,0.6);
    cursor: pointer;
}
.zczh{
    cursor: pointer;
    color: #7c7a7a;
    user-select: none;
    -webkit-app-region: no-drag;
}
.zczh:hover{
    cursor: pointer;
    color: black;
    user-select: none;
    -webkit-app-region: no-drag;
}

3、Login_form.vue组件

里面的resetMessage信息提示是我重新封装的element组件（我就不放上去了）

里面的最小化图标、关闭图标、最大化图标请自己去 iconfont-阿里巴巴矢量图标库下载

<template>
  <div class="login_form">
    <form>
      <div class="form_item">
        <i class="iconfont icon-zhanghao"></i
        ><input
          @focus="i1_get"
          @blur="i1_lose"
          @input="input1($event)"
          id="text"
          v-model="email"
          type="email"
          :placeholder="placeholder1"
          @keyup.enter="login"
        />
      </div>
      <div class="form_item">
        <i class="iconfont icon-mima"></i
        ><input
          @focus="i2_get"
          @blur="i2_lose"
          id="text2"
          v-model="password"
          type="password"
          :placeholder="placeholder2"
          @keyup.enter="login"
        />
      </div>
      <div class="login_options">
        <label
          ><div class="option_item">
            <input
              :disabled="jzmm"
              v-model="zddl"
              type="checkbox"
              autocomplete="off"
            />
          </div>
          <i class="text">记住账号</i></label
        >
        <label
          ><div class="option_item">
            <input
              @click="jzmm_mm"
              v-model="jzmm"
              type="checkbox"
              autocomplete="off"
            />
          </div>
          <i class="text">记住密码</i></label
        >
        <i class="text wjmm">忘记密码</i>
      </div>
    </form>
    <div class="buttons">
      <button @click="login">登录</button>
    </div>
  </div>
</template>
<script>
import "@/assets/css/login_form.css";
import "@/assets/fonts/xlk/iconfont.css";
import "@/assets/fonts/slk/iconfont.css";
import "@/assets/fonts/zh/iconfont.css";
import "@/assets/fonts/mm/iconfont.css";
//网页测试要关闭,打包成软件要启动
const { remote } = window.require("electron");
export default {
  name: "Login_form",
  data() {
    return {
      email: "",
      password: "",
      placeholder1: "邮箱",
      placeholder2: "密码",
      zddl: false,
      jzmm: false,
    };
  },
  methods: {
    i1_get() {
      if (!this.email) {
        this.placeholder1 = "";
      }
    },
    i2_get() {
      if (!this.password) {
        this.placeholder2 = "";
      }
    },
    i1_lose() {
      if (!this.email) {
        this.placeholder1 = "邮箱";
      }
    },
    i2_lose() {
      if (!this.password) {
        this.placeholder2 = "密码";
      }
    },
    input1(e) {
      if (e.target.value == "") {
        // console.log(val);
        this.password = "";
        this.placeholder2 = "密码";
      }
    },
    login() {
      var eamil_gz =
        /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      switch (true) {
        case this.email == "":
          this.waring("邮箱不能为空!");
          break;
        case !eamil_gz.test(this.email):
          this.error("邮箱格式错误");
          break;
        case this.password == "":
          this.waring("密码不能为空!");
          break;
        default:
          let data = {
            log_email: this.email,
            log_password: this.password,
          };
          this.$axios
            .post("/login/login", data)
            // 在后台查询信息 返回res结果
            .then((res) => {
              // console.log(res.data);
              switch (true) {
                case res.data.code == 200:
                  //登录成功
                  this.success(res.data.msg);
                  //本地存储
                  localStorage.setItem("email", this.email);
                  localStorage.setItem("token", res.data.token);
                  if (this.zddl == true) {
                    localStorage.setItem("zddl", true);
                  } else {
                    localStorage.removeItem("zddl");
                    localStorage.removeItem("email");
                  }
                  if (this.jzmm == true) {
                    localStorage.setItem("zddl", true);
                    localStorage.setItem("jzmm", true);
                    localStorage.setItem("mm", this.password);
                  } else {
                    localStorage.removeItem("jzmm");
                    localStorage.removeItem("mm");
                  }
                  this.$router.push("/chat_index");
                  //登录成功跳转会有点闪屏，先隐藏，到另外一个路由再显示
                  remote.getCurrentWindow().hide();
                  //登录之后设置窗口在电脑桌面显示位置
                  remote.getCurrentWindow().setPosition(386, 192);
                  break;
                case res.data.code == 404:
                  //邮箱不存在
                  this.error(res.data.msg);
                  break;
                case res.data.code == 300:
                  //密码错误
                  this.error(res.data.msg);
                  break;
                case res.data.code == 400:
                  //用户异常
                  this.error(res.data.msg);
                  break;
                default:
                  //未知错误
                  this.error(res.data.msg);
                  break;
              }
            })
            .catch((error) => {
              //报错
            });
          break;
      }
    },
    //记住密码
    jzmm_mm() {
      if (this.zddl == false) {
        this.zddl = true;
      }
      this.jzmm = true;
    },
    // 警告提示
    waring(title) {
      this.$resetMessage({
        message: `${title}`,
        type: "warning",
      });
    },
    // 成功提示
    success(title) {
      this.$resetMessage({
        message: `${title}`,
        type: "success",
      });
    },
    // 错误提示
    error(title) {
      this.$resetMessage.error(`${title}`);
    },
  },
  mounted() {
    // 读取本地存储账号信息
    if (localStorage.getItem("zddl")) {
      this.zddl = true;
      this.email = localStorage.getItem("email");
    }
    if (localStorage.getItem("jzmm")) {
      this.jzmm = true;
      this.password = localStorage.getItem("mm");
    }
    if (localStorage.getItem("email")) {
      this.email = localStorage.getItem("email");
    }
    if (!this.email) {
      document.getElementById("text").focus();
    } else {
      document.getElementById("text2").focus();
    }
  },
};
</script>

4、login_form.css

.login_form{
    -webkit-app-region: drag;
    background-color: #FFFFFF;
}
.login_form form {
    padding: 10px 90px 0 90px;
}
.form_item {
    height: 40px;
    position: relative;
}
.form_item div {
    float: right;
    margin-right: 5px;
}
.form_item i.iconfont {
    position: absolute;
    top: 5px;
}
.form_item input {
    outline: none;
    border: none;
    padding-left: 30px;
    font-size: 16px;
    width: 230px;
    height: 30px;
    border-bottom: 1px solid #CCC;
    user-select: none;
    -webkit-app-region: no-drag;
}
.buttons {
    text-align: center;
}
.buttons button {
    background-color: #0786b4;
    border: none;
    width: 250px;
    color: #FFFFFF;
    height: 35px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
  -webkit-app-region: no-drag;
  user-select: none;
}
.buttons button:hover {
    background-color: #0aaae4;
    border: none;
    width: 250px;
    color: #FFFFFF;
    height: 35px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
    -webkit-app-region: no-drag;
    user-select: none;
}
.checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer {
    display: flex;
    justify-content: space-between;
    padding: 5px 15px 5px 15px;
    align-items: center;
}
.login_options {
    margin-bottom: 10px;
    margin-top: 5px;
}
.login_options .option_item {
    display: inline-block;
    align-items: center;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    position: relative;
    cursor: pointer;
    top: 2px;
    -webkit-app-region: no-drag;
}
.login_options .option_item input {
    /* font-size: 13px; */
    -webkit-app-region: no-drag;
}
.login_options i.text {
    display: inline-block;
    margin-right: 14px;
    font-size: 13px;
    font-style: normal;
    user-select: none;
    -webkit-app-region: no-drag;
}
.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;
}
.wjmm {
    cursor: pointer;
    color: rgb(139, 134, 134);
}
.wjmm:hover {
    cursor: pointer;
    color: rgb(19, 18, 18);
}

5、package.json文件

{
  "name": "qq_test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.9",
    "express": "^4.18.1",
    "qs": "^6.11.0",
    "socket.io": "^4.5.1",
    "socket.io-client": "^3.1.0",
    "vscode-material-icon-theme-js": "^1.0.7",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vue-socket.io": "^3.0.10",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "^12.0.0",
    "electron-devtools-installer": "^3.1.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

6、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";      //引入axios
Vue.prototype.$axios = axios;   //axios跟很多第三方模块不同的一点是它不能直接使用use方法，而是用这种方法
//配合文章第4步解释        本地网站
axios.defaults.baseURL = 'http://www.electron.com/index.php/api';//开发环境
//引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//重写提示框只提示一次
import resetMessage from '@/assets/js/resetMessage'
Vue.prototype.$resetMessage = resetMessage
Vue.use(
  new VueSocketIO({
    debug: false, 
    // 宝塔   IP:端口号      （生产环境）
    connection: SocketIO('http://127.0.0.1:3000', {//开发环境
      autoConnect: false // 取消自动连接     
    }),
    extraHeaders: { 'Access-Control-Allow-Origin': '*' }
  })
)
//客户端禁止按鼠标返回键返回上一个路由
window.addEventListener('popstate', function() {
  history.pushState(null, null, document.URL)
})
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

7、效果图

本地测试

npm run electron:serve