关于假装我是一个高级组件这件事

关于假装我是一个高级组件这件事

最近在做公司的小程序聊天部分。

由于很久没更新过了,只能参考 APP 的实现。

这一看不知道,发现个很无语的事情。

大哥,你是地图啊?

咱看看这个截图

这里我一共发了三条地图消息。

但是有个很抽象的事情:

咱的 APP选手,直接加载了三个地图组件到当前页。

于是,我就问他了,是不是用户发了 100个定位,就初始化 100个?

APP:Yes!

问题所在

如果是在 APP 端,做了消息虚拟滚动的,又因为现在各位阿宝的手机配置越来越高。问题也不算太大。

当这个东西,出现在小程序中呢?

  1. 首先,小程序本来就是个性能垃圾的产物
  2. 其次,我们还用的是uniapp-vue2版本写的。。我也不知道这个版本怎么做虚拟滚动。。。
  3. 然后,我是小程序垃圾选手,我只会 pc/web/服务端
  4. 最后,加载这么多地图组件到页面上本来就是个很抽象的事情好伐!

我来假装组件

如何解决?

很简单的拉,我用图片替换这个地图不就好了?

比如:

这条消息发送了一个经纬度:[111,222]

那么,我就到利用某些方法,把这个坐标的贴图获取到。

最后组装成为一个图文消息。

岂不快哉?

用户觉得,我发了这么多地图消息,不卡诶? 交互很不错嘛。

哈哈哈

引入其他的一些思考

当然,我们在开发的时候会遇到各种类型的问题,这些时候,参考竞品是很不错的选择~

交互式消息

金三银四的时候,大家在用某 ss 的时候,发消息。

HR: 向你发起了一个面试邀请~ ✔ or ❌

这个时候你只需要点击一个 ✔就能处理这个消息

这个时候是怎么做到的呢?

在不利用本地数据库的情况下,要么存储到后端数据库。

要么?我把问题的 id 保留到我接受的这条消息中。

其实就是:

javascript 复制代码
messageA = {
id:1,
content:'你是否接受. ✔ ❌'
}
messageB = {
id:2,
coentent:'我已接受您的面试邀请~',
extIfo: {
extId :1,
extOption: '✔'
}
}

那么我在渲染消息的时候,发现我这条消息处理了 id 为 1 的这条消息。我们就可以返回去,把id 为 1 的消息状态改为已经被操作过~

不建议使用各种本地数据库留存操作数据。因为要涉及到多端、多设备同步。你存你 **的本地!

伪装组件

各种聊天工具里面

什么在线文档、地图、视频组件。

其实都可以用图文消息伪装~

把文档在服务端处理,生成一张预览图。直接插入聊天中,效果也是杠杠的~

其他组件同理。

结语

赶紧把你代码里面那些可以被假装的组件修改了~

相关推荐
李少兄11 分钟前
简单讲讲 SVG:前端开发中的矢量图形
前端·svg
前端小万12 分钟前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭12 分钟前
Flutter 3.38.1 之后,因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo16 分钟前
Flutter 需要 Hooks 吗?
前端
光影少年26 分钟前
前端如何虚拟列表优化?
前端·react native·react.js
Moment28 分钟前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试
invicinble1 小时前
对于前端数据的生命周期的认识
前端
PieroPc1 小时前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
hunter14501 小时前
2026.1.4 html简单制作
java·前端·笔记·html
鹏程十八少1 小时前
Android 深入剖析Android内存泄漏:ViewPager2与Fragment的生命周期陷阱
android·前端·app