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

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><a style="color: #fff;">关键词</a> </p> </div> <div class="recommend-wrap clearfix mt30"> <div class="re-tab"> <ul class="re-tab-type"> <li> <a class="on" href="javascript:void(0);">相关推荐</a></li> </ul> </div> <div class="re-con-wrap"> <div class="re-con"> <ul class="pic-item-list-4"> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26942.html" target="_blank"> <img src="http://img.xhyb.net.cn/2022/0923/20220923104652766.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26942.html" target="_blank">记录--Vue3+TS(uniapp)手撸一个聊天页面|每日热讯</a></strong> <span class="pic-item-info">这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助Vue3+TS(uniapp)手撸一个聊天页面前言最近</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26939.html" target="_blank"> <img src="http://img.kaijiage.com/2022/0610/20220610024947190.png" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26939.html" target="_blank">浦发银行降薪引发员工抗议 董监事会办公室：正在核实</a></strong> <span class="pic-item-info">浦发银行降薪引发员工抗议董监事会办公室：正在核实,降薪,浦发银行,董监事会,邮储银行,上海浦东发展银行</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26936.html" target="_blank"> <img src="http://www.cnmyjj.cn/uploadfile/2022/0610/20220610113511555.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26936.html" target="_blank">环球即时：江山控股(00295)前4个月太阳能发电站发电量约为13.713万兆瓦时 同比增长21.26%</a></strong> <span class="pic-item-info">江山控股(00295)公布，该集团拥有的太阳能发电站于2023年1月至4月总发电量</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26933.html" target="_blank"> <img src="http://img.xunjk.com/2022/0610/20220610022120599.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26933.html" target="_blank">孟羽童离开，格力打造年轻化IP为什么受挫？ | 如数家珍</a></strong> <span class="pic-item-info">“孟羽童”的名字5月11日上午登上了微博热搜第一。她一年多前被格力电器董事长兼总裁董明珠捧为“接班人”</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26929.html" target="_blank"> <img src="http://img.bfce.cn/2022/0610/20220610020015108.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26929.html" target="_blank">湖北出台新政扶持重点群体创业</a></strong> <span class="pic-item-info">5月11日电(武一力陈维)湖北省人社厅等九部门近日印发《湖北省实施重点群体创业推进行动工作方案》(以下简称</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26925.html" target="_blank"> <img src="http://www.jxyuging.com/uploadfile/2022/0923/20220923105510538.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26925.html" target="_blank">陕西煤业：截至目前 公司总核定产能1.62亿吨</a></strong> <span class="pic-item-info">每经AI快讯，有投资者在投资者互动平台提问：请问下属各个煤矿的核定产能分别是多少？陕西煤业（601225 SH</span> </li> </ul> </div> </div> </div> <div class="recommend-wrap clearfix mt30"> <div class="re-tab"> <ul class="re-tab-type"> <li> <a class="on" href="javascript:void(0);">最近更新</a></li> </ul> </div> <div class="re-con-wrap"> <div class="re-con"> <ul class="pic-item-list-4"> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26942.html" target="_blank"> <img src="http://img.xhyb.net.cn/2022/0923/20220923104652766.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26942.html" target="_blank">记录--Vue3+TS(uniapp)手撸一个聊天页面|每日热讯</a></strong> <span class="pic-item-info">这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助Vue3+TS(uniapp)手撸一个聊天页面前言最近</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26941.html" target="_blank"> <img src="http://img.xhyb.net.cn/2022/0923/20220923104534408.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26941.html" target="_blank">【天天快播报】前4个月我国新能源汽车产销量同比均增长42.8%</a></strong> <span class="pic-item-info">中国汽车工业协会5月11日发布数据显示2023年前4个月我国新能源汽车产销量分别达229 1万辆和222 2万辆同比均</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guanzhu/2023/0511/26940.html" target="_blank"> <img src="http://img.haixiafeng.com.cn/2022/0610/20220610014802260.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guanzhu/2023/0511/26940.html" target="_blank">追梦谈G6：湖人不会把胜利拱手相让 我们仍然面临淘汰-全球热门</a></strong> <span class="pic-item-info">NBA西部半决赛G4，勇士主场121-106击败湖人，总比分仍2-3落后，赛后，勇士球员追梦接受了记者的采访。谈到G</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26939.html" target="_blank"> <img src="http://img.kaijiage.com/2022/0610/20220610024947190.png" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26939.html" target="_blank">浦发银行降薪引发员工抗议 董监事会办公室：正在核实</a></strong> <span class="pic-item-info">浦发银行降薪引发员工抗议董监事会办公室：正在核实,降薪,浦发银行,董监事会,邮储银行,上海浦东发展银行</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26938.html" target="_blank"> <img src="http://img.tiantaivideo.com/2022/0610/20220610111446607.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26938.html" target="_blank">当前播报:浦发银行回应员工“降薪”：网传图片系两起独立事件 相关问题已在解决中</a></strong> <span class="pic-item-info">浦发银行回应员工“降薪”：网传图片系两起独立事件相关问题已在解决中</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guanzhu/2023/0511/26937.html" target="_blank"> <img src="http://img.kjw.cc/2022/0923/20220923103242390.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guanzhu/2023/0511/26937.html" target="_blank">成立19年规模不足150亿元，中海基金去年净利润再陷亏损 | 基金</a></strong> <span class="pic-item-info">Wind数据显示，截至今年一季度末，成立已有19年的中海基金管理规模为125 49亿元，环比减少24 23亿元，降幅</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26936.html" target="_blank"> <img src="http://www.cnmyjj.cn/uploadfile/2022/0610/20220610113511555.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26936.html" target="_blank">环球即时：江山控股(00295)前4个月太阳能发电站发电量约为13.713万兆瓦时 同比增长21.26%</a></strong> <span class="pic-item-info">江山控股(00295)公布，该集团拥有的太阳能发电站于2023年1月至4月总发电量</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26935.html" target="_blank"> <img src="http://img.cqtimes.cn/2022/0610/20220610114233817.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26935.html" target="_blank">全球球精选！新疆库车：守住“烟火气” 电“靓”夜经济</a></strong> <span class="pic-item-info">天气逐渐转暖，新疆库车南湖夜市也迎来人流量高峰，街区游客熙攘，小吃摊前座无虚席，夜经济火爆十足。5月1</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guanzhu/2023/0511/26934.html" target="_blank"> <img src="http://img.falvjieda.cn/2023/0314/20230314020042585.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guanzhu/2023/0511/26934.html" target="_blank">凭交通事故责任认定书起诉可以胜诉吗？关于交通事故不出具责任认定书怎么投诉？</a></strong> <span class="pic-item-info">交通事故不出具责任认定书怎么投诉如果一直不出具交通事故责任认定书，属于行政不作为，可以找主管部门的行</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26933.html" target="_blank"> <img src="http://img.xunjk.com/2022/0610/20220610022120599.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26933.html" target="_blank">孟羽童离开，格力打造年轻化IP为什么受挫？ | 如数家珍</a></strong> <span class="pic-item-info">“孟羽童”的名字5月11日上午登上了微博热搜第一。她一年多前被格力电器董事长兼总裁董明珠捧为“接班人”</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26932.html" target="_blank"> <img src="http://www.lygmedia.com/uploadfile/2022/0923/20220923104001836.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26932.html" target="_blank">微型电动车战火再起！长安Lumin周年庆至高优惠1万硬刚|速讯</a></strong> <span class="pic-item-info">快科技5月11日消息，近期随着新能源汽车下乡活动的开启，微型电动车也再次燃起了激烈的战火。就在今日，长</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26931.html" target="_blank"> <img src="http://img.xhyb.net.cn/2022/0923/20220923104716152.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26931.html" target="_blank">商务部再次表态：如美国胁迫盟友共同遏华，将坚决反对 热头条</a></strong> <span class="pic-item-info">在5月11日下午举行的例行记者会上，商务部新闻发言人束珏婷再次表态，如美国胁迫盟友（七国集团其他成员国</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26930.html" target="_blank"> <img src="http://www.viltd.com/uploadfile/2022/0610/20220610102323808.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26930.html" target="_blank">商务部：如美国胁迫盟友共同遏华，将坚决反对！</a></strong> <span class="pic-item-info">在5月11日下午举行的例行记者会上，商务部新闻发言人束珏婷再次表态，如美国胁迫盟友（七国集团其他成员国</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26929.html" target="_blank"> <img src="http://img.bfce.cn/2022/0610/20220610020015108.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26929.html" target="_blank">湖北出台新政扶持重点群体创业</a></strong> <span class="pic-item-info">5月11日电(武一力陈维)湖北省人社厅等九部门近日印发《湖北省实施重点群体创业推进行动工作方案》(以下简称</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guanzhu/2023/0511/26928.html" target="_blank"> <img src="http://img.haixiafeng.com.cn/2022/0923/20220923110912522.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guanzhu/2023/0511/26928.html" target="_blank">女子地铁上隔空收到不雅照！杭州警方最新通报 环球今日报</a></strong> <span class="pic-item-info">5月10日，浙江省杭州市公安局地铁分局发布警情通报：近日，一则“杭州女生地铁上隔空收到不雅照”信息在网</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26927.html" target="_blank"> <img src="http://img.yazhou.964.cn/2022/0610/20220610102647345.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26927.html" target="_blank">2023扣扣炫舞情侣网名精选网名91个(最新qq炫舞) 天天看热讯</a></strong> <span class="pic-item-info">扣扣炫舞情侣网名1、下联：2、(去声七麌)3、忽闻喊话声，齐整三爷住。4、千，载德延传谁比肩？龙风曲韵，敢</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guanzhu/2023/0511/26926.html" target="_blank"> <img src="http://baiduimg.baiduer.com.cn/2022/0610/20220610012923174.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guanzhu/2023/0511/26926.html" target="_blank">听说回族都非常热情好客，是真的吗?</a></strong> <span class="pic-item-info">我认为，也不是所有的回族人都是非常热情好客的，这个有点绝对也有点笼统了。还是要因人而异了。首先举个简</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26925.html" target="_blank"> <img src="http://www.jxyuging.com/uploadfile/2022/0923/20220923105510538.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26925.html" target="_blank">陕西煤业：截至目前 公司总核定产能1.62亿吨</a></strong> <span class="pic-item-info">每经AI快讯，有投资者在投资者互动平台提问：请问下属各个煤矿的核定产能分别是多少？陕西煤业（601225 SH</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26924.html" target="_blank"> <img src="http://www.jxyuging.com/uploadfile/2022/0923/20220923105519529.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26924.html" target="_blank">快看点丨如何显示文件后缀 2个步骤，不到1分钟学会！</a></strong> <span class="pic-item-info">电脑作为小伙伴日常办公的工具，很多时候都会存储很多文件。不少的小伙伴可能会遇到相似的情况，自己重新开</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26923.html" target="_blank"> <img src="http://www.xcctv.cn/uploadfile/2022/0610/20220610101610911.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26923.html" target="_blank">外交部回应“中朝边界于6月解封”：将持续合作</a></strong> <span class="pic-item-info">5月11日，中国外交部发言人汪文斌主持例行记者会。有记者提问，据媒体报道，中朝边界将于6月解封，届时将恢</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26922.html" target="_blank"> <img src="http://img.haixiafeng.com.cn/2022/0610/20220610014634425.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26922.html" target="_blank">江苏江阴枪击案告破 两名嫌犯均已死亡-天天快资讯</a></strong> <span class="pic-item-info">2023年5月4日凌晨5时许，江苏省江阴市毗陵东路发生一起涉枪伤害案件，犯罪嫌疑人作案后逃离现场，伤者经救</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26921.html" target="_blank"> <img src="http://www.jxyuging.com/uploadfile/2022/0923/20220923105500174.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26921.html" target="_blank">相距仅4.6米!俄罗斯与波兰战机在黑海上空险相撞</a></strong> <span class="pic-item-info">据美国《星条旗报》网站5月9日报道，以美国为首的北约9日说，在一架俄罗斯战机和一架波兰战机险些在黑海上</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26920.html" target="_blank"> <img src="http://img.haixiafeng.com.cn/2022/0923/20220923111103643.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26920.html" target="_blank">ESG跨境与法国电商Cdiscount共建中国本土服务团队 世界报资讯</a></strong> <span class="pic-item-info">法国电商平台Cdiscount Octopia和ESG跨境电商共同组建中国本土服务团队，帮助中国卖家进入欧洲市场。</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guanzhu/2023/0511/26919.html" target="_blank"> <img src="http://img.dzwindows.com/2022/0610/20220610113230722.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guanzhu/2023/0511/26919.html" target="_blank">痰多咳嗽是什么原因_痰多咳嗽</a></strong> <span class="pic-item-info">1、红糖姜汤材料：红糖、姜做法：提前把姜切片，用砂锅熬水，待水烧开放入红糖，红糖融化以后，放入姜片，</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26918.html" target="_blank"> <img src="http://caixunimg.483.cn/2022/0610/20220610014231601.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26918.html" target="_blank">中简科技：公司ZT9系列产品在2015年已研制成功，持续与客户开展了多个应用领域的研...</a></strong> <span class="pic-item-info">每经AI快讯，有投资者在投资者互动平台提问：董秘，你好！ZT9系列产品几个型号参与下游主机厂论证？中简科</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guancha/2023/0511/26917.html" target="_blank"> <img src="http://imgs.hnmdtv.com/2022/0610/20220610024420329.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guancha/2023/0511/26917.html" target="_blank">天舟六号货运飞船发射任务取得圆满成功 天天通讯</a></strong> <span class="pic-item-info">空间站应用与发展阶段飞行任务首战告捷据中国载人航天工程办公室消息，北京时间2023年5月10日21时22分，搭</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://www.91zixun.com/guanzhu/2023/0511/26916.html" target="_blank"> <img src="http://www.lygmedia.com/uploadfile/2022/0923/20220923103814799.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/guanzhu/2023/0511/26916.html" target="_blank">“美育芳草”国家大剧院青少年艺术节促进京藏学生交往交流交融</a></strong> <span class="pic-item-info">“美育芳草”国家大剧院青少年艺术节促进京藏学生交往交流交融</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://hot.91zixun.com/hot/2023/0511/26915.html" target="_blank"> <img src="http://img.inpai.com.cn/2022/0923/20220923110255328.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://hot.91zixun.com/hot/2023/0511/26915.html" target="_blank">世界看点：关注！这些产品正在召回 涉及作业本塑料购物袋等</a></strong> <span class="pic-item-info">记者5月11日从四川省市场监管局获悉，按照《消费品召回管理暂行规定》，近日，相关公司向该局报告召回计划</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26914.html" target="_blank"> <img src="http://imgs.hnmdtv.com/2022/0610/20220610022616761.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26914.html" target="_blank">特朗普“逆反效应”？美媒：党内支持率大幅上升 天天热推荐</a></strong> <span class="pic-item-info">当地时间5月9日，纽约法院陪审团认定特朗普上世纪90年代对女作家卡罗尔实施性虐待和诽谤的罪名成立。此前，</span> </li> <li class="pic-item pic-item-4"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26913.html" target="_blank"> <img src="http://www.jxyuging.com/uploadfile/2022/0923/20220923105510538.jpg" width="140" height="105" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26913.html" target="_blank">【全球时快讯】美屠宰厂非法雇佣上百童工上夜班 有孩子被灼伤</a></strong> <span class="pic-item-info">据《卫报》等外媒5月9日报道，美国劳工部公布了一组童工戴护目镜、穿防护服，在屠宰厂使用化学药品消毒设备</span> </li> </ul> </div> </div> </div> </div> </div> <!-- 左边 end--> <!-- 右边 start --> <div class="side pt25"> <div class="col-mod mt30"> <div class="adver_3"><script type="text/javascript" src="http://user.042.cn/adver/adver.js"></script><script type="text/javascript">getAdvert('.adver_3',5,'250px','250px');</script></div> <div class="col-tit-wrap mb25 clearfix"> <h3 class="col-tit">热门资讯</h3> <div class="right-wrap"> </div> </div> <div class="pic-item-list-wrap"> <ul class="pic-item-list-5 clearfix"> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26931.html" target="_blank"> <img src="http://img.xhyb.net.cn/2022/0923/20220923104716152.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26931.html" target="_blank">商务部再次表态：如美国胁迫盟友共同遏华，将坚决反对 热头条 </a></strong> <span class="pic-item-info">在5月11日下午举行的例行记者会上...</span> </li> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26930.html" target="_blank"> <img src="http://www.viltd.com/uploadfile/2022/0610/20220610102323808.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26930.html" target="_blank">商务部：如美国胁迫盟友共同遏华，将坚决反对！ </a></strong> <span class="pic-item-info">在5月11日下午举行的例行记者会上...</span> </li> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26923.html" target="_blank"> <img src="http://www.xcctv.cn/uploadfile/2022/0610/20220610101610911.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26923.html" target="_blank">外交部回应“中朝边界于6月解封”：将持续合作 </a></strong> <span class="pic-item-info">5月11日，中国外交部发言人汪文斌...</span> </li> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://news.91zixun.com/xinwen/2023/0511/26922.html" target="_blank"> <img src="http://img.haixiafeng.com.cn/2022/0610/20220610014634425.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://news.91zixun.com/xinwen/2023/0511/26922.html" target="_blank">江苏江阴枪击案告破 两名嫌犯均已死亡-天天快资讯 </a></strong> <span class="pic-item-info">2023年5月4日凌晨5时许，江苏省江...</span> </li> </ul> </div> </div> <div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- 300*250 --><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="col-mod mt30"> <div class="col-tit-wrap mb10 clearfix"> <h3 class="col-tit">文章排行</h3> </div> <ul class="rank_list clearfix"> <li class="on"><em class="r_num r_num_r ">1</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0922/9934.html" target="_blank" >云南昆明营商环境会客厅活动举行...</a> </li> <li class="on"><em class="r_num r_num_r ">2</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0926/10094.html" target="_blank" >云南省安宁市退役军人事务局：组...</a> </li> <li class="on"><em class="r_num r_num_r ">3</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0926/10093.html" target="_blank" >白石岩村委会成立冬桃种植协会 ...</a> </li> <li class="on"><em class="r_num ">4</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0923/10025.html" target="_blank" >低碳环保！昆明市2022年“中国城...</a> </li> <li class="on"><em class="r_num ">5</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0923/10007.html" target="_blank" >昆明市东川区碧谷街道服务一线 ...</a> </li> <li class="on"><em class="r_num ">6</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0923/10006.html" target="_blank" >南进一步优化烟田布局：规划基本...</a> </li> <li class="on"><em class="r_num ">7</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0923/10005.html" target="_blank" >加大学校基础设施建设！云南省施...</a> </li> <li class="on"><em class="r_num ">8</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0923/10004.html" target="_blank" >小学初中就近入学率均达99%以上...</a> </li> <li class="on"><em class="r_num ">9</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0923/10003.html" target="_blank" >保山隆阳各乡镇街道多方筹措资金...</a> </li> <li class="on"><em class="r_num ">10</em> <a class="r_tit"href="http://www.91zixun.com/guancha/2022/0923/10002.html" target="_blank" >云南保山学院激活立德树人优质资...</a> </li> </ul> </div> <div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- 300*250 --><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="col-mod mt30"> <div class="col-tit-wrap mb25 clearfix"> <h3 class="col-tit">图片新闻</h3> <div class="right-wrap"> </div> </div> <div class="pic-item-list-wrap"> <ul class="pic-item-list-5 clearfix"> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://www.91zixun.com/tushang/2022/0928/10205.html" target="_blank"> <img src="http://img.oonews.cn/2022/0928/20220928105905326.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/tushang/2022/0928/10205.html" target="_blank">62%受访者对新能源汽车基本了解 汽车“里程焦虑”较为突出 </a></strong> <span class="pic-item-info">近日，重庆市万州区、开州区、城口...</span> </li> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://www.91zixun.com/tushang/2022/0928/10204.html" target="_blank"> <img src="http://img.oonews.cn/2022/0928/20220928105723561.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/tushang/2022/0928/10204.html" target="_blank">聚焦！2022年全国“绿色产品认证与标识宣传周”正式启动 </a></strong> <span class="pic-item-info">9月26日，由市场监管总局主办的202...</span> </li> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://www.91zixun.com/tushang/2022/0920/9789.html" target="_blank"> <img src="http://img.oonews.cn/2022/0920/20220920102306679.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/tushang/2022/0920/9789.html" target="_blank">昆明市体育中心足球锦标赛落幕 组委会已经在为新赛季做准备 </a></strong> <span class="pic-item-info">9月18日，全民健身·2021昆明市体...</span> </li> <li class="pic-item pic-item-5"> <a class="pic-item-img" href="http://www.91zixun.com/tushang/2022/0920/9755.html" target="_blank"> <img src="http://img.oonews.cn/2022/0920/20220920083234928.jpg" width="133" height="99" ></a> <strong class="pic-item-tit"><a href="http://www.91zixun.com/tushang/2022/0920/9755.html" target="_blank">中安街道种植了100亩万寿菊 每亩产值是种植包谷的两倍多 </a></strong> <span class="pic-item-info">时下，正是万寿菊收获的季节。走进...</span> </li> </ul> </div> </div> </div> <!-- 右边 end --> </div> </div> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--底部 strat--> <div class="footer"> <div class="footer-wrap clearfix"> <div class="public_footer_lcon"> <p align="center"><font color="#222222" face="microsoft yahei, simhei"><span style="margin-right: 10px; margin-left: 10px; font-size: 0px; white-space: normal; background-color: rgb(235, 235, 235); border-width: initial; border-color: initial; border-image: initial;"><img alt="经营性网站备案信息" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice02.jpg" style="border: none;" width="120" />    <img alt="不良信息举报中心" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice03.jpg" style="border: none;" width="120" />   <img alt="中国文明网" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice04.jpg" style="border: none;" width="120" />  <span style="margin-right: 10px; margin-left: 10px; white-space: normal; background-color: rgb(235, 235, 235); border-width: initial; border-color: initial; border-image: initial;"><img alt="国际顶级域名机构权威认证" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice07.jpg" style="border: none;" width="120" /></span></span></font></p> <p align="center">关于我们┊网站合作┊版权声明┊网站地图┊友情链接┊软件版权举报</p> <p align="center"><img align="" alt="" border="0" src="http://www.beian.gov.cn/file/ghs.png" width="20" />京公网安备 35075110106号　　增值电信业务经营许可证B2-2004115　许可<span style="background-color: rgb(255, 255, 255); color: rgb(67, 67, 67); text-indent: 5px; white-space: normal;"> <a href="https://beian.miit.gov.cn/" style="color:#000" target="_blank">粤ICP备18025786号</a>   </span>Copyright 1999-2018 © www.91zixun.com All rights reserved</p> <p style="text-align: center;"> </p> <p style="text-align: center;"><a href="http://91zixun.com ">91资讯</a> 版权所有</p> <p style="text-align: center;">联系我们:954 29 18 82 @qq.com</p> </div> </div> </div> <!--底部 end--> <script charset="UTF-8" language="javascript" src="//data.dzxwnews.com/a.php"></script> </body> </html>