每日热闻!记录--Vue3+TS(uniapp)手撸一个聊天页面

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

Vue3+TS(uniapp)手撸一个聊天页面

前言

最近在自己的小程序中做了一个智能客服，API使用的是云厂商的API，然后聊天页面...嗯，找了一下关于UniApp(vite/ts)版本的好像不多，有一个官方的但其中的其他代码太多了，去看懂再删除那些对我无用的代码不如自己手撸一个，先看效果：

好，下面开始介绍如何一步一步实现

(资料图片)

重难点调研

1. 如何编写气泡

可以发现一般的气泡是有个“小箭头”，一般是指向用户的头像，所以这里我们的初步思路就是通过before与after伪类来放置这个小三角形，这个小三角形通过隐藏border的其余三边来实现。

然后其中一个细节就是聊天气泡的最大宽度不超过对方的头像，超过就换行。这个简单，设置一个max-width: cacl(100vw - XX)就可以了

2. 如何编写输入框

考虑到用户可能输入多行文字，这里使用的是</code>标签，点开微信发个消息试试，发现它是自适应的，这里去调研了解了一下，发现小程序自带组件有这个实现，好，那直接用：</p><p>然后我们继续注意到发送按钮与输入框的底线保持水平，这个<code>flex</code>里有对应属性可以实现，跳过...</p><h3 data-id="heading-5">3.如何实现滚动条始终居于底部</h3><p>当聊天消息较多时，我们发现我们继续输入消息，页面并没有更新（滚动）。打开微信聊天框一看，当消息过多时，你发一条消息，页面就自动滚动到了最新的消息，这又是怎实现的呢？</p><p>继续调研，发现小程序自带的<code><scroll-view></code>标签中有个属性<code>scroll-into-view</code>可以自动跳转：</p><pre class="brush:html;gutter:true;"><scroll-view scroll-y="true" :scroll-into-view="`msg${messages.length-1}`" :scroll-with-animation="true"><view class="msg-list" :id="`msg${index}`" v-for="(msg, index) in messages" :key="msg.time"><view class="msg-item">略</view></view></scroll-view></pre><h2 data-id="heading-6">概述</h2><p>简单分析下来好像一点都不难，如下是我的文件列表，话不多说，开始撸代码!</p><pre class="brush:html;gutter:true;">chat├─ chat.vue├─ leftBubble.vue└─ rightBubble.vue </pre><h2 data-id="heading-7">左气泡模块</h2><p>左气泡模块就是刚刚分析的那一部分，然后增加一点点细节，如下：</p><pre class="brush:html;gutter:true;"><template><view class="left-bubble-container"><view class="left"><image :src="props.avatarUrl"></image></view><view class="right"><view class="bubble"><text>{{ props.message }}</text></view></view></view></template><script setup lang="ts">import { userDefaultData } from "@/const";interface propsI {message: string;avatarUrl: string;}const props = withDefaults(defineProps<propsI>(), {avatarUrl: userDefaultData.avatarUrl,});</script><style lang="scss" scoped>.left-bubble-container { margin: 10px 0;display: flex;.left {image {height: 50px;width: 50px;border-radius: 5px;}}}.bubble {max-width: calc(100vw - 160px);min-height: 25px;border-radius: 10px;background-color: #ffffff;position: relative;margin-left: 20px;padding: 15px;text {height: 25px;line-height: 25px;}}.bubble::before {position: absolute;top: 15px;left: -20px;content: "";width: 0;height: 0;border-right: 10px solid #ffffff;border-bottom: 10px solid transparent;border-left: 10px solid transparent;border-top: 10px solid transparent;}</style></pre><h2 data-id="heading-8">右气泡模块</h2><p>右气泡模块我们需要将三角形放在右边，这个好实现。然后这整个气泡我们需要让它处于水平居右，所以这里我使用了：</p><pre class="brush:html;gutter:true;">display: flex;direction: rtl;</pre><p>这个属性，但使用的过程中发现气泡中的内容(符号与文字)会出现翻转，“遇事不决，再加一层”，所以我们在内容节点外再套一层：</p><pre class="brush:html;gutter:true;"><span><text>{{ props.message }}</text></span></pre><p>然后继续增加一点点细节：</p><pre class="brush:html;gutter:true;"><template><view class="left-bubble-container"><view class="right"><image :src="props.avatarUrl"></image></view><view class="left"><view class="bubble"><span><text>{{ props.message }}</text></span></view></view></view></template><script setup lang="ts">import { userDefaultData } from "@/const";interface propsI {message: string;avatarUrl: string;}const props = withDefaults(defineProps<propsI>(), {avatarUrl: userDefaultData.avatarUrl,});</script><style lang="scss" scoped>.left-bubble-container {display: flex;direction: rtl;margin: 10px 0;.right {image {height: 50px;width: 50px;border-radius: 5px;}}}.bubble {max-width: calc(100vw - 160px);min-height: 25px;border-radius: 10px;background-color: #ffffff;position: relative;margin-right: 20px;padding: 15px;text-align: left;text {height: 25px;line-height: 25px;}}.bubble::after {position: absolute;top: 15px;right: -20px;content: "";width: 0;height: 0;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #ffffff;border-top: 10px solid transparent;}</style></pre><h2 data-id="heading-9">输入模块</h2><p>没啥说的，需要注意的是：<code>Button</code>记得防抖</p><pre class="brush:html;gutter:true;"><view class="bottom-input"><view class="textarea-container"><textareaauto-heightfixed="true"confirm-type="send"v-model="input"@confirm="submit"/></view><buttonstyle="width: 70px;height: 40px;line-height: 34px;margin: 0 10px;background-color: #ffffff;border: 3px solid #0256ff;color: #0256ff;"@click="submit">发送</button></pre><h2 data-id="heading-10">整体</h2><p>1）考虑如何存储消息</p><blockquote><p>这里仅考虑内存中如何存储，不考虑本地存储，后续思考中会聊到。</p></blockquote><pre class="brush:html;gutter:true;">export interface messagesI { left: boolean; text: string; time: number;}</pre><p>如上是消息列表中的一项，为了区分是渲染到左气泡还是右气泡，这里用<code>left</code>来区分了一下；</p><pre class="brush:html;gutter:true;">const messages: Ref<messagesI[]> = ref([]);</pre><p>2）如何推荐消息</p><p>这边我封装的服务端接口是这样的：</p><pre class="brush:html;gutter:true;">mutation chat{ customerChat(talk: "你好啊"){ knowledge text recommend }}</pre><p><code>recommend</code>是用户可能输入了错误的消息，这里是预测用户的输入字符串，所以我们需要在得到这个字符串后直接显示，然后用户可以一键通过这条消息回复：</p><pre class="brush:html;gutter:true;">function submit(){// 略...const finalMsg = receive?.knowledge || receive?.text || "你是否想问: " + receive?.recommend;// 略...if (receive?.recommend) {input.value = receive?.recommend;} else {input.value = "";}}</pre><p>如上，得益于Vue框架，这里实现起来也非常简单，当用户提交之后，如果有推荐的消息，就直接修改<code>input.value</code>从而修改输入框的文字；如果没有就直接清空方便下一次输入。</p><p>接下来继续增加一点点细节（<code>chat.vue</code>文件）</p><pre class="brush:html;gutter:true;"><template><view class="chat-container"><view class="msg-container"><!-- https://github.com/wepyjs/wepy-wechat-demo/issues/7 --><scroll-view scroll-y="true" :scroll-into-view="`msg${messages.length-1}`" :scroll-with-animation="true"><view class="msg-list" :id="`msg${index}`" v-for="(msg, index) in messages" :key="msg.time"><view class="msg-item"><left-bubble v-if="msg.left" :message="msg.text" :avatar-url="meStore.user?.avatarUrl"></left-bubble><right-bubble v-else :message="msg.text" :avatar-url="logoUrl"></right-bubble></view></view></scroll-view></view><view class="bottom-input"><view class="textarea-container"><textareaauto-heightfixed="true"confirm-type="send"v-model="input"@confirm="submit"/></view><buttonstyle="width: 70px;height: 40px;line-height: 34px;margin: 0 10px;background-color: #ffffff;border: 3px solid #0256ff;color: #0256ff;"@click="submit">发送</button></view></view></template><script setup lang="ts">import { ref, type Ref } from "vue";import leftBubble from "./leftBubble.vue";import rightBubble from "./rightBubble.vue";import type { messagesI } from "./chat.interface";import { chatGQL } from "@/graphql/me.graphql";import { useMutation } from "villus";import { logoUrl } from "@/const";import { useMeStore } from "@/stores/me.store";const meStore = useMeStore();const messages: Ref<messagesI[]> = ref([]);const input = ref("");async function submit() {if (input.value === "") return;messages.value.push({left: true,text: input.value,time: new Date().getTime(),});const { execute } = useMutation(chatGQL);const { error, data } = await execute({ talk: input.value })if (error) {uni.showToast({title: `加载错误`,icon: "error",duration: 3000,});throw new Error(`加载错误: ${error}`);}const receive = data?.customerChat;const finalMsg = receive?.knowledge || receive?.text || "你是否想问: " + receive?.recommend;messages.value.push({left: false,text: finalMsg,time: new Date().getTime(),});if (receive?.recommend) {input.value = receive?.recommend;} else {input.value = "";}}</script><style lang="scss" scoped>.chat-container {.msg-container {padding: 20px 5px 100px 5px;height: calc(100vh - 120px);scroll-view {height: 100%;}}.bottom-input {display: flex;align-items: flex-end;position: fixed;bottom: 0px;background-color: #fbfbfb;padding: 20px;box-shadow: 0px -10px 30px #eeeeee;.textarea-container {background-color: #ffffff;padding: 10px;textarea {width: calc(100vw - 146px);background-color: #ffffff;}}}}</style></pre><h2 data-id="heading-11">思考</h2><p>如何保存到本地，然后每次加载最新消息，然后向上滚动进行懒加载?</p><p>我这里没有实现该功能，毕竟只是一个客服，前端没必要保存消息记录到本地如Localstorage。</p><p>这里抛砖引玉，想到了一个最基础的数据结构--链表，用Localstorage-key/value的形式来实现消息队列在本地的多段存储：</p><p>当然，有效性有待验证，这里仅仅属于一些想法</p><h2 data-id="heading-12">最后</h2><p>然后，我撸了小半天的页面，准备给朋友看看来着，他告诉我微信小程序自带一个客服系统，只需要让<code>button</code>的<code>open-type</code>属性等于<code>contract</code>；</p><h3 id="tid-A8dYk6">本文转载于:</h3><h3 id="tid-SwZPdd">https://juejin.cn/post/7224059698911641658</h3><h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3> <p style="color: #fff;"> 关键词： </p> <ul class="con3_list"> <li> <a href="http://news.qudong.cn/ydtx/2023/0511/33841.html"> <img src="http://img.c33v.cn/2022/0610/20220610015147408.jpg" alt="每日热闻!记录--Vue3+TS(uniapp)手撸一个聊天页面"> </a> <div> <h4><a href="http://news.qudong.cn/ydtx/2023/0511/33841.html">每日热闻!记录--Vue3+TS(uniapp)手撸一个聊天页面</a></h4> <p>这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助Vue3+TS(uniapp)手撸一个聊天页面前言最近</p> <section> <span>来源：</span> <time>2023-05-11 </time> </section> </div> </li> <li> <a href="http://news.qudong.cn/ydtx/2023/0511/33840.html"> <img src="http://imgs.hnmdtv.com/2022/0610/20220610024336741.jpg" alt="世界时讯：ios打包ipa的四种实用方法(.app转.ipa)"> </a> <div> <h4><a href="http://news.qudong.cn/ydtx/2023/0511/33840.html">世界时讯：ios打包ipa的四种实用方法(.app转.ipa)</a></h4> <p>总结一下，目前 app包转为 ipa包的方法有以下几种：1、Apple推荐的方式，即实用xcode的archive功能Xcode菜</p> <section> <span>来源：</span> <time>2023-05-11 </time> </section> </div> </li> <li> <a href="http://news.qudong.cn/ydtx/2023/0511/33839.html"> <img src="http://www.xcctv.cn/uploadfile/2022/0610/20220610100822639.jpg" alt="全球热消息：定了！AIRIOT新品发布会，6月6日北京见。"> </a> <div> <h4><a href="http://news.qudong.cn/ydtx/2023/0511/33839.html">全球热消息：定了！AIRIOT新品发布会，6月6日北京见。</a></h4> <p>随着物联网、大数据、AI技术的成熟和演进，智能物联网技术正在加速、深入渗透至各行业应用。AIRIOT物联网平</p> <section> <span>来源：</span> <time>2023-05-11 </time> </section> </div> </li> <li> <a href="http://news.qudong.cn/cj/2023/0511/33838.html"> <img src="http://baiduimg.baiduer.com.cn/2022/0610/20220610012940199.jpg" alt="商品日报（5月11日）：沪镍跌超5%创逾一个月新低 棕榈油跌超3% 环球新视野"> </a> <div> <h4><a href="http://news.qudong.cn/cj/2023/0511/33838.html">商品日报（5月11日）：沪镍跌超5%创逾一个月新低 棕榈油跌超3% 环球新视野</a></h4> <p>国内商品期货市场周四（5月11日）延续弱势，活跃商品收盘大多数下跌。截至下午收盘时，追踪国内商品市场的</p> <section> <span>来源：</span> <time>2023-05-11 </time> </section> </div> </li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33841.html">每日热闻!记录--Vue3+TS(uniapp)手撸一个聊天页面</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33840.html">世界时讯：ios打包ipa的四种实用方法(.app转.ipa)</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33839.html">全球热消息：定了！AIRIOT新品发布会，6月6日北京见。</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0511/33838.html">商品日报（5月11日）：沪镍跌超5%创逾一个月新低 棕榈油跌超3% 环球新视野</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33837.html">当前速看：六安市裕安区：大抓基层，带动乡村“跑”起来</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33836.html">比三星更稳、比致态便宜！西部数据SN770 2TB固态硬盘只要789元</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33835.html">NVIDIA业绩不给力 黄仁勋年收入锐减！仅员工中位值的94倍 视焦点讯</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33834.html">世界微动态丨LG推出新款超宽带鱼屏：Nano IPS面板 配有雷电4</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33833.html">买菜车也疯狂！丰田卡罗拉Nightshade特别版官图发布：很酷炫</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33832.html">今日热讯：27岁未婚女子入职前被要求做孕检：她当场拒绝了</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33831.html">播报：飘飘遇仙全集狼太郎txt无删减 飘飘遇仙全集狼太郎txt</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33830.html">构建万物互联，华为云IoT+鸿蒙重燃物体感知-全球热点评</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33829.html">JavaScript全解析——this指向|环球今日报</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33828.html">实现高并发秒杀的 7 种方式，写的太好了，建议收藏！！</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33827.html">译：从分布式微服务到单体</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33826.html">谷歌全线反击！PaLM 2部分性能已经超越GPT-4-全球今亮点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0511/33825.html">【财经分析】两只转债接连进入“下线倒计时” 市场如何接纳退市常态化？ 要闻</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33824.html">在街头弹钢琴的他，登上了音乐厅！ 热头条</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33823.html">一口一个更好吃：德芙84g袋装小巧粒7.8元/袋大促（原价18元）</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33822.html">环球观焦点：跑步直追！比亚迪高阶智驾第三季度上车：名为DNP、汉将首搭</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33821.html">被指滥用应用市场主导地位：苹果再次遭遇反垄断调查 焦点速看</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33820.html">全球观点：华为WATCH 4星球系列上演宇宙级浪漫 健康领域华为或将迎来重大突破</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33819.html">天舟六号货运飞船与空间站组合体完成交会对接</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33818.html">环球热头条丨用Python实现艺术绘画，人生苦短，代码赛高</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/cj/2023/0511/33817.html">【新华500】新华500指数（989001）11日收跌0.18%-世界微动态</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33816.html">世界头条：美联储高利率风险仍存在 黄金期货能否延续涨势</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33815.html">学生点外卖：因围墙太高 小哥摇树报送餐位置</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33814.html">每日快讯!来自“公路王者”的检验！蔚来ES6被两大货车夹击：框架完好人员安全</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33813.html">小米电视A55/A65竞技版开售：1799就能有4K/120Hz高刷大屏|天天通讯</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33812.html">iQOO Neo8 Pro上架：首发天玑9200+ CPU性能比骁龙8 Gen2更猛 实时焦点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33811.html">微型电动车战火再起！长安Lumin周年庆至高优惠1万硬刚五菱</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33810.html">环球热议:如何为漆面准备金属</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33809.html">天天快看：有文化的网名情侣（有文化的网名）</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33808.html">Python工具箱系列(三十一)</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33807.html">天天视点！可变参数的格式化输出</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33806.html">利用kali破解WiFi密码_全球热消息</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33805.html">天天观焦点：重庆市高级人民法院依法公开宣判张波、叶诚尘故意杀人案</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33804.html">李想说出大实话：理想L8最大竞争对手其实是这台车</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33803.html">号称“不泄密” 微信键盘1.0.6发布：加入2项新功能</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33802.html">起售价或低于25万 凯迪拉克GT4实车曝光：家族最便宜SUV来了|世界今热点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33801.html">长沙被占车位成为网红打卡地：有人两百公里外赶来直播 环球快看</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33800.html">省级校本教研基地工作总结(精选26篇)|世界观点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33799.html">6000+字讲透ElasticSearch 索引设计</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33798.html">Linux系统上创建.NET6项目（通过命令行（CTL）方式）</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33797.html">15日起内地赴港澳签注办理更便捷 端午赴港澳机票较五一降三成|环球视点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33796.html">索尼最强旗舰！Xperia 1 V发布：8999元起</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33795.html">4月SUV销量排名：比亚迪双星无敌！燃油车苦苦挣扎</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33794.html">当前视点！Linux重启Java的.sh脚本shell</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33793.html">stm32 boot0硬件接法导致的概率性启动失败问题总结和反思</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33792.html">k3s 证书过期修改</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33791.html">《种地吧》下期精彩：后陡门篮球赛主打团结 种地团直面成长阵痛-当前资讯</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33790.html">孟羽童视频回应离职格力：下一步将申请读研|环球观点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33789.html">2999元！佳能发布掌上Vlog机PowerShot V10 比手机还小巧</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33788.html">焦点热讯:索尼放大招 Xperia 1 V用上双层晶体管传感器：画质媲美全画幅相机</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33787.html">天玑9200+正式发布！解决旗舰用户三大痛点 带来顶级游戏性能体验 世界新消息</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33786.html">黑寡妇毒杀亲夫</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33785.html">【天天热闻】手动挡正确停止和关闭发动机 以及关闭发动机钥匙的步骤</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33784.html">动力节点老杜B站Spring6学习笔记—Spring的入门程序</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33783.html">IOC类图</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33782.html">【独家】泰州姜堰：绿色能源清风吹拂一座城</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33781.html">环球新消息丨借鉴新加坡经验 深圳地铁拟推行早起上班优惠价：缓解早高峰拥挤</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33780.html">正式超越日本！一季度中国成全球第一大汽车出口国 天天速看料</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33779.html">三层防护 稳健医用外科口罩便宜了：3盒150只到手21.8元</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33778.html">全球快播：年内最大降幅？国内油价或即将大幅度下调 就在5月16日</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33777.html">微信开启“带货时代”：公众号今日起也能带货了</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/smcp/2023/0511/33776.html">华硕笔记本A45v怎么清空所有数据？华硕笔记本a45v参数配置</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/smcp/2023/0511/33775.html">电脑网页变成灰色是怎么回事？电脑网页变成灰色怎么解决？</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33774.html">国家移民管理局发布公告 5月15日起全面恢复口岸快捷通关|焦点消息</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/smcp/2023/0511/33773.html">金立V183什么时候上市的？金立V183手机参数</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/smcp/2023/0511/33772.html">宏基笔记本白屏是什么原因？宏基笔记本白屏怎么解决？</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/smcp/2023/0511/33771.html">qq邮箱怎么点亮图标？qq邮箱格式怎么写？</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33770.html">周迅身高是多少？周迅个人资料简介</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33769.html">打电话不显示号码是怎么回事？打电话不显示号码怎么办？</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33768.html">盛夏晚晴天吻戏在哪几集？盛夏晚晴天电视剧结局是什么？</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33767.html">版权符号怎么打出来？版权符号html代码</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33766.html">吉林市为什么和省一个名字？吉林市旅游必去十大景点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33765.html">世界快看：第二章、操作系统基本原理</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33764.html">世界最资讯丨蒙哥马利算法</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33763.html">每日观点：热烈欢迎成都市武侯区人社局领导莅临璞华考察参观</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33762.html">山西印发冬小麦后期田间管理意见</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33761.html">世界关注：荣盛发展年报遭问询，被追问营收大幅下滑、业绩大额亏损且亏损面进一步扩大原因及合理性</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33760.html">全球最大超算竞赛 现场DIY设计并攒机 北大学生拿下总冠军</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33759.html">美国4S店躺赢 巴菲特不爱车企爱经销商 天天速看</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33758.html">华为海外连开两场重磅发布会：发力全球市场势头不减！ |每日视讯</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33757.html">太贵卖不动？NV又准备RTX 4070公版：4799元国内玩家抢吧 全球聚看点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33756.html">人造肉更环保？新研究表明：对气候影响可能是普通牛肉25倍|看点</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33755.html">焦点快报!2023年上海市全民数字素养与技能提升月启动</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33754.html">Docker网络类型</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33753.html">Java之图片上传与删除功能的实现</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33752.html">用户分享 | Dockquery，一个国产数据库客户端的初体验</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33751.html">Django SQL注入漏洞分析（CVE-2022-28346） 全球报资讯</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/ydtx/2023/0511/33750.html">openAI发布v0.2.0了 全球快讯</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33749.html">环球热资讯！奥迪“全新”A6曝光！车尾神似5系，换保时捷引擎高级吗？</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33748.html">【全球新要闻】孟羽童曾称董明珠不可复制：没有人可以成为第二个董明珠</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33747.html">男子机场拍到李若彤被妻子怀疑出轨 李若彤发帖为其澄清 重点聚焦</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33746.html">2599元 尼康首款Z卡口电动变焦镜头来了：广角、特写都能拿捏</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33745.html">长沙一停车场要求按颜色停放 违停罚100元 律师：没法律效力</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33744.html">热点评！大手笔！丰田承认开发电动车失败 决定再砸500亿元</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33743.html">观天下！Haynes：有位湖人球员说 让勇士叽叽歪歪继续抱怨吧</a></h4></li> <li style="height:auto;"><h4><a href="http://news.qudong.cn/xw/2023/0511/33742.html">深交所向*ST海投发出问询函|世界实时</a></h4></li> </ul> </div> </div> </main> <footer> <p><a href="">如有意见请与我们联系 邮箱：29 59 11 57 8 @qq.com</a></p> <p><a href="https://beian.miit.gov.cn/" target="_blank"> <span id="bah">豫ICP备20005723号-1</span></a> <a href="http://112.74.60.84/yyzz.html" target="_blank"> <img src="http://112.74.60.84/police.jpg" style="height:15px;">营业执照公示信息</a></p> <p>驱 动 网 版 权 所 有 ，未 经 书 面 授 权 禁 止 使 用</p> <p>Copyright © 1997-2021 by www.qudong.ctocio.com.cn. all rights reserved</p> </footer> <button class="return btn btn-outline-secondary">返回顶部</button> <script> var retu = document.querySelector(".return"); window.onscroll = function(){ var t = document.documentElement.scrollTop || window.pageYOffset; if (t > 200) { retu.style.display = "block"; } else { retu.style.display = "none"; } } retu.onclick = function(){ document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?4a84ef7d39b9fa04168be859e70e8bd9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>