uni-vue3-wechat采取vue3 setup语法糖编码开拓，支持编译到h5+小程序端+APP端。

技能栈开拓工具：HbuilderX 4.0.8技能框架：Uniapp+Vue3+Pinia2+Vite4.xUI组件库：uni-ui+uv-ui弹框组件：uv3-popup（uniapp+vue3多端自定义弹框组件）自定义组件：uv3-navbar+uv3-tabbar组件缓存做事：pinia-plugin-unistorage编译支持：H5+小程序+APP端

项目构造

利用HbuilderX 4.0.8编辑器开拓项目，支持编译到h5/小程序/App端。

仿微信html原立异作uniappvue3pinia2高仿微信App聊天 GraphQL
（图片来自网络侵删）

/ 入口文件 main.js/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 }}

该项目已经同步到橱窗，如果有须要，欢迎去拍哈~

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

<script setup&gt; 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=&#34;scss"> @import 'styles/reset.scss'; @import 'styles/layout.scss';</style>uni-vue3-chat布局构造

整体项目分为顶部导航+内容区+底部区三大模块。

<!-- 公共布局模板 --><!-- #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 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>

由于该项目涉及到的知识点还是蛮多的，这次就先分享到这里，感谢大家的阅读。