- 博客(139)
- 收藏
- 关注
RSS订阅原创 uniapp开发微信小程序---分包
小程序分包开发指南摘要 小程序分包开发可以有效优化性能和管理复杂度。主要优势包括：减小主包体积加快启动速度、按需加载节省流量、模块化提高可维护性，并支持更大规模应用。分包限制为总大小不超过20MB，单个包不超过2MB。 开发流程需注意：tabBar页面必须在主包；pages.json需配置subpackages字段定义分包路径；分包间不能嵌套或相互引用资源。具体实现步骤包括创建分包文件夹、配置manifest.json启用分包、在pages.json中定义分包结构，并通过指定路径跳转分包页面和使用资源。 扩
2025-06-10 08:50:44
1039
原创 uniapp开发微信小程序封装轻量提示窗（支持超长文本）
摘要：本文介绍了一个自定义小程序的Toast组件实现方案，突破原生uni.showToast仅支持两行文本的限制。该组件支持多行文本显示、自定义标题和灵活配置显示时长，包含详细的参数说明和代码实现。核心功能包括：参数校验、配置合并、自动隐藏控制，并通过CSS实现了居中弹窗样式。使用示例展示了基础提示、带标题提示和多行文本提示三种场景的调用方式。组件采用Vue3的script setup语法开发，具有良好的可维护性和扩展性。
2025-05-26 11:26:10
627
原创 微信小程序-计算两个坐标点之间的距离（附两种解决方案）
本文介绍了两种基于经纬度的距离计算方法：哈弗辛公式和欧几里得距离公式。首先说明了在微信小程序中获取用户位置信息的配置和API调用方法，需要在app.json中配置位置权限并调用wx.getLocation获取经纬度。然后详细讲解两种计算方法：哈弗辛公式通过弧度换算计算球面距离，适用于真实地理场景；欧几里得距离公式计算两点直线距离，适用于简单场景。两种方法都支持任意两个经纬度点的距离计算，并给出了具体实现代码和调用示例。这些方法可应用于外卖、地图、景点等需要距离计算的场景。
2025-05-26 11:25:34
647
原创 微信小程序使用Vant Weapp（最新版）
本文介绍了在小程序中引入Vant Weapp组件库的完整流程：1)通过npm init初始化项目；2)安装@vant/weapp和miniprogram-sm-crypto依赖；3)修改app.json和project.config.json配置文件；4)构建npm并启用npm模块；5)通过全局或局部方式注册组件。文中包含详细操作截图和配置代码示例，特别提醒了配置文件的层级关系和注意事项，最后展示了组件的使用方法。所有步骤均经过实测验证可行。
2025-05-26 11:24:56
555
原创 微信小程序-自定义导航栏（多机型适配）
本文介绍了微信小程序中实现自定义导航栏的方法。通过设置navigationStyle:"custom"启用自定义导航功能，利用wx.getSystemInfoSync()和wx.getMenuButtonBoundingClientRect()获取状态栏和胶囊按钮信息，计算出导航栏高度。子组件采用slot插槽设计，支持左右两侧自定义内容，可通过props控制背景色、文字颜色等样式。文章详细说明了组件实现的关键点，包括状态栏高度计算、多slot支持、生命周期处理等注意事项，并提供了完整的w
2025-05-26 11:23:29
897
原创 微信小程序通过webscoket实现即时聊天
本文介绍了如何在微信小程序中使用WebSocket实现实时通信功能。首先，通过wx.connectSocket与服务器建立长连接，并在连接成功或失败时输出相应信息。其次，通过wx.sendSocketMessage发送消息，并将自己发送的消息存储在message数组中。接着，通过wx.onSocketMessage监听服务器返回的消息，并将其转换为字符串后存储在message数组中。最后，通过WXML和WXSS文件实现消息的展示界面，包括消息列表和输入框。整体代码结构清晰，功能完整，能够实现基本的实时通信需
2025-05-23 09:35:49
260
原创 微信小程序图片懒加载
本文介绍了两种实现图片懒加载的方法：原始方法和使用mina-lazy-image插件。原始方法通过wx.createIntersectionObserver监听图片是否进入视口，动态加载图片，优化页面性能。代码包括WXML、JS和WXSS部分，展示了如何实现懒加载功能。插件方法则通过安装mina-lazy-image插件，简化了懒加载的实现流程，只需在WXML中引入插件并配置相关属性即可。此外，文章还提到图片懒加载仅适用于page和scroll-view下的image组件，并提供了相关文档链接供进一步参考。
2025-05-23 09:35:06
291
原创 微信小程序打开另一个小程序
本文介绍了两种在微信小程序中实现跳转的方法。方法一通过wx.navigateToMiniProgram函数，配置目标小程序的appId和path属性，实现从当前小程序跳转到目标小程序的指定页面。如果不提供path属性，则默认跳转到目标小程序的首页。方法二适用于目标小程序的appId和页面路径未知的情况，通过shortLink属性实现跳转，用户只需复制目标小程序的链接即可。两种方法均支持设置环境版本（开发版、体验版、正式版），并在跳转成功后输出成功信息。
2025-05-23 09:33:08
315
原创 微信小程序实现消息推送(云函数实现)
本文介绍了如何在小程序中配置云开发环境、设置订阅消息模板、进行消息推送授权、创建云函数以及调用云函数的完整流程。首先，通过wx.cloud.init配置环境ID，确保小程序能够使用云能力。接着，在小程序后台管理中选择订阅消息模板，并确保小程序类目正确。用户需在点击或支付后，才能调起订阅消息界面，获取用户授权。然后，创建云函数并配置config.json和index.js文件，实现消息推送功能。最后，通过wx.cloud.callFunction调用云函数，完成消息发送。整个过程涉及环境配置、模板选择、用户授
2025-05-23 09:30:31
502
原创 微信小程序实现地图寻路
本文介绍了如何在小程序中使用地图API实现地图展示、位置选择、标记点显示及搜索功能。首先，通过<map>组件展示地图，并配置了3D楼块、指南针、卫星图、实时路况等功能。接着，通过wx.chooseLocation实现位置选择，并将选择的经纬度保存为标记点。此外，文章还介绍了如何使用腾讯位置服务的API实现关键字搜索，并将搜索结果以标记点的形式显示在地图上。最后，通过wx.openLocation实现导航功能，点击标记点后可以跳转到地图应用进行导航。整个过程涵盖了地图展示、位置选择、搜索及导航的核
2025-05-23 09:27:12
311
原创 vue3 + ts开发微信小程序获取用户头像昵称全流程
该文章介绍了一个用户登录流程的实现，主要分为基本流程和代码详解两部分。基本流程包括通过window.location.href跳转至登录页面，判断用户登录状态，获取用户头像和昵称信息，并进行合规性检查，最后发送登录请求并跳转至主页。代码详解部分展示了核心代码，包括表单提交、头像和昵称的获取、登录请求的发送及成功后的处理。通过<form>表单绑定登录事件，使用<button>和<input>分别获取头像和昵称，并在登录事件中进行信息校验和请求处理。整体流程清晰，代码结构合理
2025-05-23 09:25:59
158
原创 微信小程序实现文件( 原生 && vant组件 )云存储
本文介绍了如何在小程序中实现文件云存储功能。首先，通过原生小程序调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 实现文件的上传和下载，详细展示了从选择文件到上传至云端的完整流程。接着，介绍了如何使用 Vant 组件库中的 Uploader 插件简化文件上传操作，通过 Promise.all 方法批量处理多个文件上传请求，并在上传完成后进行提示和展示。文章为开发者提供了两种实现云存储的方式，帮助开发者根据需求选择合适的技术方案。
2025-05-23 09:25:17
425
原创 微信小程序scroll-view竖向滑动实现左右联动
本文介绍了实现左右独立布局并实现滑动高亮功能的基本思路及代码实现。通过scroll-view标签和scroll-y属性实现滚动布局，利用kindFlag和foodFlag控制左侧高亮和右侧模块滑动。左侧点击事件tabKind通过修改kindFlag和foodFlag实现右侧跳转，右侧滚动事件scrollList通过wx.createSelectorQuery()获取元素位置信息，判断滑动临界值并动态更新kindFlag，从而实现滑动时左侧高亮同步。代码中特别强调了kindFlag需转换为数字，以避免滑动失效
2025-05-23 09:22:36
449
原创 微信小程序云开发---初始化云开发与数据库增删改查
本文介绍了如何在小程序中初始化云开发并实现数据的增删改查操作。首先，通过访问指定链接并点击小程序主页面的云开发选项，用户可以免费生成数据库与环境ID。接着，在app.js中设置env参数为生成的环境ID以初始化云开发。在实现增删改查功能时，需先指定操作的集合。添加数据时，数据需包裹在data中；删除操作支持清空所有数据或根据条件删除；修改操作可通过doc或where条件进行；查询操作则支持获取所有数据或根据条件查询。所有操作完成后，需更新视图以反映数据变化。
2025-05-23 09:21:44
460
原创 微信小程序路由跳转的方式及传参
在小程序开发中，路由跳转是常见的操作，主要通过wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.navigateBack()和wx.reLaunch()等方法实现。wx.navigateTo()保留当前页面并跳转，wx.redirectTo()关闭当前页面并跳转，wx.switchTab()跳转到tabBar页面，wx.navigateBack()返回上一页面，wx.reLaunch()关闭所有页面并打开新页面。跳转时可以通过URL传递参数，目标页面通过on
2025-05-23 09:19:06
684
原创 微信小程序发起微信支付的流程(页面获取实现与云函数实现)
本文详细介绍了微信小程序接入微信支付的基本流程和代码实现。首先，开发者需要申请微信小程序账号、进行认证，并关联商户平台账号。接着，通过wx.login()获取用户code，并进一步获取openid，存储至本地。在支付流程中，开发者需发送预支付订单请求，调用wx.requestPayment()完成支付。此外，文章还介绍了使用云函数实现微信支付的流程，包括调用云函数、统一下单接口、处理支付结果等步骤。通过详细的代码注释和逻辑说明，帮助开发者快速理解并实现微信支付功能。
2025-05-23 09:18:26
1182
原创 微信小程序应用生命周期、页面生命周期、组件生命周期
微信小程序框架与Vue、React类似，具有生命周期函数，这些函数在特定时期自动执行。小程序的生命周期分为应用、页面和组件三部分。应用生命周期通过App(Object)注册，包括onLaunch、onShow、onHide等函数，用于处理小程序的启动、显示、隐藏等事件。页面生命周期通过Page(Object)注册，包括onLoad、onShow、onReady等函数，用于处理页面的加载、显示、渲染等事件。组件生命周期通过Component(Object)注册，包括created、attached、ready
2025-05-23 09:16:53
1097
原创 微信小程序传参的六种方式
本文总结了小程序开发中六种常见的页面间传参方式：1. 使用globalData全局数据；2. 使用storage缓存；3. 通过url路由传参；4. 组件传值（父传子、子传父）；5. 使用通信通道；6. 利用页面栈直接操作页面数据。每种方式都有其适用场景和优缺点，开发者可根据具体需求选择合适的方法。例如，globalData和storage适合全局数据共享，但数据更新不会自动同步；路由传参简单但长度有限；组件传值适合父子组件通信；通信通道和页面栈则提供了更灵活的传参方式。
2025-05-23 09:16:05
970
原创 微信小程序使用sass
本文介绍了如何在VSCode和微信小程序开发工具中安装并配置Easy Sass插件，以实现Sass文件的自动编译。首先，在VSCode中安装Easy Sass插件，然后在微信小程序开发工具中选择并导入该插件。接着，通过修改扩展文件中的JSON配置，将extension属性改为.wxss，并保存重启项目。最后，创建并保存.scss文件，测试是否成功生成.min.css文件，以验证配置是否生效。
2025-05-23 09:15:24
260
原创 微信小程序封装网络接口请求
在小程序开发中，原生网络请求功能有限，常需进行封装以满足复杂需求。本文介绍了如何封装网络请求，主要步骤包括：创建request文件夹和http.js文件，定义基准路径和request方法，实现加载动画和提示功能，并通过Promise处理请求成功与失败的情况。封装后的请求方法可在页面中通过require()引用，并调用request方法进行网络请求。此封装简化了网络请求操作，提升了开发效率。
2025-05-22 09:22:37
283
原创 vue中keep-alive的详解及案例
Vue.js 中的 keep-alive 是一个内置组件，用于缓存不活动的组件实例，避免重复渲染 DOM，从而提升性能。它通过 include、exclude 和 max 属性控制缓存条件，并提供了 activated 和 deactivated 生命周期钩子，用于组件激活和停用时的操作。keep-alive 可以全局缓存所有页面，也可以根据组件名称或路由元信息灵活控制缓存范围。使用 keep-alive 时，需注意在 activated 钩子中获取最新数据，以确保每次进入页面时数据更新。通过结合路由配置，
2025-05-22 09:21:07
481
原创 vue隔代传值provide和inject
本文介绍了Vue.js中Provide与Inject函数的使用，用于解决组件间隔代传值的问题。Provide函数允许父组件提供数据或方法，后代组件通过Inject函数注入并使用这些数据或方法，适用于不便使用Vuex或Pinia的场景。文章通过代码示例详细展示了如何在全局、父组件、子组件、孙组件及后代组件中使用Provide与Inject，并强调了响应式数据的处理方式。此外，还补充了如何通过readonly函数禁用后代修改祖组件提供的数据，并总结了传值机制、父子响应性、ref的使用及生命周期的相关注意事项。
2025-05-22 09:19:44
975
原创 总结7个实用的Vue自定义指令
本文介绍了Vue中全局自定义指令的批量定义、注册与调用方法，并通过一个示例展示了如何通过输入内容动态改变DOM背景色。首先，通过Vue.directive注册全局指令，并在入口文件中使用Vue.use进行调用。接着，定义了一个highlight.js文件，根据输入值改变背景色，并在directives/index.js中批量注册指令。最后，在main.js中引入并调用指令，实现了在模板中使用自定义指令的功能。此外，文章还详细介绍了自定义指令的钩子函数及其参数，并列举了7个实用的Vue自定义指令，如复制粘贴、
2025-05-22 09:18:30
794
原创 vue3透传Attributes
本文介绍了Vue.js中的透传机制，主要涉及class、style、id等属性的透传，以及事件监听器的透传。透传指的是父组件传递给子组件的属性或事件，子组件未显式声明为props或emits时，这些属性或事件会自动透传到子组件的根元素上。文章通过代码示例展示了父组件如何透传class属性到子组件，并说明了透传的合并规则：如果子组件根元素已有相同属性，父组件的属性会与其合并；若属性权重相同，父级属性会覆盖后代级属性。此外，文章还演示了事件透传的机制，父组件定义的事件会透传到子组件，若子组件已有相同事件，则会合
2025-05-22 09:17:23
823
原创 vue中class及style绑定便捷用法
在使用Vue进行动态绑定class和style时，复杂的逻辑判断可能导致HTML代码冗长且难以维护。通过引入计算属性，可以有效优化这一问题。文章首先展示了一个场景示例，其中多个逻辑判断直接嵌入到HTML中，导致代码繁琐。随后，提出了两种优化方案：一是将不同逻辑的判断移至计算属性中，简化HTML代码；二是当多个动态类名共享相同逻辑时，通过计算属性统一管理。此外，文章还提到style绑定的优化方式与class类似，同样可以通过计算属性实现复杂逻辑的简化。通过这些方法，开发者可以更清晰地组织代码，提升可读性和维护
2025-05-22 09:16:18
208
原创 解决el-date-picker组件8小时时间差问题
在使用el-date-picker组件时，由于组件默认使用国际标准时间（UTC），与东八区（北京时间）存在8小时时差。为解决这一问题，可以通过设置format和value-format属性来调整时间格式。format用于控制显示的时间格式，而value-format用于控制绑定的时间格式。需要注意的是，value-format和format的时间格式大小写应保持一致，且T表示分隔符，Z表示UTC时间。例如，若format="YYYY-MM-DD HH:mm:ss"，则value-form
2025-05-22 09:15:23
358
原创 解决el-image被表格或父元素层级重叠覆盖问题
在开发过程中，使用el-table-column和el-image组件时，发现图片预览功能受到父元素变化的影响。通过查阅Element Plus官方文档，发现el-image组件提供了preview-teleported属性，可以将图片预览层插入到body中，从而避免受父元素变化的影响。解决方案是在el-image组件中添加preview-teleported属性，确保图片预览功能正常使用。修改后的代码示例如下： 通过这一调整，图片预览功能得以稳定运行。
2025-05-22 09:13:58
236
原创 vue3-setup语法糖 父组件调用子组件的方法/属性
在Vue3中，使用<script setup>语法糖时，子组件默认不会暴露内部状态或方法给父组件。为了实现子组件向父组件暴露方法或属性，可以使用defineExpose函数。子组件通过defineExpose暴露方法或属性后，父组件可以通过ref引用子组件并调用其暴露的方法或访问其属性。本文通过一个弹窗组件的示例，展示了子组件如何暴露popupOpen、popupClose方法和casualnessText属性，以及父组件如何调用这些方法和属性。最终效果通过图片展示，验证了子组件方法的成功调用。
2025-05-22 09:10:57
268
原创 CSS/JS/VUE分别实现逐字弹出（打字机效果）
本文介绍了如何使用CSS、JS和Vue实现打字机效果。CSS部分通过@keyframes动画和伪元素实现光标闪烁和文字逐字显示效果，适用于行内块和行内元素。JS部分使用typed.js库，支持多行显示、换行和回退功能，适用于块级元素。Vue部分则通过typed.js库在组件中实现打字机效果，支持循环和速度控制。文章详细展示了每种方法的代码实现和效果图例，并提供了相关配置和注意事项，帮助开发者快速实现打字机效果。
2025-05-22 09:09:59
360
原创 原生/VUE 使用自定义字体
本文介绍了在原生HTML和Vue项目中如何使用自定义字体的方法。在原生HTML中，可以通过直接声明或外链引入字体文件，使用@font-face声明字体，并在CSS中通过font-family调用。Vue项目中，字体文件通常放置在assets文件夹中，通过创建CSS文件声明字体，并在页面中通过import引入。无论是原生还是Vue，使用字体时需确保font-family与@font-face中声明的名称一致。
2025-05-22 09:09:12
282
原创 VUE绑定动态事件及绑定动态属性
本文介绍了如何在Vue.js中绑定动态事件和动态属性。动态事件的绑定通过@[事件类型]="事件名"语法实现，默认使用input事件获取值，可以通过修改eventFlag来切换事件类型，如改为blur事件。动态属性的绑定则通过:[属性名]="属性值"语法实现，默认使用placeholder属性，可以通过切换maxlengthFlag来修改属性名，如maxlength。这些技术允许开发者通过动态切换事件类型和属性名，实现更灵活的交互逻辑和UI控制。代码示例展示了如何在实际
2025-05-22 09:08:33
290
原创 Pinia属性及使用详解与实现持久化存储
Pinia 是一个轻量级的状态管理库，专为 Vue.js 设计，兼容 Vue 2 和 Vue 3。它删除了 Vuex 中的 mutations，简化了状态管理流程，并提供了更好的 TypeScript 支持。Pinia 支持模块热更新、插件扩展和服务端渲染，但不能与 Vuex 混用。基本使用包括安装、创建容器、定义状态、计算属性和方法。状态管理通过 state、getters 和 actions 实现，state 用于存储全局状态，getters 用于封装计算属性，actions 用于处理业务逻辑。Pini
2025-05-22 09:07:52
635
原创 VUE轮询
在Vue.js开发中，使用setInterval进行定时任务时，若不及时清除定时器，可能导致定时器叠加，进而引发页面卡死。为避免这一问题，可以结合setTimeout的自动清除机制，确保定时任务正常执行。此外，在组件卸载时，通过onUnmounted生命周期钩子清除定时器，防止内存泄漏。示例代码展示了如何通过setInterval和setTimeout结合实现轮询更新数据，并在组件卸载时清除定时器，确保页面性能稳定。
2025-05-22 09:07:01
304
原创 VUE3实现九宫格抽奖
本文介绍了一个基于Vue的九宫格抽奖组件的实现。代码通过<template>标签定义了九宫格的布局，每个格子对应不同的主题词（如“富强”、“民主”等），并通过<script>标签实现了抽奖逻辑。抽奖开始时，九宫格会随机转动，用户点击按钮后，转动逐渐停止，最终显示抽奖结果。代码中封装了随机数生成和定时器功能，并提供了三种不同的结果处理方式：随机结果、当前值结果和跳转至指定页面。样式部分通过<style>标签定义了九宫格的外观和交互效果。整体代码结构清晰，功能完整，适合用于简
2025-05-22 09:05:54
146
原创 VUE小游戏——打地鼠
本文介绍了一个基于Vue.js的简单打地鼠游戏实现。游戏通过window.location.href进行页面跳转，提供了素材图片和代码注释。游戏的核心功能包括：开始游戏、随机地鼠出现、点击地鼠积分计算、通关提示及重新开始或退出游戏。代码中使用了reactive和computed等Vue 3特性，通过定时器控制地鼠随机出现，点击地鼠后积分增加，达到900分时游戏结束并弹出提示框。文章还提供了素材图片的获取方式，并欢迎读者交流改进。
2025-05-21 14:12:14
442
原创 VUE导入导出模块
Webpack 支持 ESModule 和 CommonJS 两种模块规范。ESModule 使用 import 和 export 进行模块的导入和导出，支持 export 和 export default 两种导出方式，分别对应 import {} 和 import 的导入方式。CommonJS 则使用 require 和 exports 或 module.exports 进行模块的导入和导出，支持通过 exports. 或 module.exports = {} 导出模块。两种规范在 Webpack 中
2025-05-21 14:11:06
172
原创 VUE、JS实现复制文本
本文介绍了两种在Vue.js中实现文本复制功能的方法。第一种方法是使用原生的clipboard API，通过navigator.clipboard.writeText方法将文本写入剪贴板，适用于安全上下文（如HTTPS）。如果浏览器不支持clipboard API，则通过创建textarea元素并执行document.execCommand('copy')来实现复制。第二种方法是使用vue-clipboard3插件，通过toClipboard方法实现复制，代码更加简洁。两种方法均适用于复制文本、链接、段落、
2025-05-21 14:08:39
203
原创 vue2与vue3中nextTick()用法
nextTick()是Vue.js中的一个重要方法，用于在DOM更新后执行回调函数。Vue采用异步渲染机制，数据更新后不会立即更新DOM，而是等待本轮数据更新完成后再异步更新视图。nextTick()的作用是确保在DOM更新后执行某些操作，从而获取最新的DOM状态。在Vue2和Vue3中，nextTick()的使用方式略有不同，但核心功能一致。通过示例代码可以看出，直接操作DOM时可能无法获取最新数据，而使用nextTick()可以确保在DOM更新后执行逻辑，从而获取正确的DOM内容。这种方法在需要依赖DO
2025-05-21 14:07:49
731
原创 npm install报错——npm ERR! code ERESOLVE及解决方法
在Vue项目中执行npm install时，出现依赖冲突错误，主要原因是@vueup/vue-quill@1.1.0要求vue@^3.2.41，而项目中已安装的vue@3.2.26不满足此条件。错误提示建议通过--force或--legacy-peer-deps参数解决。最终，使用npm i --legacy-peer-deps命令成功绕过依赖冲突，正常安装依赖。
2025-05-21 14:07:01
1326
1
原创 vue3项目使用Ant-Design-Vue组件库全局汉化
本文介绍了如何对 Ant-Design-Vue 组件库进行全局汉化。首先，确保已安装 Ant-Design-Vue 组件库。接着，安装 dayjs 库以替代 momentjs，并在 main.js 中配置 dayjs 使用中文。然后，在 App.vue 中通过 a-config-provider 组件设置全局语言为中文。完成这些步骤后，Ant-Design-Vue 组件库中的时间选择、分页、弹出框等组件将默认显示为中文。
2025-05-21 14:05:46
453
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人