nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface

Time:2020-12-6

nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface

Project overview

be based on vue.js + nuxt.js +Chat room imitating wechat app interface developed by vuex + webpack + node + vant and other technologiesNuxtchatroom project。 It realizes the functions of card type drag and slide, message / expression sending, picture / video preview, red packet / circle of friends and so on.

Technology selection

  • Implementation technology: vscode/ vue.js + nuxt.js +vuex
  • UI component library: vant (Vue component library of youzan mobile terminal)
  • Iconfont Icon: alifont Icon Library
  • Pop up component: vpopup
  • Local storage: Cookie universal nuxt: ^ 2.1.4

directory structure


The directory structure of the nuxt project is somewhat different from Vue. nuxt.js A good hierarchical structure of code is provided. The specific directory structure description can be viewed on the official website.
zh.nuxtjs.org/guide/directory-stru…

nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface

Introduction to nuxt custom components

Navbar / tabbar at the top of the project and all pop-up functions are implemented by user-defined components. If you are interested, please refer to the previous sharing article.



Nuxt|vue salted fish tabbar raised tab|vue custom navigation bar
Vue customized Android / IOS pop-up components

Nuxt copy probe card slide

The card search function of tinder is as follows. The whole screen layout is adopted.
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
As for the detailed implementation process, I will not introduce it here. If you are interested, you can go to the previous sharing article.
Vue||nuxt imitates to explore the effect of overturning and dragging

Nuxt layout and configuration file

nuxt.js The default layout page is in the layouts directory default.vue Page.

<! -- default layout -- >
<template>
  <div class="nuxt__container flexbox flex-col">
    <header-bar />
    <div class="nuxt__scrollview scrolling flex1"><nuxt /></div>
    <tab-bar />
  </div>
</template>

Nuxt configuration filenuxt.config.jsFor detailed configuration, refer to the official documentation.
zh.nuxtjs.org/guide/configuration/

export default {
  //Port configuration (optional)
  server: {
    port: 3000,
    //host: '192.168.79.112'
  },
  /*
  **Page header meta information configuration
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
      { hid: 'keywords', name: 'keywords', content: ' Vue.js  A kind of Nuxt.js  |Nuxt imitates wechat '},
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' },
    ],
    script: [
      { src: '/js/fontSize.js' },
      { src: '/js/wcPop/wcPop.js' },
    ]
  },
  /*
  **Global CSS configuration
  */
  css: [
    '~/assets/css/reset.css',
    '~/assets/css/layout.css',
    '~/assets/fonts/iconfont.css',
  ],
  /*
  **Global plug in list
  */
  plugins: [
    '~/plugins/vue-global.js',
    //It is also possible to introduce local JS in this way ssr:false )
    // {src: '~/assets/js/fontSize.js', ssr: false}
  ],
  // ...
}

The. Vue separate page supports some configuration parameters.

<script>
export default {
    //Meta information for configuring pages
    head() {
        return {
            Title: 'here is the title information - title information',
            meta: [
                {Name: 'keywords', hid:' keywords', content: 'keyword 1 | keyword 2 | keyword 3'},
                {Name: 'description', hid: 'description', content: 'description 1 | Description 2 | description 3'}
            ]
        }
    },
    //Custom layout template
    layout: 'xxx.vue',
    //Middleware verification
    middleware: 'auth',
    //Asynchronous data processing
    async asyncData({app, params, query, store}) {
        let uid = params.uid
        let cid = query.cid
        return {
            uid: uid,
            cid: cid,
        }
    },
    // ...
}
</script>

Chat record page

Drop down refresh function
The drop-down refresh uses thevan-pull-refreshComponent.
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface

< van pull refresh V-model = "isloading" success text = "refresh succeeded" @ refresh = "onrefresh" >
    <! -- drop down prompt -- >
    <template #pulling>
      < I class = "iconfont icon down" > < / I > drop down to refresh
    </template>
    <! -- release prompt -- >
    <template #loosing>
      < I class = "iconfont icon up" > < / I > release refresh now
    </template>

    <!-- ... -->
</van-pull-refresh>

Slide the panel to the left
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface

<van-swipe-cell v-for="(item,index) in recordList" :key="index">
    <!-- ... -->

    <! -- right button -- >
    <template #right>
      <div class="swipe__cell-btns flexbox">
        <div class="nuxt__ btn nuxt__ btn-primary nuxt__ < / square "> topclick" > "
        <div class="nuxt__ btn nuxt__ btn-primary nuxt__ BTN -- square "@ Click =" handledelete "> delete < / div >
      </div>
    </template>
</van-swipe-cell>

Realization of chat module

nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface
The beginning is to useinputortextareaTo realize the function. Later, it was found that the expression could not be inserted into the text box. Finally, we use the editable function of div to insert the text content.
The editor module is made into a common componentchatEditor.vue

<template>
    <div
        ref="editor"
        class="editor"
        contentEditable="true"
        v-html="editorText"
        @click="handleClick"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        style="user-select:text;-webkit-user-select:text;">
    </div>
</template>

If you have any other good methods, we are welcome to exchange views.
Well, the chat interface instance based on nuxtjs + Vue is shared here. I hope you like it! A kind of
Finally, I will share a flutter instance project
Instance of flutter + dart chat room
nuxt.js Imitating wechat app communication chat | Vue + nuxt chat | imitating wechat interface

This work adoptsCC agreementThe author and the link to this article must be indicated in the reprint

This article is an original article, without the permission of the author, you are welcome to share QQ (282310962) Wx (xy190310)