Example of electronic Vue chat

Time:2020-2-18

Project Description:

Electronic VChat chat is a high imitation wechat PC client interface chat room project based on electronic + electronic Vue + Vue + vuex + nodejs + Vue router and other technologies, which realizes message sending / expression, picture / video preview, drag upload / paste screenshot sending / wechat DLL screenshot, right-click menu, friend circle / red packet / skin changing and other functions.

Preview:

Example of electronic Vue chat

Technical framework:

  • Applied Technology: electron + electron Vue + Vue
  • State management: vuex
  • Address routing: Vue router
  • Font Icon: aliiconfont Font Icon Library
  • Pop up plug-in: wcpop
  • Packaging tool: electronic builder
  • Picture preview: Vue photo Preview
  • Video component: Vue video player

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

As shown in the figure above: you can freely switch the background skin of desktop chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Example of electronic Vue chat

Electron is an open source library developed by GitHub to build cross platform desktop applications using HTML, CSS and JavaScript.
https://electronjs.org/
As for how to build a development environment and use electronic Vue, you can go to the official website and search for information by yourself
Based on the Vue syntax, the template code of the electron application is constructed.
Example of electronic Vue chat
https://electron.org.cn/vue/i…
https://simulatedgreg.gitbook…

Electron main process: creation and configuration

Create and control browser window through browserwindow object in electronic
There are two folders in the SRC Directory: main and render. They are the main process and rendering process. You can modify the Src / main / index.js file in the configuration window.

let mainWin
let tray
let forceQuit = false
let logined = false

/**
 *Create main window=============================
 */
function createMainWin() {
    mainWin = new BrowserWindow({
        //Background color
        // backgroundColor: '#ebebeb',
        width: Common.WIN_SIZE_MAIN.width,
        height: Common.WIN_SIZE_MAIN.height,
        title: Common.WIN_TITLE,
        useContentSize: true,
        autoHideMenuBar: true,
        //Borderless window
        frame: false,
        resizable: true,
        //Whether to display when creating a window. The default value is true
        show: false,
        webPreferences: {
            // devTools: false,
            webSecurity: false
        }
    })
    
    mainWin.setMenu(null)
    mainWin.loadURL(Common.WIN_LOAD_URL())
    
    mainWin.once('ready-to-show', () => {
        mainWin.show()
        mainWin.focus()
    })
    
    //Click to close the minimum to pallet judgment
    mainWin.on('close', (e) => {
        if(logined && !forceQuit) {
            e.preventDefault()
            mainWin.hide()
        }else {
            mainWin = null
            app.quit()
        }
    })
    
    ...
    apptray.createTray()
}

app.on('ready', createMainWin)

app.on('activate', () => {
    if(mainWin === null) {
        createMainWin()
    }
})

...

Electron create tray icon, tray icon blink, minimize to tray, tray right click
Example of electronic Vue chat

/**
 *Tray icon event
 */
let flashTrayTimer = null
let trayIco1 = `${__static}/icon.ico`
let trayIco2 = `${__static}/empty.ico`
let apptray = {
  //Create tray icon
  createTray() {
    tray = new Tray(trayIco1)
    const menu = Menu.buildFromTemplate([
      {
        Label: 'open main interface',
        icon: `${__static}/tray-ico1.png`,
        click: () => {
          if(mainWin.isMinimized()) mainWin.restore()
          mainWin.show()
          mainWin.focus()
          
          this.flashTray(false)
        }
      },
      {
        Label: 'about',
      },
      {
        Label: 'exit',
        click: () => {
          if(process.platform !== 'darwin') {
            mainWin.show()
            //Clear login information
            mainWin.webContents.send('clearLoggedInfo')
            
            forceQuit = true
            mainWin = null
            app.quit()
          }
        }
      },
    ])
    tray.setContextMenu(menu)
    tray.setToolTip('electron-vchat v1.0.0')

    //Tray click event
    tray.on('click', () => {
      if(mainWin.isMinimized()) mainWin.restore()
      mainWin.show()
      mainWin.focus()

      this.flashTray(false)
    })
  },
  //Tray icon blinks
  flashTray(flash) {
    let hasIco = false

    if(flash) {
      if(flashTrayTimer) return
      flashTrayTimer = setInterval(() => {
        tray.setImage(hasIco ? trayIco1 : trayIco2)
        hasIco = !hasIco
      }, 500)
    }else {
      if(flashTrayTimer) {
        clearInterval(flashTrayTimer)
        flashTrayTimer = null
      }

      tray.setImage(trayIco1)
    }
  },
  //Destroy tray icon
  destroyTray() {
    this.flashTray(false)
    tray.destroy()
    tray = null
  }
}

Click window close to monitor close event and determine whether to minimize to tray

//Click to close the minimum to pallet judgment
mainWin.on('close', (e) => {
    if(logined && !forceQuit) {
        e.preventDefault()
        mainWin.hide()
    }else {
        mainWin = null
        app.quit()
    }
})

Electron rendering process: main entry page configuration

/**
 *@ desc main entry page JS
 * @about  Q:282310962  wx:xy190310
 */

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

//Import component configuration
import $components from './components'
Vue.use($components)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios


/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

The main window page is divided into sidebar + main layout. The top of the main layout contains the buttons of maximize / minimize and close

<template>
  <div id="app">
    <div class="elv-container" :style="$store.state.winSkin && {'background-image': 'url('+$store.state.winSkin+')'}">
      <div class="elv-wrapper flexbox">
        <! -- // sidebar -- >
        <side-bar v-if="!$route.meta.hideSideBar" />

        <! -- // main layout -- >
        <div class="elv-mainbx flex1 flexbox flex-col">
          <! --... Top button -- >
          <win-bar />
          
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

Electronic borderless window to achieve drag, maximize / minimize and close functions

The frameless form can be realized by configuring frame: false. The window dragging function needs to be handled separately
Example of electronic Vue chat

  • Through MouseDown, MouseMove and other events processing
  • Set the CSS property of the required drag area – WebKit app region

Set CSS-webkit-app-region: drag;You can drag the window
After setting – WebKit app region: drag, the following elements cannot be clicked. You can click no drag by setting.

Top winbar.vue component

import { app, remote, ipcRenderer } from 'electron'
import { mapState, mapMutations } from 'vuex'

let currentWin = remote.getCurrentWindow()

export default {
    props: {
        title: String,
    },
    data () {
        Return {// set top
            isAlwaysOnTop: false,
            //Can windows be minimized
            isMinimizable: true,
            //Whether the window can be maximized
            isMaximizable: true,
        }
    },
    computed: {
        ...mapState(['isWinMaxed'])
    },
    mounted() {if(!currentWin.isMinimizable()) {
            this.isMinimizable = false
        }
        if(!currentWin.isMaximizable()) {
            this.isMaximizable = false
        }
        if(this.isWinMaxed && currentWin.isMaximizable()) {
            currentWin.maximize()
        }

        //Maximize monitoring
        currentWin.on('maximize', () => {
            this.SET_WINMAXIMIZE(true)
        })
        currentWin.on('unmaximize', () => {
            this.SET_WINMAXIMIZE(false)
        })
    },
    methods: {
        ...mapMutations(['SET_WINMAXIMIZE']),

        //Top window
        handleFixTop() {
            this.isAlwaysOnTop = !this.isAlwaysOnTop
            currentWin.setAlwaysOnTop(this.isAlwaysOnTop)
        },

        // minimization
        handleMin() {
            currentWin.minimize()
        },

        // maximization
        handleMax() {
            if(!currentWin.isMaximizable()) return
            if(currentWin.isMaximized()) {
                currentWin.unmaximize()
                this.SET_WINMAXIMIZE(false)
            }else {
                currentWin.maximize()
                this.SET_WINMAXIMIZE(true)
            }
        },

        // close
        handleQuit() {
            currentWin.close()
        }
    }
}

Insert expression at cursor of electronic editor, div editable contentable = “true” two-way binding, electronic screenshot function

How to insert dynamic expression at the content able cursor of the editing box in Vue is not covered here. You can go to the previous sharing article.
Screenshot of implementing div contentable function with electron + Vue

OK, I’ll share the example of developing the imitated wechat desktop chat based on the electronic + Vue, and hope it can help a little!! Chinese style

Finally, we share the project of uniapp + Vue instance
Uniapp instant chat | Vue + uniapp imitation wechat app chat instance | uniapp imitation wechat interface

Recommended Today

Laravel service container must know

The article was forwarded from the professional laravel developer community. Original link: https://learnku.com/laravel/t To learn how to build an application with laravel is not only to learn how to use different classes and components in the framework, but also to remember allartisanCommand or all helper functions (we have Google). Learning to code with laravel is […]