uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

原创重磅之作uniapp+vue3+pinia2+uv-ui跨平台仿制微信app聊天项目UniVue3Chat。

技术栈

  • 开发工具:HbuilderX 4.0.8
  • 技术框架:Uniapp+Vue3+Pinia2+Vite4.x
  • UI组件库:uni-ui+uv-ui
  • 弹框组件:uv3-popup(uniapp+vue3自定义弹框组件)
  • 自定义组件:uv3-navbar+uv3-tabbar组件
  • 缓存服务:pinia-plugin-unistorage
  • 编译支持:H5+小程序+APP端

项目结构

整个项目采用vue3 setup语法糖编码开发。

uniapp-wechat项目支持编译到H5+小程序版+App端。目前该项目同步到工房,如果有需要,欢迎去拍哈~

uni-app+vue3+pinia跨端实战仿微信app聊天

main.js配置

通过HbuilderX构建的uniapp vue3项目,已经内置了pinia状态管理。无需下载导入,直接引用即可使用。

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

// 引入pinia状态管理
import pinia from '@/pinia'

export function createApp() {
    const app = createSSRApp(App)
    app.use(pinia)
    return {
        app,
        pinia
    }
}

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

引入pinia本地持久化缓存,该插件是pinia-plugin-persistedstateuniapp 版本。

import { createPinia } from 'pinia'
import { createUnistorage } from '@/uni_modules/pinia-plugin-unistorage'

const pinia = createPinia()
pinia.use(createUnistorage())

export default pinia

App.vue模板

<script setup>
    import { provide } from 'vue'
    import { onLaunch, onShow, onHide, onPageNotFound } from '@dcloudio/uni-app'

    onLaunch(() => {
        console.log('App Launch')

        uni.hideTabBar()
        loadSystemInfo()
    })

    onShow(() => {
        console.log('App Show')
    })

    onHide(() => {
        console.log('App Hide')
    })

    onPageNotFound((e) => {
        console.warn('Route Error:', `${e.path}`)
    })

    // 获取系统设备信息
    const loadSystemInfo = () => {
        uni.getSystemInfo({
            success: (e) => {
                // 获取手机状态栏高度
                let statusBar = e.statusBarHeight
                let customBar

                // #ifndef MP
                customBar = statusBar + (e.platform == 'android' ? 50 : 45)
                // #endif

                // #ifdef MP-WEIXIN
                // 获取胶囊按钮的布局位置信息
                let menu = wx.getMenuButtonBoundingClientRect()
                // 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
                customBar = menu.bottom + menu.top - statusBar
                // #endif

                // #ifdef MP-ALIPAY
                customBar = statusBar + e.titleBarHeight
                // #endif

                // 由于globalData在vue3 setup存在兼容性问题,改为provide/inject替代
                provide('globalData', {
                    statusBarH: statusBar,
                    customBarH: customBar,
                    screenWidth: e.screenWidth,
                    screenHeight: e.screenHeight,
                    platform: e.platform
                })
            }
        })
    }
</script>

<style>
    /* #ifndef APP-NVUE */
    @import 'static/fonts/iconfont.css';
    /* #endif */
</style>
<style lang="scss">
    @import 'styles/reset.scss';
    @import 'styles/layout.scss';
</style>

uniapp-wechat布局结构

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

<!-- 公共布局模板 -->

<!-- #ifdef MP-WEIXIN -->
<script>
    export default {
        /**
         * 解决小程序class、id透传问题
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效,组件外部传入的class没有挂到组件根节点上,在组件中增加options: { virtualHost: true }
         * https://github.com/dcloudio/uni-ui/issues/753
         */
        options: { virtualHost: true }
    }
</script>
<!-- #endif -->

<script setup>
    const props = defineProps({
        // 是否显示自定义tabbar
        showTabBar: { type: [Boolean, String], default: false },
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1">
        <!-- 顶部插槽 -->
        <slot name="header" />

        <!-- 内容区 -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>

        <!-- 底部插槽 -->
        <slot name="footer" />

        <!-- tabbar栏 -->
        <uv3-tabbar v-if="showTabBar" hideTabBar fixed />
    </view>
</template>

在小程序端通过自定义插槽会在外层多一层view标签,导致样式无效。

目前解决方案是在mainfest.json中开启"mergeVirtualHostAttributes" : true,然后在组件中增加options: { virtualHost: true },这样就能消除小程序端多一层view的问题。

uniapp实现九宫格图像

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

<script setup>
    import { onMounted, ref, computed, watch, getCurrentInstance } from 'vue'

    const props = defineProps({
        // 图像组
        avatar: { type: Array, default: null },
    })

    const instance = getCurrentInstance()

    const uuid = computed(() => Math.floor(Math.random() * 10000))
    const avatarPainterId = ref('canvasid' + uuid.value)

    const createAvatar = () => {
        const ctx = uni.createCanvasContext(avatarPainterId.value, instance)
        // 计算图像在画布上的坐标
        const avatarSize = 12
        const gap = 2
        for(let i = 0, len = props.avatar.length; i < len; i++) {
            const row = Math.floor(i / 3)
            const col = i % 3
            const x = col * (avatarSize + gap)
            const y = row * (avatarSize + gap)

            ctx.drawImage(props.avatar[i], x, y, avatarSize, avatarSize)
        }
        ctx.draw(false, () => {
            // 输出临时图片
            /* uni.canvasToTempFilePath({
                canvasId: avatarPainterId.value,
                success: (res) => {
                    console.log(res.tempFilePath)
                }
            }) */
        })
    }

    onMounted(() => {
        createAvatar()
    })

    watch(() => props.avatar, () => {
        createAvatar()
    })
</script>

<template>
    <template v-if="avatar.length > 1">
        <view class="uv3__avatarPainter">
            <canvas :canvas-id="avatarPainterId" class="uv3__avatarPainter-canvas"></canvas>
        </view>
    </template>
    <template v-else>
        <image class="uv3__avatarOne" :src="avatar[0]" />
    </template>
</template>

<style lang="scss" scoped>
    .uv3__avatarPainter {background-color: #eee; border-radius: 5px; overflow: hidden; padding: 2px; height: 44px; width: 44px;}
    .uv3__avatarPainter-canvas {height: 100%; width: 100%;}
    .uv3__avatarOne {border-radius: 5px; height: 44px; width: 44px;}
</style>

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

项目中导航栏/底部菜单栏及各种弹窗都是使用自定义组件实现功能。

uniapp+vue3聊天模块

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

uniapp-wechat:基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端)

增强版输入框组件已经免费发布到插件市场,欢迎下载使用。

<!-- 语音操作面板 -->
<view v-if="voicePanelEnable" class="uv3__voicepanel-popup">
    <view class="uv3__voicepanel-body flexbox flex-col">
        <!-- 取消发送+语音转文字 -->
        <view v-if="!voiceToTransfer" class="uv3__voicepanel-transfer">
            <!-- 提示动效 -->
            <view class="animtips flexbox" :class="voiceType == 2 ? 'left' : voiceType == 3 ? 'right' : null"><Waves :lines="[2, 3].includes(voiceType) ? 10 : 20" /></view>
            <!-- 操作项 -->
            <view class="icobtns flexbox">
                <view class="vbtn cancel flexbox flex-col" :class="{'hover': voiceType == 2}" @click="handleVoiceCancel"><text class="vicon uv3-icon uv3-icon-close"></text></view>
                <view class="vbtn word flexbox flex-col" :class="{'hover': voiceType == 3}"><text class="vicon uv3-icon uv3-icon-word"></text></view>
            </view>
        </view>

        <!-- 语音转文字(识别结果状态) -->
        <view v-if="voiceToTransfer" class="uv3__voicepanel-transfer result fail">
            <!-- 提示动效 -->
            <view class="animtips flexbox"><uni-icons type="info-filled" color="#fff" size="20"></uni-icons><text class="c-fff">未识别到文字</text></view>
            <!-- 操作项 -->
            <view class="icobtns flexbox">
                <view class="vbtn cancel flexbox flex-col" @click="handleVoiceCancel"><text class="vicon uv3-icon uv3-icon-chexiao"></text>取消</view>
                <view class="vbtn word flexbox flex-col"><text class="vicon uv3-icon uv3-icon-audio"></text>发送原语音</view>
                <view class="vbtn check flexbox flex-col"><text class="vicon uv3-icon uv3-icon-duigou"></text></view>
            </view>
        </view>

        <!-- 背景语音图 -->
        <view class="uv3__voicepanel-cover">
            <image v-if="!voiceToTransfer" src="/static/voice_bg.webp" :webp="true" mode="widthFix" style="width: 100%;" />
        </view>
        <!-- // 提示文字(操作状态) -->
        <view v-if="!voiceToTransfer" class="uv3__voicepanel-tooltip">{{voiceTypeMap[voiceType]}}</view>
        <!-- 背景小图标 -->
        <view v-if="!voiceToTransfer" class="uv3__voicepanel-fixico"><text class="uv3-icon uv3-icon-audio fs-50"></text></view>
    </view>
</view>

OK,以上就是uni-app+vue3实战开发聊天模板的一些知识分享。

博客:flutter-macos:基于flutter3.19+window_manager桌面端os实例
博客:uniapp-welive:基于uni-app+vue3+pinia多端直播商城实例|uniapp仿抖...

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 2

赞。。。

2周前 评论
xiaoyan2015 (楼主) 1周前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
48
粉丝
45
喜欢
101
收藏
55
排名:366
访问:2.6 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
3
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
1
flutter3直播
1
flutter3-macos
1
flutter3-osx
1
flutter3桌面os
1
flutter3仿macOS
1
uniapp+vue3聊天
1
uniapp+vue3仿微信
1
uniapp+vue3聊天app
1
uniapp-vue3-wchat
1
社区赞助商