vue3.0 高仿微信 app 界面聊天实例|vue3 聊天室

2021-01-09 12:16:48 +08:00
 xiaoyan2017

项目简介

Vue3Chatroom 聊天 基于 vue3.x+vuex4+vue-router+vant3+v3popup 等技术开发实现的仿微信 app 界面聊天实战项目。实现了发送消息 /emoj 表情、图片 /视频预览、网址查看、下拉刷新、红包 /朋友圈等功能。

技术栈

项目目录结构

项目中所有的页面及逻辑均是采用最新的 Vue3 语法实现。

vue3.0 自定义顶部条+底部 Tab 组件

项目中的顶部导航和底部 tabbar 组件均是在之前的 vue2 演变而来。

之前有过一篇分享文章,大家感兴趣的可以去看看。

vue.js 实战顶部 topbar+tabbar 组件

vue3.0 自定义 mobile 弹框组件

项目中使用的所有弹框均是基于 vue3 自定义弹框 v3popup 实现。

v3popup 一款集合了 vant3 中 msg|alert|dialog|popup|actionsheet|toast 等多种功能的移动端 Vue3 自定义弹框组件。

vue3.x 自定义 mobile 弹框组件

vue3.0 项目配置

如果创建 vue3 项目时,没有 vue.config.js ,需要手动创建。

用来进行一些 vue 开发的常用配置。

const path = require('path')

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

    // 输出文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启 https
        https: false,
        // 编译完是否打开网页
        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('@views', path.join(__dirname, 'src/views'))
    }
}

vue3.0 主入口 main.js 配置

引入一些公共组件 /样式,状态管理及路由。

import { createApp } from 'vue'
import App from './App.vue'

// 引入 vuex 和路由配置
import store from './store'
import router from './router'

// 引入 js
import '@assets/js/fontSize'

// 引入公共组件
import Plugins from './plugins'

const app = createApp(App)

app.use(store)
app.use(router)
app.use(Plugins)

app.mount('#app')

vue3.0 实现表单验证

vue 中操作 ref 、reactive 等响应函数。

<script>
import { reactive, inject, getCurrentInstance } from 'vue'
export default {
    components: {},
    setup() {
        const { ctx } = getCurrentInstance()

        const v3popup = inject('v3popup')
        const utils = inject('utils')
        const formObj = reactive({})

        // ...

        const handleSubmit = () => {
            if(!formObj.tel){
                Snackbar('手机号不能为空!')
            }else if(!utils.checkTel(formObj.tel)){
                Snackbar('手机号格式不正确!')
            }else if(!formObj.pwd){
                Snackbar('密码不能为空!')
            }else{
                ctx.$store.commit('SET_TOKEN', utils.setToken());
                ctx.$store.commit('SET_USER', formObj.tel);

                // ...
            }
        }

        return {
            formObj,
            handleSubmit
        }
    }
}
</script>

vue3.0 聊天编辑器

项目中聊天编辑框部分,抽离了一个公共 chatEditor 组件。

支持在光标处插入 emoj 表情、多行文本换行、删除光标处内容等功能。

/**
 * @Desc     Vue3.0 实现文字+emoj 表情混排
 * @Time     andy by 2021-01
 * @About    Q:282310962  wx:xy190310
 */
<script>
    import { ref, reactive, toRefs, watch, nextTick } from 'vue'
    export default {
        props: {
            modelValue: { type: String, default: '' }
        },
        setup(props, { emit }) {
            const editorRef = ref(null)

            const data = reactive({
                editorText: props.modelValue,
                isChange: true,
                lastCursor: null,
            })

            // ...

            // 获取光标最后位置
            const getLastCursor = () => {
                let sel = window.getSelection()
                if(sel && sel.rangeCount > 0) {
                    return sel.getRangeAt(0)
                }
            }


            // 光标处插入内容 @param html 需要插入的内容
            const insertHtmlAtCursor = (html) => {
                let sel, range
                if(window.getSelection) {
                    // IE9 及其它浏览器
                    sel = window.getSelection()

                    // ##注意:判断最后光标位置
                    if(data.lastCursor) {
                        sel.removeAllRanges()
                        sel.addRange(data.lastCursor)
                    }

                    if(sel.getRangeAt && sel.rangeCount) {
                        range = sel.getRangeAt(0)
                        let el = document.createElement('div')
                        el.appendChild(html)
                        var frag = document.createDocumentFragment(), node, lastNode
                        while ((node = el.firstChild)) {
                            lastNode = frag.appendChild(node)
                        }
                        range.insertNode(frag)
                        if(lastNode) {
                            range = range.cloneRange()
                            range.setStartAfter(lastNode)
                            range.collapse(true)
                            sel.removeAllRanges()
                            sel.addRange(range)
                        }
                    }
                } else if(document.selection && document.selection.type != 'Control') {
                    // IE < 9
                    document.selection.createRange().pasteHTML(html)
                }

                // ...
            }

            return {
                ...toRefs(data),
                editorRef,

                handleInput,
                handleDel,

                // ...
            }
        }
    }
</script>

ok,以上就是基于 vue3 开发聊天实例的介绍,希望大家能喜欢~~

uni-app 直播实例|uniapp+vue 仿抖音小视频

4840 次点击
所在节点    推广
19 条回复
kaka6
2021-01-09 13:35:20 +08:00
大家,优秀
ggabc
2021-01-09 13:42:33 +08:00
投入应用发挥最大价值
HeyXiao
2021-01-09 14:13:07 +08:00
请问有 git 吗
fpure
2021-01-09 14:33:17 +08:00
GitHub 链接?
Lemeng
2021-01-09 14:42:47 +08:00
有 github 吗,我要 fork‘,哈哈
itdog888
2021-01-09 14:48:00 +08:00
沒源碼?
dengshen
2021-01-09 15:24:51 +08:00
优秀。源码有吗?
yazoox
2021-01-09 15:33:59 +08:00
牛 x,可惜,没有 github 地址
sanchez0623
2021-01-09 16:19:19 +08:00
优秀啊,我也在学 vue
sam014
2021-01-09 16:42:01 +08:00
优秀
mepwang
2021-01-09 17:12:28 +08:00
没 github,一下子从技术分享沦为广告😄
JustinDeng
2021-01-09 17:37:12 +08:00
很优秀~ 但是不放源码 从技术共享变成广告了~
efsg
2021-01-09 17:41:15 +08:00
一眼以为是 QQ
sanmuisme
2021-01-09 17:48:45 +08:00
qq 吧 怎么是微信
ditel
2021-01-09 17:56:49 +08:00
这界面颜色,不是 qq 吗
milukun
2021-01-09 18:11:07 +08:00
哈哈 第一感觉是 qq
beginor
2021-01-09 21:10:33 +08:00
同求源码,准备学习 vue3 😄
musi
2021-01-09 22:48:13 +08:00
你是不是对高仿有什么误解?这哪里像微信了?
telami
2021-01-10 06:26:46 +08:00
多少钱,怎么联系

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/743285

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX