Summer不秃-优快云博客

原创手把手教你如何通过微信小程序上传图片到腾讯云COS

在微信小程序中上传图片到腾讯云COS时，有两种常见的认证方式：直接使用永久密钥和使用临时密钥。本文将分别介绍这两种实现方式，并提供完整的代码示例，帮助开发者根据需求选择合适的方案。

2025-04-07 11:43:30 767

原创微信小程序分包与预加载：提升用户体验的有效策略

分包是指将一个小程序按需划分为多个子包，在用户首次打开时只下载必要的资源，而其他资源则按需请求。这样可以有效减少小程序首页的加载时间，提高用户的首次使用体验。通过合理的分包设计和有效的预加载策略，可以显著提升微信小程序的性能，为用户提供更加流畅快捷的使用体验。希望本文能为各位开发者提供有价值的参考，共同探索更多优化小程序的方法。

2025-03-15 12:15:20 428

原创微信小程序开发者的 ECharts 入门指南：快速上手数据可视化

通过本文的学习，你应该能够在微信小程序中成功集成 ECharts，并根据自己的需求定制各种类型的图表。ECharts 强大的功能和灵活的配置选项为数据可视化提供了无限可能。希望这篇博客能激发你在项目中尝试更多创意，让数据说话，为用户提供更加直观和有价值的信息呈现方式。继续探索 ECharts 的更多特性，开启你的数据可视化之旅吧！

2025-03-12 11:36:29 832

原创【React组件通讯双重视角】函数式 vs 类式开发指南

适用于任意组件之间的通信。需要手动管理事件的订阅和清理。适合非父子关系的组件通信。React 组件通信是前端开发中的核心技能之一。通过本文的学习，您将能够轻松应对各种组件通信场景，并编写出高效、可维护的 React 代码。接下来，让我们一起深入探索 React 组件通信的奥秘吧！

2025-02-14 10:24:35 835

原创精通React路由传参：实现无缝页面跳转与数据传递

每种参数传递方式都有其独特的应用场景和优缺点。了解并正确选择合适的参数传递方法，对于构建高效、灵活且用户体验良好的React应用至关重要。无论是展示个性化内容、实现动态搜索功能还是确保数据传输的安全性，掌握这些技术都能为你的开发工作带来极大的便利。

2025-02-10 00:27:26 1376

在现代Web开发中，React凭借其高效的组件化开发模式和虚拟DOM技术，已成为构建用户界面的首选库之一。然而，仅掌握React的核心概念并不足以应对复杂的单页应用（SPA）开发需求。路由管理作为连接各个页面、实现视图切换的关键环节，对于提供流畅的用户体验至关重要。无论是导航到不同的页面，还是根据URL动态展示内容，合理设计与实现路由都是每个React开发者必须面对的课题。本文旨在为读者提供一个全面而深入的指南，帮助你从基础到高级全面掌握React路由的应用。

2025-02-07 16:31:48 929

原创 TypeScript+React+Redux：类型安全的状态管理最佳实践

在现代前端开发中，React 作为最流行的 UI 库之一，以其组件化和声明式编程的优势深受开发者喜爱。然而，随着应用规模的扩大，组件之间的状态管理变得越来越复杂。如何在保证代码可维护性的同时，高效地管理全局状态，成为了每个 React 开发者必须面对的挑战。Redux 作为 React 生态中最经典的状态管理工具，提供了一种可预测的状态管理方案。但随着 Redux 生态的演进，开发者们逐渐发现，传统的 Redux 开发模式存在大量样板代码，学习曲线陡峭，甚至可能让项目陷入 "过度设计" 的陷阱。

2025-02-06 10:37:21 893

原创 Service Worker 提高首页的打开速度

在这个项目中，我将详细展示从搭建基础环境到逐步实现 Service Worker 缓存策略的全过程，包括如何处理页面和接口请求的缓存，如何应对版本更新带来的变化，以及在这个过程中遇到的各种棘手问题，像资源路径错误导致的缓存失败、接口请求出现 404 找不到资源的情况、缓存状态无法正确获取和显示等，我都将一一为大家呈现是如何解决的。无论你是初涉前端领域的新手，还是已经有一定经验的开发者，相信都能从这个案例中获得启发和帮助，让我们一起深入探究如何借助 Service Worker 提升网页的性能表现吧！

2024-12-18 14:39:32 647

原创 Vue3可以不用Pinia了?

随着Vue 3的发布，开发者们获得了许多新的特性和改进，其中之一就是对组合式API（Composition API）的支持。这个API允许以更灵活和逻辑化的方式组织代码，同时为状态管理和逻辑复用提供了强大的支持。在本文中，我们将探讨如何通过组合式API直接管理应用状态，而无需依赖额外的状态管理库如Pinia。

2024-12-03 14:28:15 742

原创 Flutter实现tts语音播报

随着移动应用的不断发展，用户对应用的交互体验要求越来越高。TTS（Text-to-Speech，文本转语音）技术可以让应用读出文本内容，从而提升用户体验，特别是对于视障用户或需要多任务处理的场景非常有用。说话、停止、获取语言、设置语言、设置语音速率、获取声音、设置声音、设置音量、设置音高、是否语言可用、设置共享实例。如果你的项目是使用 3.19 之前的 Flutter 版本创建的，请转到。将文件中的最低 Android sdk 版本更改为 21（或更高）将 Kotlin Gradle 插件的版本更改为。

2024-11-26 09:42:55 1652 1

原创 Flutter之使用mqtt进行连接和信息传输的使用案例

MQTT是一种基于发布/订阅模式的轻量级消息协议，设计初衷是为了提供低开销、低带宽的网络连接。它特别适合于远程位置的通信，如传感器与中央服务器之间的数据传输。轻量级：非常小的代码占用空间和带宽使用。发布/订阅模型：允许一对多的消息分发，即一个消息可以发送给多个客户端。服务质量(QoS)：提供了三种不同的服务质量级别，以满足不同场景下的需求。安全性：支持TLS/SSL加密，确保数据传输的安全性。

2024-11-22 10:05:33 1025

原创掌握Flutter本地存储：一步步教你使用Sqflite构建高效数据库

是一个非常流行且强大的SQLite插件，它允许开发者在移动设备上轻松地进行数据库操作。本文将通过具体的使用案例，详细介绍如何在Flutter项目中集成和使用 sqflite。随着移动应用的发展，本地数据存储成为了一个不可或缺的功能。在Flutter中，sqflite。来安装依赖，或者直接执行下面的命令。进行数据存储和查询。

2024-11-20 15:09:51 3465

原创前端错误捕获定位

在现代Web应用开发中，用户体验的优化与系统稳定性的保障成为了开发者关注的重点。前端作为用户直接交互的界面层，其性能与稳定性直接影响到用户的使用体验。然而，在实际的开发过程中，由于各种不可预见的因素，如代码逻辑错误、网络问题、浏览器兼容性等，前端应用时常会遇到各种异常情况。这些问题不仅影响了用户体验，也给开发团队带来了不小的挑战。为了有效提升应用的质量与稳定性，前端错误捕获与定位技术应运而生。

2024-11-20 14:27:49 445

原创 vue3上传excel并在线预览

关于实现excel文档在线预览的做法，一种方式是通过讲文档里的数据处理成html，一种是将文档处理成图片进行预览，这里使用的是第一种。

2024-08-22 14:13:02 1816 1

原创 axios 封装避免重复请求（两种）

在当今的前端开发领域，数据交互是不可或缺的一环。Axios 作为一款基于 Promise 的 HTTP 客户端，因其简洁的 API 和丰富的配置选项，深受广大开发者的喜爱。然而，在实际项目中，我们常常会遇到一个问题：重复发送相同的请求，这不仅会浪费网络资源，还可能导致服务器压力增大。为了提高应用的性能和用户体验，我们需要对 Axios 进行封装，以避免重复请求的问题。本文将详细介绍两种封装 Axios 的方案，帮助您有效地避免重复请求，提升项目质量。

2024-08-13 09:20:06 2124

原创 JavaScript 如何中止Promise

在 JavaScript 中，你可能已经知道如何取消请求：对于 XHR 可以使用，对于 fetch 可以使用 signal。但是你如何取消一个普通的 Promise 呢？目前，JavaScript 的 Promise 本身并不提供取消常规 Promise 的 API。因此，我们接下来要讨论的是如何丢弃 / 忽略 Promise 的结果。

2024-07-12 14:12:44 1045

原创浏览器控制台打印日志的方法汇总

该方法接受两个参数，第一个参数非false的情况下，输入第二个参数的错误内容。该方法会创建一个分组，后续打印的内容会折叠在这个分组内，需要配置。tableColumns（可选）一个数组，元素为需要输出的列表。message（必填）在控制台输出的警告内容，可文本或对象。message（必填）在控制台输出的错误内容，可文本或对象。message（必填）在控制台输出的错误内容，可文本或对象。tableData（必填）需要输出的数据，数组或对象。使用，调用后代表计时结束，输出时长。label（可选）输出时的标签。

2024-07-08 19:00:36 1804

原创 uni-app X 跨平台开发框架

由于uts在Android上被编译为kotlin，它的逻辑层和UI层都是纯原生的，没有通信问题，所以它的性能真正达到了原生水平。在Android平台，uni-app x 的工程被编译为kotlin代码，本质上是换了vue写法的原生kotlin应用，在性能上与原生kotlin一致。如pages.json中配置的导航栏和tabbar功能无法满足你的需求，可以不在pages.json中配置，自己用view做导航栏和tabbar。uvue在App端支持的css语法，是web的子集，类似于但优于nvue的css。

2024-07-05 16:21:27 2299

原创 Flutter 依据JSON数据自动生成实体类

Flutter 依据JSON数据自动生成实体类。如果生成过程中出现报错可能是你已经有了对应的文件，可以选择删除，重新生成，如下图。//清除之前生成的文件，如果直接运行下面的不行。然后在左边输入你的json数据，它会自动生成对应的实体类。会自动生成一个.g.dart的文件。把这个文件放到model里。或者是先清理，然后重新执行。//可以直接运行这个。

2024-05-14 15:15:02 760

原创 Flutter之Flex组件布局

【代码】Flutter之Flex组件布局。

2024-04-08 09:14:02 821

原创 Flutter轮播图实战：利用flutter_swiper_null_safety打造炫酷UI

完成上述步骤后，你可以运行你的Flutter项目，查看效果。如果一切正常，你应该能看到一个带有自动播放功能的轮播图，用户可以通过点击图片或使用左右箭头来手动切换图片。的小部件，它包含了一个轮播图组件。轮播图的数据源是一个包含多个URL的列表，每个URL对应一张图片。希望这份详细的指南能帮助你更好地理解和应用。插件来增强你的Flutter应用！在这个例子中，我们创建了一个名为。命令下载和集成该插件。文件格式正确且没有语法错误。

2024-04-08 08:40:10 682 1

原创 Mac(含M1) 使用 brew 安装nvm

【代码】Mac(含M1) 使用 brew 安装nvm。

2024-03-09 16:44:00 1162

原创 Mac安装oh-my-zsh

终端init的时候并不会执行~/.bash_profile、~/.bashrc等脚本了，这是因为其默认启动执行脚本变为了～/.zshrc。

2024-03-09 16:22:34 1042

原创 js跳转网页

2、使用window.location对象的replace()方法：与assign()方法类似，但是replace()方法会替换当前页面的历史记录，而不会创建新的历史记录（不推荐，因为它会丢失当前页面的历史记录）。1、使用window.location对象的assign()方法：可以通过将新的URL作为参数传递给assign()方法来实现页面跳转。3、使用window.location.href属性：可以将新的URL赋值给href属性来实现页面跳转。

2024-03-09 16:03:18 554

原创 Vue3(ts)使用vee-validate表单校验，自定义全局验证规则

在utils目录下新建一个validate.ts文件（若使用 JavaScript 则创建.js文件），用于定义自定义的全局校验规则。// 定义必填字段校验规则if (!value ||!return '该字段不能为空';});// 定义邮箱格式校验规则if (!value ||!return '邮箱地址不能为空';if (!return '请输入有效的邮箱地址';});

2024-03-01 17:07:12 1077

原创 vue2和vue3实现图片懒加载

减轻首页首次加载负担：通过仅加载可视区域内的必要资源，可显著降低页面初始化时的请求数量和数据传输量，从而有效减少服务器压力。提升用户体验：在网络环境不佳的情况下，提前用低分辨率的占位图片替代待加载图片，可以避免页面布局因图片加载过程中的空白或堆叠而显得杂乱无章，提升视觉上的流畅度与舒适度。懒加载的核心在于控制浏览器对图片资源的实际请求时机。通常做法是，先将所有图片元素以统一的占位图填充，并将真实图片地址存储在自定义属性如"data-url"中。

2024-03-01 10:24:28 705

原创 h5判断当前浏览器的环境

我们开发h5的时候经常会遇到各种奇怪的需求，但是很多的时候要判断根据不同浏览实现不同的需求，所以这时我们要针对当前打开的浏览器的环境实现不同的功能，所以今天我们来封装一下判断一下特殊浏览器的方法。

2024-02-27 13:37:55 1353

原创 vue封装Animate.css动画库的使用

在前端开发中，动画效果能够极大地提升用户体验，使页面更加生动有趣。今天，我们来详细探讨一下如何高效地使用 Animate 这个动画库，并对其进行封装，以便在项目中更便捷地调用。

2024-02-27 11:43:47 653

原创防抖和节流的使用

今天我们来介绍一下javascript中的防抖和节流的使用防抖确保了在事件频繁触发的情况下，只会在最后一次触发之后的一段时间内执行一次。节流则确保了一段时间内只执行一次操作，即便在这段时间内多次触发事件。

2024-02-20 14:02:44 791 1

原创 vue写h5触底翻页

我们先写一个触底执行事件的demo，首先要有一个盒子给他添加一个滚动监听事件。今天让我们来写一个h5的触底翻页加载数据，还是挺简单的。这个是vue2版本，vue3同理。然后我们来写滚动监听的函数。

2024-02-19 14:25:32 719 1

原创 JavaScript获取双中括号里的内容

今天给大家分享一下我踩的一个bug，需求是这样的现在有一个富文本框，要在里面输入一个填空题，填空题大家都知道答案肯定是填空的😂，所以说我们定义的规则是取双中括号里的内容为答案，例如：[[这里是答案]]，我们就要把双中括号里的内容取出来传给后端。

2024-01-24 14:41:36 704 1

原创微信小程序weapp-qrcode生成二维码图片，长按保存和转发

在该容器内，有一个image元素，用于显示转换后的二维码图片。同时，为了避免画布影响页面布局，将画布的position设置为absolute，并通过top: -999px将其隐藏在页面可视区域之外。在实际项目中，开发者可以根据具体需求对代码进行进一步优化和扩展，例如对生成的二维码内容进行动态设置，或者对图片的样式和显示方式进行更多定制。这个 API可以把画布临时转成图片地址，我们把它显示在页面，然后把画布隐藏起来，这样一来就实现了我们想要的结果。，从而在页面上显示出转换后的二维码图片。

2024-01-17 15:48:34 2575 3

原创提升开发效率：Nuxt 3中使用TypeScript封装useFetch的最佳实践

在现代 Web 开发中，高效地进行数据请求是构建强大应用的关键一环。今天，我们将深入探讨 Nuxt 3 框架中useFetch在服务端如何请求接口。本文以 TypeScript 为例展开讲解，使用 JavaScript 的小伙伴也可根据实际情况轻松进行调整。希望通过本篇博客，能为大家在 Nuxt 3 开发中处理服务端接口请求提供清晰的思路与实用的方法，当然，内容仅供参考，实际应用可根据项目需求灵活变化。

2024-01-16 16:24:11 4204 11

原创父页面和iframe嵌套页面之间的通讯

【代码】父页面和iframe嵌套页面之间的通讯。

2024-01-12 16:01:29 431 1

原创 uniapp 调用wx-open-subscribe实现微信订阅

然后新一个配置文件js，然后引入jweixin-module，然后在配置文件里添加引入wx-open-subscribe。我们在uniapp写h5时，对微信进行一系列的操作需要依赖 “jweixin-module”，所以首先我们要安装这个库。如果你想看有没有引入成功，可以使用微信开发者工具打开，在控制台查看。

2024-01-11 16:18:15 1428 3

原创 nuxt3实现301重定向页面

nuxt3实现301重定向页,这个是我的项目目录接着在middleware目录下创建一个default.global.ts文件，这里我项目引入了typescript，如果没有引入就创建一个default.global.js，然后使用nuxt的小伙伴都知道nuxt里本身就有一些默认的约定和规则，所以这个文件会默认为全局的中间件。接着就是实现的代码，其实很简单，就在中间件里请求接口，然后判断是否需要301重定向页面，如果需要则跳转。首先我们要知道像这种对某一类的页面做控制的，最好写在中间件里，这样我们可以统一。

2024-01-09 17:59:31 1536 1

空空如也

空空如也