- 博客(28)
- 收藏
- 关注
RSS订阅原创 微信小程序开发：文件操作与扩展
本文基于微信小程序实现文件操作功能，涵盖写入、复制、读取、获取文件信息及新增的删除文件功能。通过wx.getFileSystemManager()与wx.env.USER_DATA_PATH结合，完成本地文件管理。界面采用flex布局优化按钮排版，关键接口正确使用filePath与fail回调，避免常见错误。扩展作业中，通过unlink接口实现安全删除，并以红色警告按钮提示破坏性操作，提升用户体验。
2026-11-10 10:27:25
118
原创 微信小程序：Canvas 2D 图形变换与扩展
本文介绍了微信小程序中Canvas组件的图形绘制与变换实现，涵盖平移、旋转、缩放、矩阵变换及椭圆叠加等核心功能。通过wx.createSelectorQuery()获取画布实例，结合设备像素比（DPR）处理高清屏模糊问题，并利用ctx.save()与ctx.restore()避免变换状态污染。重点实现矩形与椭圆叠加效果，展示Canvas在复杂图形绘制中的强大能力，为小程序开发提供实用参考。
2026-11-10 10:19:47
193
原创 微信小程序实战：Map 组件与位置 API 详解
本文通过实战案例实现微信小程序地图功能，涵盖地图展示、位置获取、选择与打开位置等核心操作。重点配置 app.json 权限并正确使用 wx.getLocation（坐标系为 gcj02），在地图上添加3个自定义标记点（Markers）及气泡提示，完成扩展任务。结合 <map> 组件与 API，实现完整定位交互流程，并提醒常见坑点：坐标系错误与真机调试权限问题。
2026-11-05 19:24:16
201
原创 微信小程序实战：Canvas 2D 自由画板与画笔颜色切换功能实现
本文以实现微信小程序自由绘图板为例，详解如何使用 Canvas 2D 接口绘制流畅线条，并通过 dpr 适配高清屏解决模糊问题。结合 touchstart 与 touchmove 实现触控绘图，支持清空画布及循环切换五种画笔颜色。重点强调了 SelectorQuery 获取节点、路径管理、像素比处理等关键细节，附避坑指南，助力开发者高效掌握 Canvas 2D 核心用法。
2026-11-03 13:48:03
108
原创 微信小程序：变脸游戏与加速度计 API 应用
本文通过“变脸游戏”案例，详解微信小程序中 wx.onAccelerometerChange 的使用，实现点击与摇一摇双模式变脸。结合防抖机制优化摇晃响应，避免频繁触发，并动态显示累计变脸次数。重点掌握加速度监听、数据绑定、资源释放等核心技能，提升用户体验与开发规范性。
2026-11-03 13:25:51
154
原创 微信小程序：Video 组件
本文以实战案例详解微信小程序中video组件的使用，实现自定义弹幕功能。通过配置renderer和packOptions解决包体积超限与视频不显示问题，利用sendDanmu API实现随机颜色弹幕发送，并揭示danmu-btn在高版本基础库中失效的兼容性差异，总结出关键避坑指南，助力开发者高效完成音视频功能开发。
2026-10-30 10:38:56
33
原创 微信小程序： scroll-view
本文通过实战案例详解微信小程序中scroll-view组件的使用，涵盖纵向与横向滚动配置。重点讲解scroll-y、scroll-x、scroll-into-view等核心属性，并实现横向滚动扩展功能，新增“阳光灿烂”页面。结合WXML结构、WXSS样式及JS事件监听，完整演示滚动视图的布局与交互逻辑，确保兼容性与可扩展性。
2026-10-29 21:20:04
55
原创 微信小程序：slider 组件
本文通过“动态颜色调色板”实战项目，深入讲解微信小程序中slider组件的进阶用法。重点掌握data-*自定义属性传参、ES6动态属性名[color]实现高效数据更新，以及利用rgba()函数实现背景与文字反色联动，确保文字在任意背景下清晰可读。结合真实交互场景，实现红绿蓝透明度滑动实时变色，提升UI体验与开发效率。
2026-10-28 22:14:07
81
原创 微信小程序：文件引用
本文通过微信小程序“文件引用”案例，演示如何将页面拆分为独立组件（header、main、footer、extend），使用<include>标签实现模块化引用，并结合wx:if与事件绑定实现扩展内容的显示/隐藏。配合自定义样式还原界面效果，涵盖条件渲染、组件复用与交互设计，完整呈现了小程序开发中的基础实践。
2026-10-27 10:29:44
140
原创 微信小程序：九九乘法表
本文详解了在微信小程序中实现九九乘法表的完整流程：通过配置横屏展示，利用双重循环生成二维数据；在WXML中嵌套wx:for渲染表格；关键在于将背景色设置于.row而非.item，配合固定宽度与边框样式，实现连贯的色带效果。同时强调括号避免运算优先级错误，确保显示正确。
2026-10-26 10:42:08
178
原创 微信小程序 倒计时计时器
本文记录微信小程序倒计时器开发过程，解决页面初始不显示60及粉色边框未置顶问题。通过在data中初始化count:60实现即时显示，设置margin: 20rpx auto 0使容器位于顶部，并添加粉色边框样式。使用setInterval定时器时保存并清除定时器ID，防止重复触发。结合setData更新视图，实现开始、重置功能，确保逻辑稳定。
2026-10-20 13:38:16
106
原创 微信小程序：随机变色页面
本文介绍一个微信小程序入门级随机变色Demo，实现点击换背景色、自动适配文字颜色、一键复制色值、历史记录保存（最多8条）及清空重置功能。基于数据绑定与事件处理，结合wx.setClipboardData API和亮度算法，代码简洁清晰，适合新手学习小程序核心语法。
2026-10-18 10:19:59
170
原创 微信小程序：点击图片播放音频
本文介绍如何使用微信小程序innerAudioContext实现点击图片播放/暂停音频功能。通过创建音频实例、绑定image点击事件、维护播放状态并监听页面销毁释放资源，完整实现了基础音频控制。代码简洁可运行，适合新手学习事件绑定与媒体API，后续可拓展进度条、多曲切换等功能。
2026-10-18 10:01:29
147
原创 微信小程序 image 组件
本文详解微信小程序<image>组件的使用，涵盖基础用法、mode属性（如aspectFill、aspectFit、widthFix）的场景选择，支持网络与本地图片，并通过实例展示加载回调事件（bindload/binderror）。强调需配置合法域名、避免图片变形及包体积限制等开发注意事项，适合初学者快速掌握图像展示最佳实践。
2026-10-07 20:37:04
166
原创 微信小程序实训：Swiper 轮播与 Switch 开关实战
本项目为小程序轮播组件实践，实现井冈山、长征、延安、西柏坡四大精神的四页轮播，并通过四个Switch开关动态控制指示点、自动播放、循环滑动与竖向切换。采用Skyline渲染器，解决标签选择器禁用、黄色虚线框、对齐错位等兼容问题，通过class统一布局与样式，确保界面整洁对齐。核心体现数据绑定与视图响应机制，是前端入门经典案例。
2026-10-07 20:28:17
168
原创 微信小程序 checkbox 和 radio 组件学习
本文记录微信小程序中checkbox与radio组件的实践，实现《满江红》文本的动态样式控制：通过checkbox-group实现加粗、倾斜、下划线多选，radio-group新增30rpx字号并实时切换字体大小。核心在于数据绑定与事件监听，利用bindchange响应用户操作，结合setData更新数据，视图自动刷新，体现了小程序“数据驱动视图”的开发思想。
2026-09-22 14:04:44
50
原创 微信小程序 Form 组件实战：三角形面积计算器
本项目基于微信小程序form组件实现三角形面积计算器，通过海伦公式计算面积，并校验三边是否构成三角形。使用form-type="submit"触发计算，form-type="reset"实现一键清空输入框与结果。页面布局清晰，标题红色居中，按钮颜色符合要求，样式简洁美观，完整演示了表单提交与重置的核心功能。
2026-09-22 13:42:16
207
原创 微信小程序 模板 template 作业实战博客
本实验通过定义学生、老师及奥运冠军三类模板，实现信息复用与数据传递。使用<template>标签定义模板，通过<import>引入外部模板文件，并在页面中调用is="xxx"和data="{{...}}"传参。每条信息后自动添加虚线分隔线，结合滚动视图与样式布局，完成多条信息展示的课程作业，有效掌握微信小程序模板的创建与应用。
2026-09-21 22:57:20
142
原创 微信小程序模块化
本实验通过微信小程序项目，深入理解CommonJS模块化机制。掌握require()路径规则（如./、../../）与module.exports导出方式，区分全局App实例（getApp()）、跨目录公共模块、同目录模块及页面本地变量的调用方法。实践证明，合理拆分代码可提升复用性与可维护性，路径错误是常见报错原因。
2026-09-21 22:38:50
64
原创 微信小程序案例 数据和事件绑定
本实验通过小程序实现数据与事件绑定，掌握逻辑层与视图层分离架构，运用Mustache语法实现变量、对象、数组及运算的单向数据绑定，并通过bind:tap触发modify事件，结合setData()更新数据并自动刷新页面。重点强调事件函数必须定义在Page内部，否则会因无法识别导致报错，验证了小程序数据驱动视图的核心机制。
2026-09-20 13:54:59
192
原创 微信小程序实战：5 个底部 Tab 栏 + 生命周期函数案例
本案例实现微信小程序底部Tab导航栏（5个页面）及生命周期监控。通过app.json配置Tab栏与图标路径，结合app.js的全局生命周期（onLaunch/onShow/onHide）和page.js的页面生命周期（onLoad/onShow/onReady/onHide/onUnload），观察日志验证Tab切换时页面常驻内存特性。重点强调路径拼写、文件夹名称一致性及清除缓存的重要性，避免常见错误。
2026-09-20 13:31:00
52
原创 微信小程序 5 个 Tab 底部导航
本文介绍一个基于原生微信小程序的5个底部Tab页面项目，展示贾湘江、朱培娟等时代人物事迹。核心配置在app.json中，重点强调：所有页面必须注册在pages数组内，文件名统一小写（安卓微信严格区分大小写），避免真机预览空白。附完整代码与踩坑总结：关闭renderer: skyline、添加min-height:100vh、禁用上线前的vConsole调试。适合静态图文展示，性能优，部署简单。
2026-09-15 14:30:15
125
原创 微信小程序 Flex 弹性盒模型实战博客
本文通过一个完整案例，详解小程序中Flex弹性布局的使用。重点演示如何通过flex-direction: row-reverse实现元素从右向左反向排列，结合flex-grow灵活分配空间，轻松构建水平、垂直及混合布局。代码简洁，可直接复用，是掌握小程序响应式布局的核心技能。
2026-09-11 17:43:32
164
原创 微信小程序盒模型案例实战
本次小程序作业练习 WXSS 盒模型，制作展示三位中国杰出科学家信息的页面。通过三个不同样式的盒子，理解内边距 padding、外边距 margin、边框 border 的用法，同时解决文字溢出盒子的问题。content：内容区域，放文字图片padding：内边距，内容与边框之间距离，透明border：边框，包裹内边距margin：外边距，盒子和其他盒子之间的距离，透明。
2026-09-11 17:25:42
149
原创 微信小程序实现多页面跳转实战
本文记录了小程序多页面跳转的实现过程：在app.json中注册5个页面，首页使用navigator组件绑定跳转路径，配合flex布局实现列表样式。重点强调需正确配置路径（加/）及注册页面，避免跳转失败；解决黄色警告（如zoom属性替换为transform: scale()）和红色报错问题。最终实现点击跳转与返回功能，顺利完成作业。
2026-09-09 18:55:02
162
原创 微信小程序完整备案操作流程记录
本文详细记录了微信小程序备案的完整流程：需先完成主体认证，登录微信公众平台进入“小程序备案”入口，如实填写主体及负责人信息，完成人脸识别核验，提交小程序名称与服务内容，等待审核。备案须真实准确，避免驳回。成功后方可正式上线，是合规发布的关键步骤。
2026-09-09 18:36:18
175
原创 微信小程序字体文本样式改造案例
内容是关于小程序文本页面样式改造，提取静态样式到wxss，命名规范，实现效果等。摘要需简洁。本次案例对小程序文本页面进行样式改造，将静态style全部提取至wxss文件，class采用短横线命名，实现结构与样式分离。通过flex布局配合scroll-view实现纵向滚动，标题加粗居中红色，正文采用隶书、蓝色、字间距、两端对齐、首行缩进及绿色下划线，排版丰富，符合开发规范。
2026-09-05 19:39:03
366
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人