- 博客(19)
- 收藏
- 关注
RSS订阅原创 react + video标签，自定义视频控制栏controls，封装成完整组件，附带完整代码
本文介绍了自定义video标签控制栏的必要性和实现方法。原生控制栏存在样式不可定制、功能局限和移动端兼容性差等问题。作者基于React实现了一个功能丰富的自定义控制栏，包含画中画、静音、全屏、进度条等控件，并解决了自动播放限制等技术难点。文章详细展示了代码实现，包括事件处理、状态管理和跨浏览器兼容方案。最后强调浏览器对自动播放的严格限制，建议开发者遵循用户交互原则，避免在无交互情况下强制视频播放。该组件实现了统一风格和功能扩展，为视频播放开发提供了实用参考。
2025-07-24 14:28:35
747
原创 使用 react + webSocket 封装属于自己的hooks组件
本文介绍了如何用React封装WebSocket为自定义Hook。通过创建useWebSocket钩子，实现了连接、断开、发送消息等功能，并实时获取连接状态和接收的消息。该封装解决了HTTP轮询问题，特别适用于聊天、客服推送等双向通信场景。示例代码展示了连接建立、消息发送和接收处理等使用方法，使WebSocket集成更加简便高效。
2025-07-22 15:49:45
437
原创 记录js使用原生 XMLHttpRequest方法 封装http请求，并提供使用实例
本文介绍了一个基于原生XMLHttpRequest封装的轻量级HTTP请求工具，适用于对包体积敏感的小型前端项目。该工具提供了get/post/put/delete四种请求方法，支持配置基础URL、超时时间和请求头，相比axios等库更加轻量。核心是通过Promise封装XMLHttpRequest，处理了请求参数、超时、错误和响应解析等场景。使用示例展示了如何设置基础URL和超时时间，并调用接口请求。这种封装具有更好的可移植性，能快速在不同项目中复用。
2025-07-22 14:58:38
369
原创 解决iOS 环境下，使用 position: sticky 的元素在滚动时可能会突然消失或表现异常（如不吸顶、闪动等）
position:sticky是CSS中一种结合了相对定位和固定定位的定位方式，允许元素在滚动到特定位置时“粘住”在视口中。然而，在iOS环境下，使用sticky时会出现两个问题：一是通过JS锚点滚动时，若未启用平滑滚动，会出现闪烁；二是iOS的弹性滑动效果会导致sticky元素异常消失。这些问题主要源于iOS的渲染机制和Safari对sticky的特定处理，而安卓由于没有弹性滑动效果，因此不会出现类似问题。为解决这些问题，可以在滚动时将sticky元素临时设置为fixed，并在滚动结束后恢复为sticky
2025-05-09 17:24:42
1034
原创 记录浏览器下载app包，下载文件方法
不管是下载app应用还是导出文件，实现的方法都是通过a标签的ref下载，不同的是下载文件会有中转层，window.URL.createObjectURL方法将字节流数据转成url进行下载。
2025-04-28 13:35:59
354
原创 使用uniapp开发实现开心消消乐游戏并发布到微信小程序
下面是在onLoad方法里通过随机数方法selectFrom实现初步9*9的动物onLoad() {// 生成动物，第几列第几行i < 9;j++) {col.push({i: i,j: j,})// 判断是否有三个的，有的话重新生成},其中可能会有几率生成三个一行或一列的动物，这时候就要下面的方法进行判断并替换// 将生成的动物列表判断上下左右是否是三个i < 9;j++) {},
2024-05-22 16:59:21
4041
1
原创 react + setInterval定时器实现缓慢升高的柱状图效果
主要是利用setInterval定时器控制柱状图高度的变化，难点是三个柱状图堆叠后，定时器的切换和高度的接续升高，以及其中不同柱状图连接处的流畅变化。以上就是柱状图动态升高的全部内容了，有问题可以再评论区留言哦。
2024-05-22 10:55:13
418
原创 uniapp从创建项目到发布微信小程序全流程记录
在后台将提交的版本设置为体验版（小程序有正式版和体验版两个版本），扫码就能在微信上看到自己的小程序了，但是别人想要体验是需要管理员通过体验申请的。如果想要小程序发布到正式版是需要备案申请的，可能需要营业主体注册一系列操作。通过uniapp发布到微信开发者工具，微信开发者工具发布到微信公众平台，最后在平台操作发布到体验还是生产。（同理用taro+react开发也是一样，项目启动后，用微信开发者工具监听路径也能在微信开发者工具上运行，然后就是一样的上传发布）。
2024-05-06 13:40:25
1396
原创 记录遇到过的npm包的问题即可以使用patch-package解决问题的一些场景
patch-package确实给我们带来了极大的便利，因为平时使用的npm包也都是程序员们写的，总会有这个那个问题，或者没有达到预期效果，需要改源码的场景，以上就是我遇到过的需要patch-package解决的问题，当然还有很多其他的场景也可以用的到，比如antd的组件maxLength属性限制不符合预期问题，该问题已在后续版本修复了，这里就不具体展开了。
2024-02-27 18:14:24
2057
原创 记录patch-package修改npm包使用方法
patch-package确实给我们带来了极大的便利，因为平时使用的npm包也都是程序员们写的，总会有这个那个问题，或者没有达到预期效果，需要改源码的场景，下一篇文章我们就聊一下我遇到的需要用patch-package修改npm包的一些问题。
2024-02-27 16:17:30
1950
原创 vue使用html2canvas + opacity透明覆盖，实现长按图片保存本地
在分享的时候，要实现长按保存图片到本地，图片还得是前端自己生成，且包括图片二维码和封面图片文字等。像下面这样的截图保存到本地。
2024-02-26 17:06:14
919
1
原创 解决html2canvas组件生成截图卡顿问题
h5端在开发的时候，难免有需要截图分享等功能，但是有时候又没有客户端app的支持，只能自己实现，而当下比较流行的元素截图也就是html2canvas和domtoimage。其中domtoimage存在致命的问题就是生成的截图会很模糊，如下图，左侧是domtoimage生成的，其原因大概是canvas中原像素因为没有与物理像素的统一导致其中原像素点与设备像素产生偏差，然后解决的方法网上一堆大概也就是修改node文件里的domtoimage包，使canvas适配设备宽高。
2024-02-05 10:22:15
3725
5
原创 echart实现基金走势图十字坐标随手指滑动显示
/ 模拟十字轴的横轴// 获取点击位置的坐标// containPixel为true则点击位置在坐标轴内// 传入鼠标位置坐标进行转化// convertFromPixel返回[x, y],x对应鼠标点击处数据的下标,y对应鼠标点击处的数值if (!return;// 修改markLine的值// 重新setOption// 设置选中的内容} else {// 不在坐标轴内不展示markLine});});});// 设置选中的内容});
2023-10-26 15:50:32
2318
5
原创 webpack打包通过利用代码复制的插件，将静态内容注入到window，实现发布不同环境时，修改静态文件即可无需重复修改打包
项目在打包完发布的时候，往往有不同的环境，比如而这些环境又有不同的静态跳转地址，比如在测试环境我跳转到某个商城是要。这时候改了一个需求以后要根据不同的环境修改不同的地址，然后再重新打包，不仅繁琐，而且容易修改错误会和新加的需求代码混在一起。
2023-10-08 17:21:03
353
1
原创 记录使用vue+echarts简单封装基本的折线图，柱状图，饼状图组件
template>props: {yData: [],},]),},width: {},height: {},colors: {"#FF6801","#FFAE5F","#F9E619","#36A2DA","#3ACEF1","#F14CEC","#4CF1DD",]),},watch: {},// 深度观察监听deep: true},data() {return {},watch: {},// 深度观察监听},
2023-09-22 17:45:50
536
1
原创 微信小程序（以taro为例）引用cdn字体在安卓无效（调试模式可以看到报错）
于是让后端在服务器上将微信小程序的域名加上跨域白名单，https://servicewechat.com, 不同的服务器加白名单方式不同，这个以具体服务器为准。加上白名单后，安卓也能完美的展示字体文件了。
2023-09-18 16:45:22
1397
原创 记录用react+css的clipPath及mask计算切割，得到圆环进度条
/ 计算笑脸位置return {// xy坐标x: 0,y: 0});// 当前进度的类型// 【0%~35%）-落差巨大、【35%~60%）-勉强维持、【60%~80%）-基本持平、【80%~100%】-舒适生活text: '落差巨大',});text: '落差巨大',text: '落差巨大',text: '勉强维持',text: '基本持平',} else {text: '舒适生活',initData();}, []);
2023-09-13 18:06:19
684
2
原创 记录react15版本升至16及以上步骤及遇到的问题
查看项目package.json中，"react"及"react-dom"两个包版本号然后在命令行中依次输入：npm install --save react@17.0.2npm install --save react-dom@17.0.2现在都有react18了，为什么只升到17，问就是为了稳定，毕竟公司项目，领导能同意升级包已经不错了，还是要求稳定的。之后在命令行中依次删除 node_modules 包，重新npm安装：rm -rf node_modulesnpm install到这里就已经完成了升
2022-07-05 17:12:34
2698
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人