微信小程序 - 近期更新 - 第3页

导读：近期更新了《微信小程序》的相关内容，包括《微信小程序如何用IntersectionObserver实现高性能无限滚动加载列表？》、《如何实现微信小程序自定义modal遮罩层：半透明黑色背景与高斯模糊效果？》、《如何为微信小程序自定义 modal 整理常用动画曲线预设库？弹性回弹一次讲透》等内容。如果微信小程序对你有帮助，请转发和分享。知识越分享越有价值，感谢你的每一次传递。

微信小程序自定义导航栏如何适配iPhone X及以上机型的底部横条？

iPhone X 之后全面屏机型在屏幕底部增加了横条指示器，默认的小程序页面会自动避让，但自定义导航栏往往会破坏这一机制。当开发者把导航栏高度写死或者用固定定位实现自定义头部时，底部内容容易被横条盖住，导致按钮无法点击。解决思路并不复杂：优先使用 CSS 环境变量 env(safe-...

栏目：微信时间：09-18 微信小程序安全区域底部横条

如何实现微信小程序自定义 tabBar 中间播放按钮的 Netflix 缩放与波纹动画？

默认 tabBar 只能换图标和文字，放在中间的播放按钮即使换了图，也做不出按压缩放和从中心向外扩散的波纹反馈。想要接近 Netflix 的播放键质感，必须启用微信小程序的自定义 tabBar。自定义 tabBar 把底部导航交给自定义组件渲染，WXML 与 WXSS 能直接控制每个节点，因此可以用 tr...

栏目：微信时间：09-18 微信小程序自定义tabbar 波纹动画

微信小程序如何自定义picker快捷选项的文本与值？

想在微信小程序的picker里做一个时间范围选择器，但默认的快捷选项只有“今天”“昨天”这些固定文本，值也是写死的。如果你想改成“最近7天”“本季度”“近30个工作日”这样的业务化文案，或者让快捷选项对应的日期范围动态计算，就需要自定义mode=multiSelector或者普通selec...

栏目：微信时间：09-18 微信小程序 picker 快捷选项

微信小程序云数据库事务怎么用？库存扣减与红包领取的并发控制实战案例

库存被超卖、红包被重复领取，这是小程序后端最常见的两类并发问题。云开发数据库提供了原生的事务能力，通过startTransaction把多个读写操作合并为原子操作，可以保证一份数据在同一时刻只被一个请求修改。本文围绕秒杀扣库存和拼手气红包两个典型场景展开，先分析没有事务时出...

栏目：微信时间：09-16 微信小程序云数据库事务

微信小程序云数据库怎么实现联表查询？lookup聚合阶段详解

两张表的数据分散存储，想一次性查出来展示，难道只能在前端循环发起多次请求？其实微信小程序云开发数据库提供了聚合能力，其中lookup阶段就是专门用来解决表关联问题的。本文围绕lookup的实际用法展开，先讲清楚本地集合关联与分集合关联两种写法的区别，再通过订单表关联用户表、...

栏目：微信时间：09-16 微信小程序云数据库 lookup联表查询

微信小程序云函数定时触发器怎么配置？cron表达式写法与定时任务日志查看全教程

定时任务跑不起来，十有八九是cron表达式写错了。微信小程序云开发提供的定时触发器配置其实非常简单，只需要在config.json中写对cron参数并上传，函数就会按规则自动执行。本文手把手教你完成触发器的创建与部署，详细拆解cron表达式六个字段的含义，给出每天定点执行、每五分钟...

栏目：微信时间：09-16 微信小程序云函数定时触发器 Cron表达式

微信小程序自定义modal怎么限制拖拽范围？屏幕边界碰撞检测算法详解

自定义modal组件加上拖拽功能后，如果不在意边界判断，弹窗很容易被拖出屏幕外再也找不回来。这篇文章围绕微信小程序中movable-area与movable-view的边界限制方案展开，先讲系统组件自带的scale和边界属性如何配置，再分析手动bindtouchmove实现拖拽时如何做碰撞检测，包括获取屏...

栏目：微信时间：09-16 微信小程序 modal拖拽碰撞检测

微信小程序图片上传体积过大怎么办？利用canvas实现云存储上传前前端压缩

图片体积过大是微信小程序开发中常见的痛点，一张手机拍摄的照片动辄四五兆字节，直接上传到云存储不仅消耗用户的流量，还会拖慢加载速度，甚至超出接口限制导致上传失败。本文介绍一种在上传前利用canvas对图片进行前端压缩的方案，核心思路是通过wx.chooseMedia拿到本地临时路径...

栏目：微信时间：09-15 微信小程序图片压缩 canvas压缩

微信小程序map组件如何自定义热力图？密度热力图与权重热力图参数配置详解

热力图是数据可视化中非常直观的表达方式，在微信小程序里借助map组件的个性化图层能力，可以将订单分布、用户活跃度、点位密度等数据以热力形式叠加在地图上。本文围绕自定义热力图的两种核心模式展开：一种是只关心点位数量的密度热力图，另一种是每个点位携带数值权重的权重...

栏目：微信时间：09-15 微信小程序热力图 Map组件

微信小程序如何用 Vant Weapp Uploader 做文件上传？学习路径与避坑指南

把 Vant Weapp Uploader 当成全能上传插件是初学者的典型误区，这个组件仅负责文件选择与预览展示，真正的上传请求需要开发者调用小程序 API 完成。本文从组件底层机制讲起，梳理出一条从环境搭建到封装请求的高效学习路径，包括阅读官方示例、模仿 after-read 回调、逐步加入并...

栏目：Vue.js 时间：09-14 Vant Weapp Uploader 文件上传微信小程序

微信小程序云数据库索引怎么优化？单字段索引、复合索引与索引失效场景详解

微信小程序云开发自带的云数据库用起来方便，但数据量一上来查询就会明显变慢，这时候索引优化就成了绕不开的话题。索引到底该怎么建，单字段索引和复合索引各自适合什么场景，字段顺序对查询性能有多大影响，哪些写法会让索引悄悄失效导致全表扫描，本文结合云开发控制台的操作和具...

栏目：微信时间：09-14 微信小程序云数据库索引优化

微信小程序如何自定义tabBar实现中间凸起按钮与动画效果？

微信小程序默认的tabBar样式比较固定，想做出中间凸起的圆形发布按钮，或者给每个tab项加上切换动画，靠原生的tabBar配置是做不到的。其实小程序官方提供了custom-tab-bar组件机制，只要在app.json里开启custom开关，再编写自定义组件，就能完全接管底部导航栏的渲染逻辑。本文详细...

栏目：微信时间：09-14 微信小程序 custom-tab-bar 自定义tabbar

微信小程序slot默认内容如何根据条件决定是否渲染？

slot默认内容在小程序里只在调用方没有传入子节点时才会展示，但如果默认内容本身也要分场景显示和隐藏，单纯靠slot自带的兜底机制就不够用了。这篇文章聊聊slot默认内容的触发机制、用数据绑定加wx:if控制默认内容显隐的具体做法，以及在自定义组件中通过properties和observe...

栏目：微信时间：09-14 微信小程序 slot默认内容条件渲染

微信小程序picker-view组件怎么用？自定义滚轮选择器与日期格式化实战详解

picker-view是微信小程序提供的嵌入式滚轮选择器组件，与普通的picker弹窗不同，它可以直接嵌入页面布局中，实现自定义样式的日期选择、省市区联动等交互效果。本文详细讲解picker-view和picker-view-column的基本用法，包括columns属性的配置方式、value绑定与change事件的处理...

栏目：微信时间：09-14 微信小程序 picker-view 日期格式化

微信小程序自定义导航栏高度适配：获取胶囊按钮与状态栏高度实现完美适配

微信小程序开启自定义导航栏后，默认的导航栏样式就没了，页面顶部需要自己计算高度，否则内容会被状态栏和胶囊按钮遮挡，或者留出一大块空白。实现完美适配的核心是拿到两组数据：一组是通过wx.getWindowInfo或wx.getSystemInfoSync获取的状态栏高度，另一组是通过wx.getMenuButton...

栏目：微信时间：09-14 微信小程序自定义导航栏胶囊按钮

微信小程序map组件点聚合后如何点击聚合点拿到内部所有marker数据？

微信小程序的map组件开启点聚合后，点击单个marker可以正常响应bindmarkertap事件，但点击聚合在一起的点时却拿不到内部数据，这是不少开发者踩过的坑。本文围绕这一痛点展开，详细讲解include-points与marker聚合的配合方式，重点分析joinCluster开启后marker的joinCluster属性与...

栏目：微信时间：09-13 微信小程序 map点聚合聚合点点击事件

微信小程序scroll-view横向滚动怎么实现？商品列表横向滑动与惯性滚动优化全解析

scroll-view是微信小程序里实现横向滑动的核心组件，但不少人在配置enhanced属性和开启enable-flex后依然遇到内容不滚动、惯性体验差的问题。这篇文章从组件基础配置讲起，详细说明white-space、display:inline-block与flex布局两种横向排列方案的区别，演示如何通过enhanced...

栏目：微信时间：09-13 微信小程序 scroll-view 横向滚动

微信小程序自定义modal动画延迟执行怎么办？如何等待数据加载完成后再执行动画

自定义modal弹出时动画先于数据渲染，页面出现空白或闪烁，这是小程序开发里常见的时序问题。根本原因在于setData是异步的，而动画执行往往在数据还没真正渲染到视图层之前就触发了。本文从setData回调机制讲起，分析动画与数据渲染的执行顺序错乱原因，给出在回调中触发动画、用w...

栏目：微信时间：09-13 微信小程序 modal动画数据加载

微信小程序组件生命周期与页面通信的最佳实践有哪些？

组件的生命周期函数执行顺序搞不清楚，页面和组件之间的数据传值总是失效，这是不少微信小程序开发者踩过的坑。本文围绕组件从创建到销毁的完整生命周期流程，详细讲解attached、ready、detached等关键钩子的触发时机与适用场景，并系统梳理properties传值、triggerEvent自定义...

栏目：微信时间：09-13 微信小程序组件生命周期页面通信

微信小程序组件间如何通信？使用relations实现父子组件关联详解

微信小程序自定义组件之间如何建立联系是开发中常遇到的问题。当一个页面里嵌套了多个自定义组件，父组件需要感知子组件的存在，子组件也需要向父组件上报数据，单纯依靠properties和事件机制往往不够优雅。本文围绕小程序提供的relations定义段，详细讲解如何在组件间声明父子...

栏目：微信时间：09-13 微信小程序组件通信 relations

微信小程序云数据库连接超时怎么办？重试策略最佳实践详解

小程序云端请求偶尔卡住、数据库操作迟迟不返回，这类超时问题几乎是每个使用微信小程序云开发都会遇到的坑。直接放弃操作会导致用户数据丢失，盲目无限重试又可能把服务拖垮。本文围绕云数据库连接超时的典型场景，系统梳理一套可落地的重试方案：从超时原因的定位分析，到指数退...

栏目：微信时间：09-13 微信小程序云数据库重试策略

微信小程序云数据库连接池监控：如何用Prometheus指标监控活跃数与空闲数？

连接池是数据库访问的核心组件，活跃连接数与空闲连接数直接反映了系统的负载状况和资源利用情况。本文围绕微信小程序云开发场景下的数据库连接池监控展开，讲解连接池的工作原理、需要关注的关键指标含义，以及如何在Node.js服务端接入Prometheus完成指标采集与暴露。文中给...

栏目：微信时间：09-13 微信小程序连接池监控 Prometheus指标

微信小程序自定义tabbar如何实现数字翻转动画与渐隐渐现徽标效果？

自定义tabbar徽标是微信小程序开发中常见的个性化需求，原生tabbar的setTabBarBadge接口只能显示静态数字，无法满足消息提醒等场景下吸引眼球的动效要求。本文围绕自定义tabbar的实现流程展开，先讲解如何用custom-tab-bar组件替换原生底部导航，再重点拆解数字翻转动画的实现思...

栏目：微信时间：09-12 微信小程序 tabbar徽标数字翻转动画

微信小程序自定义modal弹窗被原生组件遮挡？z-index层级限制的成因与解决方案

为什么自定义modal弹窗设置再高的z-index还是会被video、map、input这些原生组件穿透遮挡？微信小程序为了性能考虑，将部分组件交给原生渲染层绘制，它们天然脱离WebView的文档流，CSS的z-index对其完全无效。本文从双线程架构与渲染机制入手，解释原生组件位于视图层之上的底层原...

栏目：微信时间：09-12 微信小程序原生组件层级 z-index失效