概述上节使用AI Agent生成水平排列的按钮Copilot 还是非常好用代码提示补全开发非常的贴心。嘟宝是为监督孩子身边环境而创建的一套应用它能够实现后台驻留长连接随时接收嘟妈信令建立音视频通道点对点通信而不需要中转服务器。嘟妈是一套WEB 应用使用vue3编写能够兼容app、小程序开发 。而嘟宝采用原生Andorid开发能够获取最大权限保持在后台运行。目前为止嘟宝完成的基本功能设计包括MQTT 基础通信后台驻留SQLite数据存储二维码显示身份识别码开启自启动前台服务任务栏消息发送与点击高德定位实时更新webrtc点对点通信mAgentWeb控件封装解决全屏与获取视频权限问题嘟妈采用vue3编写它的核心需求已完成包含以下部分:完成登录注册页面完成二维码扫描完成与嘟宝绑定与嘟妈建立音视频通信查看嘟宝桌面共享视频目前嘟妈的路由导航如下图可以看到当点击嘟宝时嘟宝页面并未挡住底部导航栏。应是全屏显示UI美观。重新组织网页骨架重新组织网页骨架router.ts路由信息import{createRouter,/*createWebHistory,*/createWebHashHistory}fromvue-router;import{getUserData}from/api/storgeconst routes[{path:/,redirect:/main},{path:/home,name:Home,component:()import(/view/home.vue),children:[{path:/main,name:Main,component:()import(/view/main.vue)},{path:/code,name:Code,component:()import(/view/qrcode.vue)},{path:/me,name:me,component:()import(/view/me.vue)},]},{path:/dubao/:dubaoId,name:Dubao,component:()import(/view/dubao.vue)},{path:/login,name:login,component:()import(/view/login.vue)},]const routercreateRouter({// history: createWebHistory(),history:createWebHashHistory(),routes:routes})router.beforeEach((to){const tokengetUserData();if(!tokento.path!/login){return{path:/login}}returntrue})export default router;app.vue源码templatediv classapprouter-view v-slot{ Component }transition namefademodeout-incomponent:isComponent//transition/router-view/div/templatescript setup langtsimport{onMounted,onUnmounted}fromvueimport{useMQTTStore}from./store/mqtt;const mqttuseMQTTStore()mqtt.$subscribe(async(mutate:any,state){if(typeof mutate.events.newValueboolean){return;}let dataJSON.parse(state.datamsg);let msgJSON.parse(data.msg);switch(msg.code){caseanswer:break;caseice:default:break;}});onMounted((){mqtt.connect();})onUnmounted((){mqtt.disconnect();});/scripthome.vue主页页面templatediv classapp!--路由视图--div classmainrouter-view v-slot{ Component }transition namefademodeout-incomponent:isComponent//transition/router-view/div!--底部 Tabbar使用 Vant4语法--van-tabbar route fixed placeholdervan-tabbar-item replace to/mainiconhome-o首页/van-tabbar-itemvan-tabbar-item replace to/codeiconscan扫一扫/van-tabbar-itemvan-tabbar-item replace to/meiconfriends-o我的/van-tabbar-item/van-tabbar/div/templatescript setup langts/script其他home子页面home导航栏有三个页面分别是main.vuescan.vueme.vue项目地址在github上。嘟宝地址嘟妈地址#演示效果