- 博客(44)
- 收藏
- 关注
RSS订阅原创 Vue3 使用 Signature Pad 实现电子签名（签名位置偏差问题解决）
Canvas 有 width / height 属性和CSS的 width / height 样式，两者需要一致。设备像素比(Device Pixel Ratio)表示一个 CSS 像素对应多少个设备物理像素。根据 DPI 调整笔迹粗细，确保在高分辨率设备上线条不会显得过细。监听窗口大小变化并重新初始化签名板，确保在响应式布局中正常工作。：在高分辨率屏幕上，CSS 像素与设备像素不一致。禁用触摸设备的默认滚动行为，确保签名体验流畅。：未考虑设备像素比导致的事件坐标转换错误。使事件坐标与实际绘制位置匹配。
2025-04-11 09:27:50
1259
原创 微信小程序 request 流式数据处理
流式数据处理（Streaming Data）指逐步接收并处理数据片段的技术，无需等待全部数据加载完成。适用于大文件下载、实时日志、AI生成报告等场景，可显著降低内存占用并提升用户体验。
2025-04-07 13:56:04
1822
原创 Vue3 视频播放与截图功能实现
调用 Canvas 的 toDataUrl() 方法，将绘制好的图像数据转换为 Base64 编码的图片URL。：创建一个与视频尺寸相同的 Canvas 画布，使用 Canvas 2D 上下文（Condext2D）的 drawImage() 方法将视频帧绘制到画布上。：首先，通过 <video> 元素获取当前播放的视频帧画面，浏览器会将视频解码为连续的图像帧，我们可以通过 <video> 标签的API访问当前显示的帧。使用 HTML5 的 <video> 标签实现，src。改成你自己的视频路径。
2025-04-03 16:57:39
542
原创 Vue 使用 xlsx 插件导出 excel 文件
是否自动调整列宽，默认为 true。工作表名称，默认为 Sheet1。数据数组，包含要导出的数据。导出的 Excel 文件名。水印文本，默认为空字符串。表头数组，包含列名。
2025-03-27 19:06:39
570
原创 微信小程序 scroll-view 滚动到页面底部
使用 wx.createSelectorQuery 获取 scroll-view 的内容高度，使用 scroll-top 设置竖向滚动条位置。
2025-03-05 17:10:21
885
原创 CSS 实现波浪效果
具体使用需要自行调节 radial-gradient，background-size，background-position 的值，使形状衔接流畅。调整 background-size 的百分比会改变波浪的覆盖范围，调整 background-position 的值会改变两个渐变图案的重叠程度。第一个值：水平位置（left, center, right 或百分比），第二个值：垂直位置（top, center, bottom 或百分比）。第一个值：渐变椭圆的宽度，第二个值：渐变椭圆的高度；
2025-02-26 11:05:20
1123
原创 uniapp canvas 实现单指拖动、双指拖动和双指缩放
双指实现图片放大，首先获取图片的初始位置 initX 和 双指中心点到整个页面最左侧的距离 centerX ，得到双指中心点到自身边框的距离 bx ，接着通过缩放比例计算放大后双指中心点到自身边框的距离 ax，通过缩放前的 bx 减去缩放后的 ax ，就得到了缩放后图片在页面上移动的距离 scaleDx 了，y轴同理。双指拖动原理跟单指拖动一样，多加一步，用双指的中心点去计算，上图的点看成是双指的中心点，其他的一样。
2024-08-26 17:46:39
1809
原创 uniapp 使用 iconfont 图标
custom-prefix 对应 font-family ，type 对应 icon 后缀带的图标名。font-family 可以用默认的也可以自己命名，我这里是改了的，要改三个地方。全局引入在App.vue中引入，在 标签下引入。局部引入，在需要用到的页面引入，方法一样。iconfont-阿里巴巴矢量图标库。
2024-08-21 13:58:01
900
原创 JS 实现大对象深度对比
在现代前端框架（如 React、Vue）中，常常需要管理应用的状态，这时大对象就显得尤为重要。如果对象过于庞大，可能会对性能产生负面影响，例如响应速度变慢、内存占用增加等。大对象一般包含多个嵌套层级，可能包括数组、对象、函数等。
2024-08-19 21:31:34
482
原创 Vue3 自定义指令
可以定义指令的生命周期钩子，比如 created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted 等。在 main.js 文件中，通过 app.directive 方法来注册。
2024-08-09 16:23:22
533
原创 Vue3 使用 echarts
这个问题是在切换 series 或者 resize 时报错的， vue3 中使用 proxy 的方式监听响应式， this.chart 会被在 vue 内部转换成响应式对象，从而在 resize 的时候获取不到。在实例化echart时，将其指定为非响应式的即可。
2024-08-08 10:07:53
517
原创 Vue 3 纯前端实现导出excel功能
使用 xlsx-oc 的 exportExcel(header, list, fileName) 方法实现（header 表头数据，list 表格数据，fileName 文件名）
2024-07-19 17:29:01
370
原创 React Native FlatList 实现上拉加载、下拉刷新
FlatList 提供了 上拉加载（onEndReached）、下拉刷新（onRefresh）、是否显示加载的 loading 效果（refreshing）这三个属性。
2024-07-16 17:18:13
946
原创 Vue3 el-form 当有必填项未填的时候，提交表单时光标自动移动到第一个未填项且出现提示信息
利用 Object.prototype.toString.call() 方法判断 proxy.$refs[keys[0]] 的类型是否为对象的字符串形式。1. 当校验不通过时收集所有未通过字段项的提示信息，将其通过 push 方法添加到定义好的数组中 messageArr。2. 通过 proxy.$refs[keys[0]] 获取到首个字段校验不通过的提示信息；3. 最后通过 scrollIntoView 方法滚动到首个不通过校验字段项。，作用主要是用来定位（ref 的值建议与 prop 同名）。
2024-07-12 16:20:03
743
原创 Vue3 实现长时间未操作系统，登录过期的功能
登录成功后记录时间（记为上一次点击），后面每次点击的时候都获取一次当前的时间，将当前时间减去上一次点击页面的时间，如果小于15分钟，就用当前的时间替换掉上一次点击的时间，大于15分钟就退出登录。用户登录系统，设置超时时间为15分钟，用户超过15分钟未操作页面，则在15分钟后再次点击页面的时候出现退出登录提示，点击跳转到登录页。
2024-07-12 16:01:15
1278
原创 React Native 滚动到页面指定位置
3. 再通过 scrollViewRef.current.scrollTo({y: layoutY[i], animated: true});滚动到对应位置，y 是刚才获取到的 e.nativeEvent.layout.y。1. 在渲染需要滚动到的指定位置的 View 标签，通过 onLayout 的 e.nativeEvent.layout.y 获取每个关键词距离页面顶部的位置；2. 给 绑定一个 ref = {scrollViewRef}；
2024-06-21 16:28:23
783
原创 React Native 使用 react-native-chart-kit 实现图表
【代码】React Native 使用 react-native-chart-kit 实现图表。
2024-06-19 19:27:16
781
原创 React Native 使用 react-native-table-component 实现表格
使用第三方库 react-native-table-component。使用第三方库 react-native-chart-kit。
2024-06-19 11:09:09
449
原创 vue 的五种组件通信方式
Vue 实例作为中央事件总线，通过 $on 监听事件，$emit 发布事件，实现任意组件间的通信。父组件通过 props 向子组件传递数据，子组件通过 emit 发送事件给父组件。之间的简单通信，父组件向子组件传递数据，子组件通过事件触发通知父组件。Vue.js 的官方状态管理库，集中式存储管理应用的所有组件的状态。适用于需要在子组件中访问父组件的特性和监听器的场景。获取父组件传递的非 prop 特性，通过。获取父组件传递的事件监听器。适用于复杂的组件结构，需要在。关系的非父子组件通信，或者。
2024-06-16 10:55:28
468
原创 Vue 一个项目实现多个入口文件打包（单页面打包）
在 .env.development 和 .env.production 文件中定义打包变量。# 需要打包的页面 打包单页面填页面名称JsonData 打包全部all。
2024-06-12 19:02:29
639
原创 React Native 打包（本地）
接着会让你输入密钥库口令，我用的是官网给的 my-release-key ，这个口令最好一个项目的开发都统一，这样 gradle 配置一次就可以，后面不需要再改。
2024-06-04 18:56:46
709
原创 React Native 封装一个双层 tab 栏
react-native-elements 只提供单层的 tab 切换，且无法嵌套使用，所以使用 tab 和 button 这两个组件封装了一个，可以自定义两层 tab 标题和每个 tab 对应的页面（以组件形式传入）。
2024-05-31 16:21:47
443
原创 React Native 封装一个表单组件
使用 react-native-modal-datetime-picker 第三方组件，只能选择年月日，时间不进行处理的话是默认当前时间（为了适应后端接口需要，我这里设置了个 initTime ，可以手动将时间设置为 00:00:00 或者 23:59:59）。使用 react-native-dropdown-picker 第三方实现，现在多选 multiple 的选择结果值有问题，仍是单选结果。使用 elements 的 Input 组件，集成 Formik 和 Yup 表单校验。
2024-05-29 17:26:17
842
原创 React Native 展示富文本（HTML标签）
设置 contentWidth 是为了正确处理屏幕旋转和图像缩放，不设置的话可能会导致在屏幕旋转后布局变得不一致，也会出现警告。要想全局控制整体样式，需要设置 tagsStyles 属性，需要根据每个标签做适配，开发成本有些大。
2024-05-22 10:39:26
794
原创 React Native 路由导航 react-navigation 6.x 的使用
react native 官网的主推方案就是一个单独的导航库 react-navigation。
2024-05-10 11:01:20
1977
原创 微信小程序 验证码登录 自定义输入框样式
将 input 输入框颜色设置透明，定位到自定义输入框的样式上面，点击输入框时聚焦，可以输入内容，再将输入的值分别赋值到已经渲染好的横线上，最后监听 input 的值，实现输入完直接自动登录。
2024-04-09 14:40:58
855
原创 微信小程序 自定义底部导航栏 tabbar
在每个导航栏的页面都需要单独写一个 onShow 方法，当显示 tabbar 页面时，需要手动 setData 选中当前菜单的 index ，否则无法实现自定义 tabbar 的选中状态。然后在 utils 文件夹中添加 tabBarUrl.js 文件，用来存放所有的 tabbar 地址，这个文件可以自己命名。），在这个文件夹里新建一个 index.wxa 的文件，就是我们自定义 tabbar 的文件了，这部分的代码基本可以照搬。接着编写自定义 tabbar 的文件，在与。
2024-04-09 14:19:36
548
原创 微信小程序 上传代码失败，提示分包大小超过限制的问题解决
如果有之前开发完成的功能，但是后续不再使用，在确认之后可以将其删除，减少代码量；或是之前的冗余代码也可进行优化。检查有没有引入但未使用的插件或组件，有的话要删掉，这也可以避免不必要的空间浪费。除了主页面和tabbar页面需要放在主包之外，其他的都可以按模块进行分包。直接将需要压缩的文件压缩完替换掉项目中原先的文件即可。按照以上代码配置如果出现下面的报错，可以试试“项目，有时候缓存的问题会导致奇怪的错误。
2024-04-02 15:44:48
2459
原创 微信小程序 游客模式
接口调用成功后再决定是否置为 'tourist'（比如退出登录的时候接口调用成功后也不需要置为 'tourist' ）。这里当状态码返回4001时进入游客模式，存的是 wx.loginMode。在 wx.request 之前做判断，如果是游客模式，就 return。由于进入游客模式后不发起任何请求，所以在需要调用接口比如。等按钮的时候，需要先将。
2023-12-23 09:19:12
1211
原创 js 拖拽事件
拖放元素在目标元素上离开时触发（在目标元素上时如果松开鼠标也会触发）。实现简单的拖拽事件（将一个 div 中的内容拖拽到另一个 div ），被拖放的元素在目标元素上同时鼠标放开触发的事件。拖放元素进入目标元素时触发。拖放元素在目标元素上时触发。才会触发drop事件】被拖拽的元素一定要有。在拖拽的过程中触发。
2023-09-06 07:38:25
381
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人