- 博客(31)
- 收藏
- 关注
RSS订阅原创 微信小程序本地数据缓存实战：同步 & 异步 Storage API 完整解析
本文通过实战Demo详解微信小程序本地缓存API，对比同步与异步API的使用场景，完整演示setStorage、getStorage、removeStorage等8个核心接口，并实现删除指定key功能。强调异步API优先原则，避免阻塞主线程，结合开发者工具存储面板直观展示缓存变化，帮助开发者掌握10MB持久化缓存的高效管理方法。
2026-11-10 14:03:05
145
原创 # 微信小程序媒体 API 实战：wx.chooseMedia 实现照相与相册选图选视频
本文基于微信小程序实战案例，详解wx.chooseMedia与wx.previewImage的使用。通过“照相和摄像”功能实现图片/视频选取、回显及全屏预览，重点演示参数配置、动态按钮禁用逻辑与临时路径生命周期管理。涵盖真机调试、权限处理、多选扩展等开发要点，指导开发者高效迁移旧接口，构建稳定媒体交互体验。
2026-11-10 13:43:55
57
原创 微信小程序文件系统实战：FileSystemManager 本地文件读写、复制与删除
本文基于微信小程序原生API，结合Skyline渲染引擎，实现交互式本地文件操作演示。通过FileSystemManager完成文件写入、复制、读取、信息获取与删除等操作，重点讲解沙箱机制、路径规范（使用${wx.env.USER_DATA_PATH}）、API调用要点及模拟器/真机差异等踩坑经验，提供完整代码示例，帮助开发者掌握小程序本地文件处理核心技能。
2026-11-04 21:21:26
310
原创 微信小程序 Skyline Canvas 图形变换实战
本文基于微信小程序 Skyline 渲染引擎，详解 2D Canvas 坐标系变换原理与实践。通过交互式演示，完整实现平移、旋转、缩放、矩阵变换及椭圆绘制，梳理 save()/restore() 状态管理、ctx.scale(dpr) 高清适配、ellipse() 参数细节等核心知识点，提供可复用的初始化流程与开发避坑指南，助力前端可视化高效落地。
2026-11-03 13:58:24
312
原创 微信小程序 Skyline 2D Canvas 绘图实战：基础图形与图片渲染
本文基于微信小程序Skyline渲染引擎，详解Canvas 2D的初始化流程与核心API，涵盖画布缩放、路径绘制、渐变填充、阴影效果、文本旋转及本地图片异步加载等关键技术。通过构建交互式绘图面板，系统梳理了createSelectorQuery节点查询、ctx.scale高清适配、createImage()异步加载等开发要点，解决了常见渲染模糊、资源路径错误等问题，为Skyline环境下Canvas开发提供完整实践方案。
2026-11-03 13:50:18
140
原创 微信小程序 Canvas 2D 自由绘图组件
本项目基于微信小程序Canvas 2D组件实现自由绘图功能，支持触控绘制、清空画布及画笔颜色切换（红/绿）。通过createSelectorQuery获取画布节点，结合设备像素比（dpr）确保绘图清晰。利用touchstart与touchmove事件实现连续线条绘制，设置lineCap和lineJoin提升线条圆润度。代码结构清晰，符合课程要求，是小程序图形绘制的基础实践。
2026-10-30 09:57:49
197
原创 微信小程序设备 API 实战：基于加速计实现变脸交互小游戏
本文基于微信小程序wx.onAccelerometerChange API，实现一款支持点击切换与摇晃变脸的交互小游戏。通过监听三轴加速度变化识别摇晃动作，结合随机脸谱切换与累计计数功能，完整演示传感器事件绑定、数据驱动视图及业务逻辑封装。项目采用原生小程序开发，强调真机调试必要性，并提出防抖、事件释放等优化建议，适用于体感交互类场景开发参考。
2026-10-30 09:56:59
188
原创 微信小程序 map 组件案例开发
本项目基于微信小程序原生开发，实现地图组件map及位置接口wx.getLocation、wx.chooseLocation、wx.openLocation的综合应用。页面展示包含3个标记点的地图，支持“选择位置”与“打开位置”功能，通过自定义图标与标签增强可视化效果。项目不依赖第三方组件，配置权限并适配自定义导航栏，完整演示了地图定位与交互逻辑，适用于学习与实际场景集成。
2026-10-29 20:37:32
122
原创 微信小程序 Video 组件实战：视频弹幕功能开发实践
微信小程序原生video组件内置弹幕功能，支持预设定时弹幕与用户实时发送彩色弹幕，无需第三方库。开发中需注意：在onReady获取VideoContext，避免空实例；随机颜色需补零处理；废弃的控制器按钮应自定义UI替代；输入内容需校验防空。兼容性方面，高版本基础库移除弹幕开关按钮，但核心功能仍可用。建议真机验证、防抖发送、防盗链资源部署，拓展缓存、自定义样式及多端互通等玩法，提升交互体验。
2026-10-29 20:36:29
252
原创 微信小程序实践：scroll‑view 滚动容器组件
本文演示了微信小程序中scroll-view组件的纵向与横向滚动实现，通过scroll-into-view和scroll-left实现页面初始化定位，结合bindscrolltoupper、bindscrolltolower等事件监听滚动状态，并利用CSS伪元素::before实现文字居中，避免在WXML中冗余书写。重点解析了滚动容器布局、横向排列关键样式（white-space: nowrap + inline-block）及常见问题排查，如ID命名规范、空格干扰等，完整展示了可复用的滚动视图开发方案。
2026-10-27 10:05:02
190
原创 微信小程序实践：使用 Slider 滑块组件结合 rgba 实现动态调色板
在微信小程序开发中，`slider` 滑块组件常用于数值调节场景。本文将基于小程序原生框架，利用 `slider`、`data‑*` 自定义属性、ES6 动态对象属性以及 CSS `rgba()` 颜色函数，搭建一个交互式调色演示页面，拖动滑块实时修改页面元素背景与文字颜色，理解表单组件、事件传参与样式动态绑定的核心开发思路。
2026-10-26 10:26:10
320
原创 微信小程序 WXML 文件引用：include 片段复用
在小程序开发中，会遇到多处页面需要复用相同 UI 片段的场景。`include` 是 WXML 提供的文件引入方式，可以将外部 WXML 片段嵌入到当前页面，实现视图代码复用。本文演示如何使用`include`拆分头部、正文、页脚独立片段，结合条件渲染实现片段的动态显示与隐藏。
2026-10-25 10:55:21
186
原创 微信小程序列表渲染：嵌套 wx:for 实现九九乘法表
本文基于微信小程序`wx:for`列表渲染语法，使用双层嵌套循环实现九九乘法口诀表；结合`wx:if`条件渲染完成下三角布局，通过动态内联样式实现奇偶行背景色区分，同时为列表添加`wx:key`优化渲染性能，熟悉小程序 WXML 数据驱动视图的开发模式。
2026-10-24 21:41:55
207
原创 微信小程序picker 选择器与条件渲染实战
本文基于小程序案例，学习`picker`普通选择器、`wx:if`条件渲染、`<block>`虚拟包装标签、input 失焦事件，完成基础案例并扩展增加紫色选项，理解小程序数据绑定与事件驱动开发。
2026-10-23 21:50:24
50
原创 微信小程序图片与声音
本文基于微信小程序原生框架结合云存储实现多媒体演示案例，将图片与音频资源存放于微信云存储，通过 HTTPS 网络链接进行资源加载，避免静态资源占用小程序包体积。利用`wx.createInnerAudioContext`音频上下文 API，结合布尔状态变量实现点击图片交替完成音频播放与暂停；设置音频播放速率，并在每次交互后向控制台输出音频当前播放位置与播放速率。项目实践小程序 image 组件使用、事件绑定、生命周期、云存储资源引用等知识点，可作为前端开发练习与功能测试验证案例。
2026-10-18 09:52:36
174
原创 微信小程序自动随机变化的颜色
本文基于微信小程序原生框架开发古诗随机变色页面，利用`setInterval`周期定时器实现页面每 5 秒自动更换文字颜色，通过双层循环算法生成十六进制随机颜色数组，分别为四句诗文设置不同色彩；同时支持按钮手动触发颜色更新，控制台输出颜色数组用于调试。在原有实现基础上复用颜色数组变量，完成标题与首行诗文颜色联动同步，进一步优化页面视觉表现，可用于前端开发练习以及功能测试场景。
2026-10-17 16:47:59
112
原创 微信小程序计时器
本文基于微信小程序原生框架实现一款倒计时计时器应用，采用 webview 渲染引擎，利用`setTimeout`、`setInterval`、`clearInterval`定时器 API 完成页面延迟渲染、倒计时启动、暂停、重置等交互逻辑。通过状态变量控制计时器运行状态，实现倒计时归 0 后的边界拦截处理；同时借助 CSS 伪元素与绝对定位技术，在不新增 DOM 节点的前提下，为计时面板增加背景水印文字完成视觉增强。项目完整复现业务交互流程，也可作为手工功能测试的练习案例，对正常流程、边界场景开展功能验证。
2026-10-17 16:33:17
205
原创 微信小程序 image 组件
本文详解小程序 image 组件 14 种显示模式的实战应用，通过 wx:for 循环渲染并结合 renderer: "webview" 配置，实现缩放与裁剪模式的完整展示。项目统一容器尺寸、添加序号与说明，确保布局规整、兼容性强，帮助开发者掌握 mode 属性核心原理及配置要点，避免图片变形、裁剪失效等问题。
2026-09-24 10:45:33
180
原创 微信小程序：radio 与 checkbox 组件实现文本样式动态切换
本项目基于微信小程序原生框架，通过radio单选与checkbox多选组件实现诗词文本样式动态修改。支持字体大小切换（30rpx~60rpx）及加粗、斜体、下划线等多重样式叠加，结合setData数据绑定与行内样式动态更新，展现数据驱动视图的核心机制。页面采用卡片布局，首行缩进与两端对齐提升阅读体验，兼顾全局与页面独立样式管理。
2026-09-24 10:44:19
161
原创 微信小程序 Form 表单组件
本项目基于微信小程序Form表单组件，实现三角形边长输入、合法性校验、海伦公式面积计算及一键重置功能。通过双向数据绑定与setData()动态更新，完整掌握表单提交、数据校验、数学运算与页面状态管理，适合初学者学习前端交互逻辑与业务流程开发。
2026-09-22 19:55:18
233
原创 微信小程序swiper 和 switch 组件
本项目基于微信小程序原生开发，不使用云服务与模板，实现swiper轮播与switch开关组件的动态联动。通过wx:for循环渲染“井冈山精神”至“西柏坡精神”四类中国精神内容，结合开关控制指示点、自动播放、衔接滑动及方向等属性，实现交互式轮播效果。代码结构清晰，注重数据驱动与事件响应，强化了组件复用与动态更新能力。
2026-09-22 19:54:12
147
原创 微信小程序模板（template）使用实践
本文详解微信小程序中template模板的使用，通过学生、教师、奥运冠军三类数据渲染案例，演示模板的定义、引入与动态传参。强调数据应统一存放于data中，避免视图层硬编码，推荐使用展开运算符...传递数据，提升代码复用性与可维护性。总结了常见踩坑点：变量名匹配、必须import、...使用规范及缓存清理，帮助开发者高效实现视图复用。
2026-09-20 20:55:21
189
原创 微信小程序模块化开发实战
本实验系统实践了微信小程序的模块化开发，通过全局模块（app.js）、同目录模块（my-index.js）和跨目录模块（common/common.js）三种方式，实现代码复用与分层管理。利用 module.exports 和 require() 完成模块导出与引入，结合 getApp() 获取全局数据，页面动态渲染8条模块信息并分组配色展示。实验验证了模块化在提升代码可维护性、降低耦合度方面的优势，掌握了路径引用规范与常见坑点，为后续工程化开发奠定基础。
2026-09-20 20:16:53
154
原创 微信小程序数据和事件绑定
本文通过实现微信小程序中对象数据绑定的实验，完整演示了单向数据流机制。在逻辑层定义包含major属性的student对象，视图层通过{{student.major}}动态渲染专业信息；点击按钮触发modify事件，调用this.setData()更新数据并自动刷新页面，实现专业名从“软件工程和大数据”切换为“计算机科学与技术”。强调了setData的核心作用与直接修改this.data导致视图不更新的常见误区，深入解析了插值表达式、事件绑定与差分更新原理，巩固了小程序数据驱动视图的开发认知。
2026-09-18 10:10:56
170
原创 微信小程序生命周期实战观察
本次实验通过在微信小程序的app.js和页面文件中添加日志，系统观察了应用与页面生命周期函数的执行顺序。结果表明：onLaunch仅触发一次，用于全局初始化；onLoad在页面加载时执行，onShow在每次显示时触发，适用于数据刷新；Tab切换时页面仅执行onHide与onShow，不触发onUnload，实现状态保留；前后台切换则触发应用级onShow与onHide。实验明确了各生命周期函数的使用场景，为合理组织逻辑、优化性能提供了实践依据。
2026-09-15 16:36:44
123
原创 微信小程序 TabBar 底部导航案例开发实战
本项目完成微信小程序TabBar底部导航综合开发，实现5个标签页的流畅切换与统一样式适配。通过配置app.json实现导航栏图标、颜色及页面路径绑定，使用app.wxss定义全局样式，确保页面排版规范、视觉一致。开发中掌握小程序全局配置、多页面管理及样式隔离机制，具备快速复用模板能力，提升小程序开发效率与调试排查能力。
2026-09-15 16:03:20
153
原创 微信小程序创建页面与导航
本次微信小程序实验完成多页面创建与页面导航开发，通过 app.json 注册多个业务页面，使用 navigator 组件实现页面之间跳转，引入自定义 navigation‑bar 导航栏组件，借助 scroll‑view 实现长文本滚动布局，完成航天主题小程序案例，同时记录开发过程中特殊符号、组件路径、图片资源等常见问题的排查方法。
2026-09-11 12:26:24
128
原创 微信小程序个人备案流程
微信小程序个人备案流程：需准备个人账号、管理员身份证、腾讯云实名一致、精确到门牌号的居住地址。先完善小程序基础信息，设置服务类目，再进入腾讯云备案系统填写主办人及小程序信息。
2026-09-11 11:22:53
298
原创 微信小程序Flex弹性布局
微信小程序Flex弹性布局，实现水平均匀布局、左右混合布局、上下混合布局，完成作业修改，使用flex‑direction:row‑reverse实现第一行布局从右向左排列。
2026-09-08 16:18:24
217
原创 微信小程序盒模型实战
盒模型是 CSS 布局的核心，本文基于微信开发者工具完成小程序实战开发，修改 app.json、index.wxml、app.wxss、index.wxss 四个文件，学习 margin 外边距、padding 内边距、border 边框三大盒模型属性，结合 scroll‑view 实现页面纵向滚动，掌握小程序自定义导航栏的配置方式，完成多区块内容排版。
2026-09-08 14:28:53
118
原创 微信小程序字体与文本样式设置案例
本案例基于微信小程序WebView渲染引擎，分别使用style内联属性与class类属性完成字体、文本样式设置，借助scroll‑view组件实现文本滚动效果，完整展示小程序样式开发的基础流程。
2026-09-04 20:12:23
279
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人