uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天語音/朋友圈

来源:https://www.cnblogs.com/xiaoyan2017/p/18165578
-Advertisement-
Play Games

原創研發uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。 uni-vue3-wchat基於uni-app+vue3+pinia2+uni-ui+uv-ui等技術跨端仿製微信App界面聊天項目，支持編譯到H5+小程式端+App端。實現編輯框多行消息/emoj混 ...


原創研發uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。

uni-vue3-wchat基於uni-app+vue3+pinia2+uni-ui+uv-ui等技術跨端仿製微信App界面聊天項目，支持編譯到H5+小程式端+App端。實現編輯框多行消息/emoj混合、長按觸摸式仿微信語音面板、圖片/視頻預覽、紅包/朋友圈等功能。

預覽圖

編譯至h5+App端+小程式端運行效果

技術棧

  • 開發工具：HbuilderX 4.0.8
  • 技術框架：Uniapp+Vue3+Pinia2+Vite4.x
  • UI組件庫：uni-ui+uv-ui（uniapp+vue3組件庫）
  • 彈框組件：uv3-popup（自定義uniapp+vue3多端彈框組件）
  • 自定義組件：uv3-navbar導航欄+uv3-tabbar菜單欄
  • 緩存技術：pinia-plugin-unistorage
  • 支持編譯：H5+小程式+APP端

目前uni-app對vue3支持性已經蠻不錯了。之前也有給大家分享一款uniapp+vue3短視頻/直播商城項目。

https://www.cnblogs.com/xiaoyan2017/p/17938517

uniapp-vue3-wchat基於最新跨端技術開發，支持編譯H5/小程式端/APP端，運行效果基本保持一致。

項目構建目錄

支持在pc端以750px像素佈局顯示。

目前該項目同步上線到工房，如果恰好有需要，歡迎自行去拍哈~ 感謝小伙伴們的支持！

https://gf.bilibili.com/item/detail/1105801011

整個項目採用vue3 setup語法糖編碼開發。

App.vue配置

項目主模板App.vue使用vue3 setup語法。

<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>

uni-app+vue3自定義導航條+菜單欄

在components目錄下自定義導航欄Navbar和底部菜單欄Tabbar組件。

navbar導航條支持是否顯示返回、自定義標題(居中)、背景色/文字顏色、搜索等功能。

支持如下自定義插槽

<slot #back />
<slot #backText />
<slot #left />
<slot #title />
<slot #search />
<slot #right />
<uv3-navbar :back="true" title="標題內容" bgcolor="#07c160" color="#fff" fixed zIndex="1010" />

<uv3-navbar custom bgcolor="linear-gradient(to right, #07c160, #0000ff)" color="#fff" center transparent zIndex="2024">
    <template #back><uni-icons type="close" /></template>
    <template #backText><text>首頁</text></template>
    <template #title>
        <image src="/static/logo.jpg" style="height:20px;width:20px;" /> Admin
    </template>
    <template #right>
        <view class="ml-20" @click="handleAdd"><text class="iconfont icon-tianjia"></text></view>
        <view class="ml-20"><text class="iconfont icon-msg"></text></view>
    </template>
</uv3-navbar>

uni-vue3-wchat佈局模板

由於整體項目結構採用頂部導航區域+主體內容區+底部區域，所以新建一個公共佈局模板。

  

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

<!-- #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>

uniapp+vue3實現微信九宮格圖像

<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+vue3自定義彈出框

項目中所有的彈窗效果都是基於uniapp+vue3自定義組件實現功能。

  

  

  

支持如下參數配置：

v-model        當前組件是否顯示
title          標題（支持富文本div標簽、自定義插槽內容）
content        內容（支持富文本div標簽、自定義插槽內容）
type           彈窗類型（toast | footer | actionsheet | actionsheetPicker | android/ios）
customStyle    自定義彈窗樣式
icon           toast圖標（loading | success | fail | warn | info）
shade          是否顯示遮罩層
shadeClose     是否點擊遮罩時關閉彈窗
opacity        遮罩層透明度
round          是否顯示圓角
xclose         是否顯示關閉圖標
xposition      關閉圖標位置（left | right | top | bottom）
xcolor         關閉圖標顏色
anim           彈窗動畫（scaleIn | fadeIn | footer | fadeInUp | fadeInDown）
position       彈出位置（top | right | bottom | left）
follow         長按/右鍵彈窗（坐標點）
time           彈窗自動關閉秒數（1、2、3）
zIndex         彈窗層疊（預設202107）
btns           彈窗按鈕（參數：text|style|disabled|click）
------------------------------------------
## slot [插槽]
<template #title></template>
<template #content></template>
------------------------------------------
## emit
open        打開彈出層時觸發（@open="xxx"）
close       關閉彈出層時觸發（@close="xxx"）

支持組件式+函數式調用。

<script setup>
    import { onMounted, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
    
    const props = defineProps({
        ...
    })
    const emit = defineEmits([
        'update:modelValue',
        'open',
        'close'
    ])
    
    const instance = getCurrentInstance()
    
    const opts = ref({
        ...props
    })
    const visible = ref(false)
    const closeAnim = ref(false)
    const stopTimer = ref(null)
    const oIndex = ref(props.zIndex)
    const uuid = computed(() => Math.floor(Math.random() * 10000))
    
    const positionStyle = ref({ position: 'absolute', left: '-999px', top: '-999px' })
    
    const toastIcon = {
        ...
    }
    
    // 打開彈框
    const open = (options) => {
        if(visible.value) return
        opts.value = Object.assign({}, props, options)
        // console.log('-=-=混入參數：', opts.value)
        visible.value = true
        
        // nvue 的各組件在安卓端預設是透明的，如果不設置background-color，可能會導致出現重影的問題
        // #ifdef APP-NVUE
        if(opts.value.customStyle && !opts.value.customStyle['background'] && !opts.value.customStyle['background-color']) {
            opts.value.customStyle['background'] = '#fff'
        }
        // #endif
        
        let _index = ++index
        oIndex.value = _index + parseInt(opts.value.zIndex)
        
        emit('open')
        typeof opts.value.onOpen === 'function' && opts.value.onOpen()
        
        // 長按處理
        if(opts.value.follow) {
            nextTick(() => {
                let winW = uni.getSystemInfoSync().windowWidth
                let winH = uni.getSystemInfoSync().windowHeight
                // console.log('坐標點信息：', opts.value.follow)
                getDom(uuid.value).then(res => {
                    // console.log('Dom尺寸信息：', res)
                    if(!res) return
                    
                    let pos = getPos(opts.value.follow[0], opts.value.follow[1], res.width+15, res.height+15, winW, winH)
                    positionStyle.value.left = pos[0] + 'px'
                    positionStyle.value.top = pos[1] + 'px'
                })
            })
        }
        
        if(opts.value.time) {
            if(stopTimer.value) clearTimeout(stopTimer.value)
            stopTimer.value = setTimeout(() => {
                close()
            }, parseInt(opts.value.time) * 1000)
        }
    }
    
    // 關閉彈框
    const close = () => {
        if(!visible.value) return
        
        closeAnim.value = true
        setTimeout(() => {
            visible.value = false
            closeAnim.value = false
            
            emit('update:modelValue', false)
            emit('close')
            typeof opts.value.onClose === 'function' && opts.value.onClose()
            
            positionStyle.value.left = '-999px'
            positionStyle.value.top = '-999px'
            
            stopTimer.value && clearTimeout(stopTimer.value)
        }, 200)
    }
    
    // 點擊遮罩層
    const handleShadeClick = () => {
        if(JSON.parse(opts.value.shadeClose)) {
            close()
        }
    }
    
    // 按鈕事件
    const handleBtnClick = (e, index) => {
        let btn = opts.value.btns[index]
        if(!btn?.disabled) {
            console.log('按鈕事件類型：', typeof btn.click)
            
            typeof btn.click === 'function' && btn.click(e)
        }
    }
    
    // 獲取dom寬高
    const getDom = (id) => {
        return new Promise((resolve, inject) => {
            // uniapp vue3中 uni.createSelectorQuery().in(this) 會報錯__route__未定義  https://ask.dcloud.net.cn/question/140192
            uni.createSelectorQuery().in(instance).select('#uapopup-' + id).fields({
                size: true,
            }, data => {
                resolve(data)
            }).exec()
        })
    }
    
    // 自適應坐標點
    const getPos = (x, y, ow, oh, winW, winH) => {
        let l = (x + ow) > winW ? x - ow : x
        let t = (y + oh) > winH ? y - oh : y
        return [l, t]
    }
    
    onMounted(() => {
        if(props.modelValue) {
            open()
        }
    })

    watch(() => props.modelValue, (val) => {
        // console.log(val)
        if(val) {
            open()
        }else {
            close()
        }
    })
    
    defineExpose({
        open,
        close
    })
</script>

uniapp+vue3聊天模塊

  

uniapp+vue3實現增強版文本輸入框。支持獲取焦點高亮邊框、單行(input)+多行(textarea)輸入模式，自定義首碼/尾碼圖標。

該插件已經免費發佈到插件應用市場，有需要的可以去看看哈~

如上圖：實現了類似微信按住說話功能。

<!-- 語音操作面板 -->
<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"><
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [postgres]序列
    前言 序列都是用create sequence命令創建的單行表，常用於為表的行生成唯一的標識符。 相關函數 函數 作用 nextval() 遞增序列並返回新值 currval() 返回最近一次用nextval()函數獲取的指定序列的值 lastval() 返回最近一次用nextval()函數獲取的任 ...
  • Slave SQL線程與PXB FTWRL死鎖問題分析
    1. 問題背景 2.27號凌晨生產環境MySQL備庫在執行備份期間出現因FLUSH TABLES WITH READ LOCK未釋放導致備庫複製延時拉大，慢日誌內看持鎖接近25分鐘未釋放。 版本： MySQL 5.7.21 PXB 2.4.18 慢查詢日誌： 備份腳本中的備份命令： mysql_ki ...
  • 什麼是SQL 語句中相關子查詢與非相關子查詢
    要理解相關子查詢和非相關子查詢，我們得首先理解什麼是子查詢，子查詢是指在一個查詢語句中嵌套的另一個查詢語句。 ...
  • SqlServer中根據某幾列獲取重覆的數據將其刪除並保留最新一條
    前言 OLAP概念誕生於1993年，工具則出現在更早以前，有史可查的第一款OLAP工具是1975年問世的Express，後來走進千家萬戶的Excel也可歸為此類，所以雖然很多數據人可能沒聽過OLAP，但完全沒打過交道的應該很少。 這個概念主要是在大數據圈裡流傳，而在大數據領域里，目前主流的OLAP開 ...
  • Fragment翻蓋動效
    fragment切換動效，基本都是 viewpager+Transformer，但是總有它實現不了的動效，比如從0到3直接過渡，並且過渡需要加上兩者的位移效果 慢動作看到，如果是viewpager，從0到3過程是無法直達的，會有0，1，2，3的過渡效果，並且動畫時機是不可控的 當然，有個自定義方式可 ...
  • 當個View下，使用Drawable入場退場動畫
    效果圖，簡單的入場退場動效，一般情況是不同view之間去添加動畫，某些條件下顯然並不符合需求，需要在單個ImageView下進行的 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintL ...
  • iOS 隱私清單和SDK簽名
    隱私清單： <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><pli ...
  • 在vue2中，什麼是雙向綁定，為什麼vue3要進行優化？
    一、什麼是雙向綁定 我們先從單向綁定切入單向綁定非常簡單，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新雙向綁定就很容易聯想到了，在單向綁定的基礎上，用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定舉個慄子 當用戶填寫表 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類