weixin_53841730的博客

原创 全面实测Gemini 3.0，前端这回真死了吗？

摘要：Google AI Studio对Gemini 3.0模型进行了三项开发测试：1）物理规律理解的弹力小球游戏，模型能准确实现重力、摩擦力和碰撞反弹效果；2）赛博朋克风格马里奥游戏开发，8分钟完成高还原度版本；3）智能3D风扇网页，支持语音交互控制。测试显示Gemini 3.0在视觉设计、物理模拟和完整应用开发方面表现突出，特别是结合AI Studio构建工具后，能快速生成React+TS的复杂Web应用。虽然对专业开发者提升有限，但显著降低了开发门槛，预示着简单重复性工作将面临AI替代风险。（149字

原创 直播互动小程序端&Web运营端接入指南

直播互动使用阿里云的。使用该服务后，小程序端的直播互动消息只需要调用 service 获取长链接的 token，再根据景区ID 获取互动群组的信息后，即可加入互动聊天群，后续发送/接收消息就直接与阿里云的服务交互即可。在互动之外，有一项安全措施，如果用户发送的内容触发了敏感词，阿里云会阻止发送，并返回报错信息，小程序端需要处理这个情况，上报给 service 端存储记录，方便后续审查故意捣乱的用户。

原创 微信小程序测试webscoket打开体验版小程序的调试工具就能收到服务端返回消息，不打开调试工具就有概率收不到

原创 wx.getLocation线上版本无法弹出授权框？

用户需要先申请开通相关权限，并完善隐私保护协议。操作路径为：进入账号设置-服务内容声明-用户隐私保护指引，按要求填写相关信息。该流程旨在确保服务合规性并保护用户隐私权益。

原创 大疆司空2 直播接入教程

司空2平台通过第三方WebRTC服务实现无人机/机场直播，目前支持火山引擎和声网两个SDK。对接时需要根据返回的url_type选择对应SDK（agora或volc），分别提供appId、token等认证参数。示例代码展示了两种SDK的集成方法：火山引擎需创建引擎、加入房间并处理流发布事件；声网则需要创建客户端、加入频道并订阅用户媒体流。两种方案都提供了加入/离开房间的核心功能实现，其中火山引擎还包含DOM渲染等细节处理。当前STS认证尚未对接，平台接口暂未返回相关参数。

原创 阿里云web端直播（前端部分）

前端直播功能本文介绍了如何快速接入阿里云Web播放器进行视频点播和直播播放。首先，通过导入aliyun-aliplayer库和默认样式文件，创建一个播放器实例，并配置播放地址、直播模式、自动播放等参数。同时，提供了License的配置方法，确保播放器的合法使用。此外，文章还展示了如何在微信小程序中实现直播播放，通过live-player组件绑定播放地址，并提供了播放、暂停、停止、恢复、静音等操作的事件处理函数。这些步骤帮助开发者快速集成视频播放功能，适用于多种场景。

原创 Splitpanes拆分窗格插件使用

项目开发中用到了拆分窗格(就是下面的效果，可以拆分网页，我们项目通常都是用左右两块拆分，可以通过拖动图标进行左右拖动)，于是就发现了一个很好用的插件：Splitpanes。size指定初始化宽度(页面一进来显示的宽度)，总和不要超过100%，值是百分比。可以不指定，默认会平分总宽度。如果感觉组件引入比较麻烦，可以直接进行全局注册。记得一定加default-theme的类名，不然拖动图标会很小。minsize指定最小宽度，取值也是百分比。更多效果可以查看文档，只列举了一些常用的。直接v-for遍历循环即可。

原创 WebSocket

WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。

原创 Monorepo 介绍

Monorepo 是一种项目代码管理方式，指单个仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。Monorepo 提倡了开放、透明、共享的组织文化，这种方法已经被很多大型公司广泛使用，如 Google、Facebook 和 Microsoft 等。

原创 vue导出功能

【代码】vue导出功能。

原创 vue实现div拖拽

在移动端，我们使用@touchstart、@touchend和@touchmove事件监听器来代替桌面端的鼠标事件。在startDrag和drag方法中，我们使用event.touches[0].clientX和event.touches[0].clientY来获取触摸点的位置。对于移动端，需要使用触摸事件来实现拖拽功能。这样，你就可以在Vue 3中实现移动端的div拖拽功能了。最后，在CSS中添加以下样式。

原创 indexDB入门到精通

前言由于开发3D可视化项目经常用到模型，而一个模型通常是几m甚至是几十m的大小对于一般的服务器来讲加载速度真的十分的慢，为了解决这个加载速度的问题，我想到了几个本地存储的。首先是cookie,cookie肯定是不行的，因为最多以只能存4k，其次localStorage，最多能存5m(不是一个key的大小，是所有key的总大小最多加起来最多5m)，相对于cookie已经打了很多了。但是当遇到大模型还是不够，实际开发中大部分模型都是10m-30m的。

原创 G6 图可视化引擎基本使用

G6 图可视化引擎基本使用

原创 targetElement.closest

【代码】targetElement.closest。

原创 你不知道的Js高级方法

IntersectionObserver 是一个构造函数，可以接收两个参数，第一个参数是一个回调函数，第二个参数是一个对象。这个方法用于观察元素相交情况，它可以异步地监听一个或多个目标元素与其祖先元素或视口之间的交叉状态。特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。是一个用于获取元素位置和尺寸信息的方法。这个方法通常用于需要获取元素在视口中的位置和尺寸信息的场景，比如实现拖拽、定位或响应式布局等，兼容性很好，一般用滚动事件比较多。

原创 antd vue message提示自定义删除按钮

【代码】antd vue message提示自定义删除按钮。

原创 chatgpt提问dayjs比较日期范围

用dayjs比较数组格式时间如['01', '02', '03']是否在开始时间['01', '02', '03']和结束时间['05', '00', '00']之间。

原创 css处理浏览器输入框记住账号密码后的背景色

前言： 谷歌浏览器、在记住密码后，通常会给用户密码输入框渲染上一个背景色，在有些时候这个浏览器自动使用的渲染背景色会影响系统本身的UI界面，所以下面提供css方法处理解决。

原创 package.json文件解析

每个项目的根目录下一般都会有一个package.json文件，这个文件定义了当前项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等）。当运行npm install命令的时候，会根据package.json文件中的配置自动下载所需的模块，也就是配置项目所需的运行和开发环境。

原创 ant-design-vue的a-popover 改变样式的方法

(主要是我不知道你要的是哪个方向的，所以还是去浏览器定位copy)给popover添加overlayClassName属性。然后再style里面就可以正常写样式。如果会影响到你其他页面慎重考虑。

原创 js中精度超16位解决方法

注意：js中的数值Number没人是int，4个字节，16位，最大只能存16位，超16位后面的数据可能会被转化为0。的过程中，自动识别大整数，把大整数转成一个对象来表示，这样就不会产生精度丢失的问题了。json-bigint是一个第三方包，它在把json。

原创 对象或字符串的转化 - qs库

npm i qs。

原创 vue3中suspense的使用

1.作用：suspense在等待异步组件时额外渲染一些内容，使用户拥有更好的体验。使用susoense包裹组件，并配置好default和fallback。引入异步组件，Child需要在components里注册。子组件在等待结果的时候会先渲染fallback里面的内容。这是我子组件里面写的内容，方便查看效果。

原创 CSS实现瀑布流布局

主要是column属性。

原创 瀑布流插件vue-masonry

还有一些属性，感觉不是太重要，因此有兴趣的小伙伴可以自行尝试，问题不大，接着，对比下来不难发现，纯CSS用法还是非常捡漏的，如果真的是实用与项目中，除非是极其简单的应用，可以考虑用纯CSS实现，否则还是建议使用一些功能已经相对完善的第三方插件来帮助我们实现功能~这个属性是动画持续时间，比如，当父级容器的宽度尺寸发生变化了，理所当然的里面的瀑布流布局也会随之发生变化，所有基于瀑布流的DOM将要重新排布，这个排布的过程是动画化的，这个动画持续时间即这里设定的时间~

原创 Fullscreen Api

使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

原创 url解析

功能描述：对地址栏的参数进行处理。功能描述：快速解析url。

原创 Vue3的自定义指令

理解这些钩子函数也很简单：我们都知道自定义指令是作用在DOM元素上，那么自定义指令从绑定到DOM元素，再到DOM元素发生变化等等一系列操作，都对应了不同的钩子函数，比如当DOM元素插入到文档中时，自定义指令的mounted等钩子函数就会执行。我们使用自定义指令的目的就是为了灵活的操作DOM以及在钩子函数中处理我们的业务逻辑，所以Vue3将一些我们可能会用到的参数传递给了钩子函数，Vue3和Vue2中的自定义指令传递的参数都很类似。自定义指令也是类似的原理，我们需要先注册自定义指令，然后才可以使用它。

原创 new Set()的基础用法(ES6)

添加某个值，返回 Set 结构本身，当添加实例中已经存在的元素，set不会进行处理添加。返回键名的遍历器，相等于返回键值遍历器values()Set本身是一个构造函数，用来生成 Set 数据结构。删除某个值，返回一个布尔值，表示删除是否成功。返回一个布尔值，判断该值是否为Set的成员。，没有重复的值，我们一般称为集合。3.3 遍历 entries()3.4 遍历 forEach()3.2 遍历 values()3.1 遍历 keys()清除所有成员，没有返回值。4.2 用于字符串去重。1、什么是Set()

原创 使用VitePress搭建vue组件库文档

每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档。，所以下面就以element-plus作为示例来搭建一个文档吧。

原创 Access-Control-Allow-Origin跨域解决及详细介绍

我们能不能想办法，让我们的请求不通过ajax，而是通过给body中追加一个节点,这个节点的src值就是我们希望的要请求的目标接口，这样，服务器端返回的数据不就绕过这个跨域限制，将数据拿回来了。首先，跨域不是问题。跨域并不会阻止请求的发出，也不会阻止请求的接受，跨域是浏览器为了保护当前页面，你的请求得到了响应，浏览器不会把响应的数据交给页面上的回调，取而代之的是去提示你这是一个跨域数据。而当你上线项目时，如果你的代理配置得不够优雅，或者不够标准，你要小心了，非常有可能你的请求就都会失败。

原创 yarn link 使用方法

可以跨项目，跨文件操作自己想要调试的yarn包，不用每次发布，只要是自己的电脑就可以，因为yarn link 是存在yarn的内存中。相当于开了个通道。原理实质上就是在 在 全局yarn安装目录下设置软连接方式在开发的包里文件下（和packagejson同级） 运行 yarn link然后会出现 success link xxxx（包名） 的标志 此时你的开发包已经在内存中了。

原创 vue路由切换时报错：api.now is not a function

链接：https://pan.baidu.com/s/1uTyhny7zry0ioYHaSuGmAA?vue-devtools调试工具问题，用了beta版本导致，升级安装正式版即可。

原创 Chrome浏览器的跨域设置

Chrome浏览器的跨域设置

原创 使用scrollTo平滑滚动到顶部

behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto（等同于instant）我一开始考虑使用动画，后来一想如果使用动画，滚动时间就固定了，就会造成滚动忽快忽慢的情况。项目有页面右下角有个返回按钮，点击则滚动到顶部。这里希望平滑滚动到顶部，故而使用smooth参数。所以有没有办法让页面平滑滚动到顶部呢？left 等同于 x-coord。top 等同于 y-coord。

原创 vueUse插件--useDraggable的使用方法以及案例（vue3）

看到这个工具的时候，我的第一想法是让我的全局设置变成一个可自由摆放，自由拖拽的小组件。同样，你还可以去实现弹出框，对话框的自由拖拽等等。自由发挥想象，反正有了这个工具你少写很多代码，而且减少bug风险，毕竟是vue官方工具。好了，废话不多说，下面上例子。其中-40的部分是减掉元素本身的大小。这里只是一个简单的demo，没有去处理窗口大小变化的时候，所以感兴趣的小伙伴可以自行往下扩展。官方给出的demo，感兴趣的可以去VueUse官网看看。参数是一个对象，里面有初始值，拖拽方式，感兴趣的可以去看看源码。

原创 Object.assign是浅拷贝还是深拷贝？

Object.assign()拷贝的是属性值，如果源对象的属性值是一个指向对象的指针，那也只拷贝那个指针。所以如果对象的属性值为基础类型，对于通过Object.assign()拷贝的那个属性而言是深拷贝；如果对象的属性值为引用，对于通过通过Object.assign()拷贝的那个属性而言其实是浅拷贝的。神奇的事情发生了，target.a.b的值随着source变化而变化，但是target.c的值并没有随着source变化。target的值并没有随着source的变化而变化，到这里有人会说，这一看就是。

原创 vue3:setup语法糖

直接在script标签中添加setup属性就可以直接使用setup语法糖了。使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。//此时注册的变量或方法可以直接在template中使用而不需要导出}

原创 vue 子组件中直接修改父组件传递过来的值

【代码】vue 子组件中直接修改父组件传递过来的值。

原创 TS 类型推论

【代码】TS 类型推论。