- 博客(165)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 分享一个自研小程序：穿搭style
一款关于穿搭的微信小程序：有海报轮播图、分类swiper、搜索功能、人工智能api图像识别、评论、收藏模块、分享海报、上传图片，天气模块。Tips： 这是我大三的时候拿去参加省比赛的项目，当时技术有限，所以我是推荐作为入门项目学习沟通，大佬就可以绕开啦，技术含量不高哈，只是给入门同学一个借鉴思路。详细的开源仓库：GitHub因为这个小程序没有后端参与，所以数据是存储在小程序的云开发端，其使用教程在穿搭style云函数配置教程.md 文档里面...
2022-05-26 12:10:58
1113
1
原创 关于HTML中上传图片
关于HTML中上传图片值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。但是还有一点，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没...
2018-10-14 10:06:16
49209
5
原创 鸿蒙原生App的H5如何唤端
需要客户端支持scheme协议，并做内置操作，有安装App打开App，反之打开应用商店下载页。端外的H5页面有唤端App的操作，没有安装的时候跳转到对应App的应用商店下载页。1. 先尝试直接打开scheme，如果有安装App，则会弹出打开App的弹窗。建议的做法是：做一个打开浏览器的引导页，去浏览器后可以正常打开。2. 如果没有安装App，则跳转应用商店，同理，App互相唤端也是这样的逻辑。（这个scheme协议是需要。
2025-03-06 17:46:45
435
原创 超高清大图渲染性能优化实战：从页面卡死到流畅加载
在混合开发H5页面的时候，客户上传了一个超高清大图上来，并想要点击预览，结果一点开图片就页面卡死💔
2025-02-20 14:52:55
898
原创 React的基础API介绍（二）
useState 是 React Hooks 中最基本也是最常用的一个 Hook，用于在函数组件中添加状态管理功能。它使得函数组件能够像类组件一样拥有内部状态，而无需编写类组件的样板代码。useState 的引入改变了这一点，它允许在函数组件中引入状态。每次调用useState，都创建了一个状态变量和更新该状态的函数。
2024-11-11 18:01:50
579
原创 React的基础API介绍（一）
在重新执行 effect 之前：如果 useEffect 的依赖项数组中的某个值发生了变化，React 会在重新执行 effect 之前调用上一次 effect 的清除函数。这避免了副作用的累积，并确保每次 effect 执行前的环境是干净的。useEffect 中的函数能够读取到最新的 count 状态值，主要是由于 JavaScript 中的闭包机制和 React 函数组件的渲染逻辑。避免不必要的更新：通过正确设置依赖项数组，可以避免不必要的 effect 执行，提高组件性能。不会阻塞渲染，更常用。
2024-11-11 17:11:39
1219
原创 如何处理 iOS 客户端内 Webview H5 中后台播放的音视频问题
在 iOS 客户端中，通过 WebView 打开 H5 页面时，如果页面中包含视频或音频内容，WebView 默认情况下会继续在后台播放这些媒体。**即使用户切换到了其他应用，媒体也不会停止播放**，这可能导致以下几个问题：
2024-11-11 16:15:27
1567
原创 一篇文章搞懂 Hybrid H5 开发中的刘海屏与安全区域问题
在开发Hybrid应用时，我们经常遇到需要自己设计导航栏的情况。这种设计必须考虑到不同设备的屏幕特性，比如iOS和Android设备的刘海屏和底部安全区域高度的问题。在开发移动设备上的网页时，需要充分了解移动设备的布局特点。视口（Viewport）：移动设备的视口通常指浏览器的显示区域，可以通过meta标签设置视口属性，如宽度、高度和缩放比例。刘海屏（Notch Screen）
2024-10-25 13:51:21
1124
原创 前端工程师面试题整理
语义化 HTML指的是使用具有明确意义的 HTML 标签来描述内容，使代码更具可读性和可维护性，同时提升搜索引擎优化（SEO）效果和可访问性。优势：提高可读性：开发者和其他人更容易理解代码结构和内容。增强 SEO：搜索引擎更容易抓取和理解网页内容，提高网站排名。改善可访问性：辅助技术（如屏幕阅读器）更好地理解和呈现内容，提升无障碍体验。使用来定义页面的不同部分。使用来组织内容。使用。
2024-10-19 10:27:39
862
原创 Safari 中 filter: blur() 高斯模糊引发的性能问题及解决方案
filter: blur()需要对每个像素进行复杂的计算，尤其在高模糊值的情况下，每次页面滚动或重绘时，Safari都必须重新计算这些像素，从而导致页面渲染性能下降，甚至出现卡顿。在这个例子中，我们有一个模糊背景的div，通过应用filter: blur(200px)来实现模糊效果，同时使用transform: translate3d(0, 0, 0)来触发硬件加速，从而避免了Safari中的性能问题。然而，在特定的浏览器中，比如Safari，我们经常会发现一些让人头痛的性能问题。
2024-10-17 17:31:09
1737
原创 Taro构建的H5页面路由切换返回上一页存在白屏页面过渡
在H5页面中使用了taro-router进行页面跳转，整体体验上大部分情况下是流畅的。但在某些情况下，比如用户通过侧滑返回上一页时，会出现白色页面短暂的过渡现象。页面状态未及时恢复：由于侧滑返回时，Taro可能未能在合适的时间点恢复之前页面的状态，导致页面需要重新渲染，从而产生白屏。WebView渲染延迟：在一些设备上，嵌入的WebView对于页面的渲染有微小延迟，而这种延迟在页面状态切换时尤为明显。动画过渡问题：Taro在页面过渡时的动画未能与侧滑返回的动画同步，从而导致视觉上出现白屏效果。
2024-10-17 15:48:36
1176
原创 如何自己实现一个丝滑的流程图绘制工具(九) 自定义连接线
但是有个需要注意的是，你吧线改变了两端，虽然创建线的时候的两头节点看不到，但是本质存在会影响画其他节点。所以我连接线创建的两个虚拟节点类型是不同的。这样遍历画布上的节点就可以找到多余的两个点，删掉。创建一个线的dom节点，监听鼠标的移动和放下，使线跟随鼠标移动。在画布区域松开鼠标后，创建两个很小的节点并连接起来。产品又有更近的想法了，bpmn-js的连接线你用的时候是看不到的，也就是你从左侧点击连接线的没有线随鼠标移动.这样就是一个假象，一根线放在画布上，可以改变连接线的两端。
2023-11-10 13:44:59
641
原创 如何自己实现一个丝滑的流程图绘制工具（七）bpmn-js 批量删除、复制节点
希望实现批量删除和复制节点，因为bpmn-js是canvas画的，所以不能像平时页面上的复制一样直接选择范围，会变成移动画布。因为bpmn-js对鼠标直接选取范围进行了拦截。所以我加了一个辅助按键进行选择。绘制一个选择的效果框，这样才可以看出来选的节点有哪些。上面的选中范围框效果也是用canvas画出来的。
2023-08-30 14:43:35
856
原创 如何自己实现一个丝滑的流程图绘制工具（一）vue如何使用
、他的流程图是涉及到业务的，比如开始事件、结束事件等。接下来看看在vue项目中我们如何使用bpmn-js。3、可以实现一个完整的流程事件，并进行模拟。对比下来我还是选择了。引入npm 相关的包。
2023-08-24 15:20:07
1352
2
原创 element-ui-table的表格树形结构的选择功能不能选中children
项目的table表做的树形数据展示，但是又需要支持多选操作，发现elemen-ui的多选，只选中父级，不包括 children。点击父级的时候判定有没有孩子，有的话遍历选中孩子，并且要给已选值变量进行添加，取消的时候还要从已选值中删除。
2022-09-27 21:30:20
1363
3
原创 从零开始到完整的React后台管理项目开发路程(第四节)
原生的localStroge兼容性不够，所以引入store库来存。这里有个关于路由导航的渲染方法，我一共尝试了两种方法写，其中有个天气模块，需要先去申请。如何维持登陆、免登陆。
2022-08-15 17:25:14
425
原创 从零开始到完整的React后台管理项目开发路程(关于路由导航栏的渲染方式)
React用的是jsx风格的代码语言，所以写的的时候可以直接生成带html标签的数组因为侧边路由配置不止一个，所以最好的方法是配置路由地址文件，然后去遍历渲染其实就是递归的思路去生成数组。......
2022-08-15 15:52:33
846
原创 table表实现拖拽交换列表顺序
当表格列表的数据涉及到排序或者优先级时，这个功能就很关键了，直接拖拽交换顺序比上下点击移动更友好。关键的是引入npm install --save sortablejs。
2022-08-12 15:47:11
880
1
原创 MACBOOK M1芯片上安装mongdb遇到的问题，以及安装教程
M1芯片上安装mongodb的时候，当brew services start启动成功后是显示正常的，但是brew services list 的时候status是error的
2022-08-05 13:34:52
1418
原创 IntersectionObserver API实现场景
1. 图片懒加载——当图片滚动到可见时才进行加载2. 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉3. 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况4. 在用户看见某个区域时执行任务或播放动画.....................
2022-08-02 16:27:26
427
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人