Vue3.0桌面端聊天｜vue3仿微信/QQ網(wǎng)頁版聊天實例

著vue3.x越來越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發(fā)者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達20.2K+。

// 官網(wǎng)地址
https://v3.vuejs.org/

Vitejs目前的star達到15.7K+。

// 官網(wǎng)地址
https://vitejs.dev/

項目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術(shù)棧

使用技術(shù)：vue3.0+vuex4+vue-router4
UI組件庫：element-plus（餓了么Vue3 pc端組件庫）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動條組件：V3Scroll（基于Vue3自定義虛擬美化滾動條）
iconfont圖標(biāo)：阿里字體圖標(biāo)庫

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開發(fā)的vue3.0自定義彈窗V3Layer組件。

前段時間有過一篇詳細(xì)的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動條組件

為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現(xiàn)。

v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動條組件v3scroll

vue.config.js項目配置

/**
 * Vue3.0項目配置
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環(huán)境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網(wǎng)頁
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    }
}

Vue3引入/注冊公共組件

// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動條組件v3scroll
import V3Scroll from '@components/v3scroll'

// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'

import Utils from './utils'

const Plugins = app => {
    app.use(ElementPlus)
    app.use(V3Layer)
    app.use(V3Scroll)

    // 注冊公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
    <filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
    <image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
    </svg>
    <div class="blur-cover"></div>
</div>

Vue3攔截登錄狀態(tài)

vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判斷當(dāng)前路由地址是否需要登錄權(quán)限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權(quán)
            V3Layer({
                content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。

編輯器抽離了一個公共的Editor.vue組件。

<template>
    <div
        ref="editorRef"
        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>

另外還支持粘貼截圖發(fā)送，通過監(jiān)聽paste事件，判斷是否是圖片類型，從而發(fā)送截圖。

editorRef.value.addEventListener('paste', function(e) {
    let cbd = e.clipboardData
    let ua = window.navigator.userAgent
    if(!(e.clipboardData && e.clipboardData.items)) return

    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i]
        // console.log(item)
        // console.log(item.kind)
        if(item.kind == 'file') {
            var blob = item.getAsFile()
            if(blob.size === 0) return
            // 讀取圖片記錄
            var reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = function() {
                var _img = this.result

                // 返回圖片給父組件
                emit('pasteFn', _img)
            }
        }
    }
})

還支持拖拽圖片至聊天區(qū)域進行發(fā)送。

<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
    // ...
</div>

const handleDragEnter = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDragOver = (e) => {
    e.stopPropagation()
    e.preventDefault()
}
const handleDrop = (e) => {
    e.stopPropagation()
    e.preventDefault()
    // console.log(e.dataTransfer)

    handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
    let files = filelist.files
    if(files.length >= 2) {
        v3layer.message({icon: 'error', content: '暫時支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        return false
    }
    for(let i = 0; i < files.length; i++) {
        if(files[i].type != '') {
            handleFileAdd(files[i])
        }else {
            v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
        }
    }
}

大家如果感興趣可以自己去試試哈。

ok，基于vue3+element-plus開發(fā)仿微信/QQ聊天實戰(zhàn)項目就分享到這里。

基于vue3.0+vant3移動端聊天實戰(zhàn)|vue3聊天模板實例

天就來說說我自己懂得的QQ互聯(lián)的配置

首先必須要現(xiàn)在騰訊那里申請了QQ互聯(lián)，并且獲得了appid和appkey，這里就不詳細(xì)說明申請過程。然后在QQ互聯(lián)的開發(fā)文檔那里下載SDK的資源包(這里我們下載php的sdk資源)。下載完之后就把解壓的SDK包放在自己網(wǎng)站的跟目錄下(文件名和路徑自己取)。然后輸入網(wǎng)址，訪問那個文件夾的位置，出現(xiàn)如下的配置頁面。

把我們申請到的appid和appkey填入其中，然后在我們剛剛放入的SDK的文件夾中新建兩個文件，分別為qqlogin.php和callback.php，與API文件夾在同一級目錄下。而上述的配置的callback選項就填callback.php的路徑。按照自己的需要，勾選自己想要的功能，博主在這里這勾選了第一個，也就是獲得用戶的基本信息。然后點配置。需要注意的是，一般這個時候，他都會提示你需要777的操作權(quán)限，這個時候就需要在剛剛上傳的SDK服務(wù)器下對API文件夾設(shè)置777權(quán)限，然后配置成功之后就把doc、example、install文件夾和index.php文件刪除掉。

接下來我們下載一個QQ圖標(biāo)(QQ互聯(lián)的開發(fā)文檔里也有得下載)，然后在我們網(wǎng)站需要放置的位置下放置圖片和js代碼，如下:

然后在網(wǎng)頁的頭部放置如下代碼(注:博主曾在網(wǎng)頁底部放置，發(fā)現(xiàn)不行，所以只好放網(wǎng)頁頭部):

function toLogin() {

var A=window.open("此處填寫之前創(chuàng)建的qqlogin.php的路徑","TencentLogin", "width=450,height=320,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");

}

</script>

接著在qqlogin.php文件夾里面加入如下的內(nèi)容：

require_once 'API/qqConnectAPI.php';
//訪問QQ登錄頁面
$oauth = new Oauth();
$oauth->qq_login(); 
然后在callback.php文件夾下加入如下代碼：
//請求accesstoken
$oauth = new Oauth;
$accesstoken = $oauth->qq_callback();
$opendid = $oauth->get_openid();//獲取openid
$qc = new QC($accesstoken,$opendid);
$userinfo = $qc->get_user_info();
$_SESSION['userinfo'] = $userinfo;／／博主把獲取的信息放在了SESSION中

到這里的時候，正常情況下是登錄之后就能獲取到用戶信息，但不會跳轉(zhuǎn)到之前的頁面，所以，我們在這里就做登錄之后關(guān)閉ＱＱ登錄小窗口跳轉(zhuǎn)頁面，同時，由于如果是用手機登錄時，是不會出現(xiàn)小窗口的，為了完善，我們在這里要判斷下是否是手機登錄。

／／判斷是否手機登錄的函數(shù)
function isMobile(){
 $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '';
 $useragent_commentsblock=preg_match('|\(.*?\)|',$useragent,$matches)>0?$matches[0]:'';
 function CheckSubstrs($substrs,$text){
 foreach($substrs as $substr)
 if(false!==strpos($text,$substr)){
 return true;
 }
 return false;
 }
 $mobile_os_list=array('Google Wireless Transcoder','Windows CE','WindowsCE','Symbian',
 'Android','armv6l','armv5','Mobile','CentOS','mowser','AvantGo','Opera Mobi','J2ME/MIDP',
 'Smartphone','Go.Web','Palm','iPAQ');
 $mobile_token_list=array('Profile/MIDP','Configuration/CLDC-',
 '160×160','176×220','240×240',
 '240×320','320×240','UP.Browser','UP.Link','SymbianOS','PalmOS','PocketPC','SonyEricsson'
 ,'Nokia','BlackBerry','Vodafone','BenQ','Novarra-Vision','Iris','NetFront','HTC_','Xda_',
 'SAMSUNG-SGH','Wapaka','DoCoMo','iPhone','iPod');
 $found_mobile=CheckSubstrs($mobile_os_list,$useragent_commentsblock)
 ||CheckSubstrs($mobile_token_list,$useragent);
 if ($found_mobile){
 return true;
 }else{
 return false;
 }
}
if (isMobile()){
 header('Location:http://跳轉(zhuǎn)的地址');
 exit;
}
$js = <<<eof
 <script type='text/javascript'>
 window.opener.location.href='http://要跳轉(zhuǎn)到的地址';
 </script>
eof;
//當(dāng)前小的子頁面關(guān)閉
echo "<script>window.close();</script>";

至此，ＱＱ互聯(lián)就完成了。

喜歡的小伙伴們可以關(guān)注我或者給我點贊哦。

Q互聯(lián)管理中心：https://connect.qq.com/manage.html#/appauth/user

看看你的QQ授權(quán)登陸過多少東西！絕對超乎你的想象！

PS：如何不需要的，可撤銷授權(quán)。

在線咨詢

上一篇：Python爬取下載m3u8加密視頻，原來這么簡單
下一篇：JavaScript黑暗技巧：禁止瀏覽器點擊“后退”按鈕

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商