- 博客(31)
- 收藏
- 关注
RSS订阅原创 # 微信小程序案例：数据缓存API（同步异步存储+扩展删除指定key功能）
本案例演示微信小程序本地缓存全套API，涵盖异步/同步存储、读取、获取信息及清空缓存功能。新增删除指定key功能，支持输入key值动态移除缓存。代码完整可直接运行，无需云服务与模板，适用于学习与实战调试。
2026-11-10 13:32:08
100
原创 # 微信小程序案例：照相和摄像（wx.chooseMedia实现图片视频选择+扩展图片预览功能）
本文基于微信小程序wx.chooseMedia API实现拍照与相册选取图片、视频功能，并扩展添加图片预览按钮。通过数据绑定动态控制按钮状态，选择图片后启用预览功能，调用wx.previewImage实现全屏大图预览。代码完整，无需云服务，可直接运行，适用于学习媒体文件处理与页面交互控制。
2026-11-10 13:26:30
189
原创 微信小程序 Skyline 文件操作案例（写/复制/读/获取信息，扩展删除文件）
本作业基于微信小程序Skyline渲染模式，实现本地文件操作功能。通过FileSystemManager完成写、读、复制、获取文件信息及删除文件等操作，支持文本输入实时更新标题。所有文件存储于用户沙盒目录，确保数据隔离与隐私安全。代码结构清晰，界面友好，扩展功能完善，可直接在微信开发者工具中运行测试。
2026-11-09 15:01:23
202
原创 微信小程序Skyline Canvas2D图形变换案例（扩展：矩形叠加椭圆）
本实验基于微信小程序Skyline渲染模式，实现Canvas2D图形变换功能，包括平移、旋转、缩放、矩阵变换及矩形叠加椭圆的扩展效果。通过save()/restore()保持画布状态，正确处理dpr像素比避免模糊，重点规避中文横线导致的JSON解析错误。代码结构清晰，适合初学者理解2D绘图核心机制。
2026-11-03 13:35:13
206
原创 微信小程序 Skyline Canvas2D 基本绘图案例（实心圆 / 虚线 / 渐变 / 阴影，扩展绘制图片功能）
本文为微信小程序课程作业，基于Skyline渲染模式实现Canvas2D基础绘图功能，包括实心圆、轮廓圆、虚线、渐变、阴影、半透明图形及旋转文字。扩展实现本地图片绘制，通过按钮控制画布渲染，界面简洁直观，无需云服务与模板，完整演示了Canvas2D在小程序中的高效应用。
2026-11-03 13:22:22
167
原创 # 微信小程序案例 摇一摇变脸游戏
本文实现微信小程序摇一摇变脸小游戏，利用`wx.onAccelerometerChange`加速度传感器监听手机摇晃，支持点击脸谱切换图片。完成作业扩展，动态统计展示累计变脸总次数，整理图片路径踩坑点，完整源码可直接复制运行。
2026-10-29 20:48:47
157
原创 微信小程序案例4.10 canvas组件
本文讲解微信小程序 canvas type="2d" 自由绘图案例，实现手写涂鸦、清空画布基础功能。按照作业需求扩展增加切换画笔颜色按钮，颜色循环切换，全套源码可直接复制运行，适合小程序 canvas 初学者练习。
2026-10-28 11:53:34
207
原创 # 微信小程序map组件案例4.9
本文基于微信小程序 map 组件课堂案例，演示 map 地图组件、wx.getLocation、wx.chooseLocation、wx.openLocation 位置接口的使用。在原有 2 个标记点基础上完成作业扩展，新增第 3 个地图标记点，提供完整可直接复制的全套源码，同时记录开发踩坑点，适合小程序地图初学者学习。
2026-10-28 11:46:46
205
原创 微信小程序 scroll‑view 组件实战：实现纵向与横向滚动
本文通过微信小程序`scroll‑view`实战案例，完整演示纵向滚动、横向滚动实现。讲解`scroll‑into‑view`自动定位子元素、滚动系列事件监听；同时讲解伪元素 + transform 实现文字居中，以及 Skyline 渲染引擎对换行符`\n`的兼容性坑点，最后完成拓展作业，适合小程序入门学习滚动视图组件。
2026-10-27 13:20:33
227
原创 微信小程序实战：video 视频组件实现弹幕发送功能
本文通过微信小程序`video`视频组件实战案例，实现视频播放、预设定时弹幕、手动发送随机颜色弹幕。讲解`VideoContext`视频上下文 API、随机十六进制颜色生成、`danmuList`预设弹幕，同时重点踩坑说明`danmu‑btn`弹幕按钮在高低小程序基础库版本的兼容性差异，适合小程序媒体组件入门学习。
2026-10-26 14:50:13
181
原创 微信小程序案例：slider 滑块组件实现 RGBA 调色器
本文基于微信小程序，通过实战调色器案例讲解`slider`滑块组件开发。利用 4 个 slider 分别控制 RGBA 颜色的红、绿、蓝、透明度通道，借助`data‑*`自定义属性获取标记、ES6 动态计算属性名简化数据更新，拖动滑块实时修改页面元素背景与文字颜色。同时完成拓展作业，修改滑块轨道背景色，帮助初学者掌握 slider 常用属性、事件对象、rgba 颜色函数以及小程序数据绑定相关知识点
2026-10-25 13:41:15
153
原创 微信小程序 include 文件引用实战：实现可显隐拓展阅读模块
## 摘要在微信小程序开发中，`include`是 WXML 提供的文件引用方式，可以把公共的页面片段抽离为独立 wxml 文件，在页面中引入复用，减少代码冗余。本文基于案例 3.10 文件引用，完成基础页面搭建，并完成作业扩展：新增拓展阅读模块，通过两个按钮实现拓展内容的显示与隐藏。> > 开发环境：微信开发者工具，不使用云服务，不使用模板，webview 渲染引擎
2026-10-23 08:01:49
67
原创 微信小程序实战：列表渲染实现九九乘法表
微信小程序的列表渲染wx:for与条件渲染wx:if是非常基础又高频的知识点。九九乘法表是练习嵌套循环、条件判断、flex 布局的经典小案例。本次案例不仅完成基础乘法表展示，还完成作业扩展：奇偶行区分背景色、每个算式单元格增加边框，加深对小程序 WXML、WXSS 的理解。这个小案例把小程序列表渲染、条件渲染、动态 class、flex 布局全部结合起来。九九乘法表虽然逻辑简单，但非常适合新手理解嵌套循环渲染页面的思想。在此基础之上，还可以继续拓展：切换上三角、增加点击事件、修改颜色主题等。
2026-10-20 13:49:16
174
原创 微信小程序实战：条件渲染与 picker 选择器组件
本篇通过完整案例讲解微信小程序中 `picker`普通选择器组件、`wx:if/wx:elif/wx:else`条件渲染、`block`条件块、`input`失去焦点事件`bind:blur`的综合使用。实现效果：下拉选择器切换顶部颜色条；数字输入框控制下方颜色块显示隐藏；作业扩展新增紫色选择项。全部源码可直接复制运行，适合小程序初学者练习。> > 开发环境：微信开发者工具，不使用云服务，不使用模板，渲染引擎设置为 webview
2026-10-20 13:30:20
82
原创 计时器｜setTimeout & setInterval定时器实战
本案例为小程序课程实战练习，综合使用`setTimeout`延时执行、`setInterval`周期定时器、`clearInterval`清除定时器。实现 2 秒延迟显示计时器界面，完成倒计时：开始计时、停止计时、重新计时功能。完成课后扩展作业，使用 CSS 伪元素`::before` + 绝对定位，为计时方框添加水印背景文字。开发环境：微信开发者工具 webview 渲染模式。
2026-10-14 18:29:08
152
原创 图片与声音
本案例为小程序课程练习案例，实现点击宝塔山图片交替播放、暂停红色歌曲《重回延安抒怀》；利用`InnerAudioContext`音频上下文完成音频控制，完成课后扩展作业：自定义音频播放速率，每次播放 / 暂停时控制台打印音频当前播放位置、播放速率。
2026-10-13 11:00:01
50
原创 自动随机变化的颜色
本案例基于原生微信小程序实现古诗文字颜色随机变换。页面展示古诗《望庐山瀑布》，支持**5 秒自动切换每行文字随机颜色**、点击按钮手动切换颜色；完成课后扩展作业，让古诗标题颜色始终与第一行诗句颜色保持一致，控制台打印每行颜色数组。适合小程序初学者学习定时器、随机颜色生成、`setData`数据绑定。
2026-10-13 10:36:31
183
原创 微信小程序 checkbox & radio 组件实战｜动态文本样式编辑器
本文以《满江红・写怀》诗词案例，讲解微信小程序 `checkbox-group` 多选框与 `radio-group` 单选框的使用。通过复选框叠加控制文字加粗、倾斜、下划线，单选框切换字体大小，结合 `bindchange` 事件、`setData` 和行内样式绑定实现数据驱动视图，附带完整可运行源码与课后作业：新增 30rpx 字体选项，适合小程序入门学习选择类组件。
2026-09-22 13:32:30
116
原创 微信小程序 image 组件｜14 种图片显示模式完整演示
微信小程序 image 组件的 mode 属性是图片渲染核心，本文使用 `wx:for` 循环一次性演示全部 14 种图片显示模式，区分缩放模式与裁剪模式，对比 `scaleToFill`、`aspectFit`、`aspectFill` 等效果差异。附带完整源码，课后作业实现为每种模式添加序号编号，帮助开发者快速理解不同图片适配场景。
2026-09-22 13:32:06
151
原创 微信小程序 form 表单组件实战 —— 三角形面积计算器
`form`是小程序最常用表单容器组件，可以批量收集内部`input`输入框、单选、复选框的数据。本案例通过**三角形面积计算器**，练习表单提交、数据获取、表单校验、`wx.showToast`消息提示，课后拓展实现重置按钮，加深事件绑定与`setData`数据驱动视图的理解。
2026-09-20 13:53:04
221
原创 微信小程序 swiper 与 switch 组件实战
本文讲解微信小程序中 `swiper`轮播组件 和 `switch`开关组件联合使用实战案例。通过 switch 开关动态控制 swiper 的指示点、自动播放、衔接循环滑动、竖向滑动属性。最后完成课后作业：扩展为 4 个轮播页面，新增西柏坡精神紫色轮播页。适合小程序初学者学习组件绑定、数据双向渲染、事件绑定。
2026-09-20 13:18:07
57
原创 微信小程序template模板实验｜import引入外部模板，扩展奥运冠军案例，踩坑全记录
本次实验学习小程序 template 模板的定义与引用，使用 import 导入外部 wxml 模板，完成学生、教师渲染，作业扩展新增奥运冠军模板展示许海峰、刘翔、全红婵数据，记录新版基础库下文件路径相关报错与解决办法。
2026-09-19 18:02:43
170
原创 require 与 module.exports 多模块引用实验
通过微信小程序实验理解模块化机制，演示全局模块、跨目录模块、同目录模块、页面自身模块的变量与函数引用，使用`require()`和`module.exports`完成模块导入导出。作业拓展为不同模块输出配置区分背景色，附上完整可运行源码，同时记录开发过程常见踩坑点。
2026-09-19 17:35:39
182
原创 数据和事件绑定完整实战
本篇通过完整案例讲解微信小程序中**数据绑定**与**事件绑定**，包含算术运算绑定、对象绑定、数组绑定，使用`setData`实现逻辑层更新视图层。完成作业拓展：给学生对象增加专业属性。
2026-09-17 21:37:50
194
原创 应用与页面生命周期函数
本案例基于上一节 TabBar「创建标签」项目进行二次开发，学习小程序**应用生命周期**与**页面生命周期**。在`app.js`和页面 js 文件中编写生命周期回调，借助`console.log`打印日志，观察小程序初始化、Tab 切换、前后台切换时各个函数的执行顺序，帮助初学者理解生命周期各个回调的触发时机。
2026-09-15 14:42:04
152
原创 创建标签（底部 tabBar 实现 5 个底部导航)
本文基于微信小程序原生 tabBar，通过 app.json 全局配置完成**5 个底部导航标签**，实现 “中国网事・感动 2023” 人物展示小程序。讲解 tabBar 核心配置项、页面创建、图标素材准备，提供全套可直接运行完整源码，同时整理开发中常见踩坑点，适合小程序初学者学习底部导航栏开发。
2026-09-15 14:20:55
191
原创 微信小程序｜Flex 弹性盒模型实战笔记
本文介绍小程序Flex弹性盒布局，涵盖核心概念（容器、项目、主轴、交叉轴）。通过三种布局实例（水平均匀、左右混合、上下混合）演示flex-direction、flex-grow等属性，重点实现作业：不修改标签顺序，仅用flex-direction: row-reverse将水平布局改为从右向左排列（族、民、华、中），并附源码与踩坑记录，强调flex为小程序布局核心。
2026-09-09 16:21:59
84
原创 微信小程序｜创建页面与导航实战笔记
本案例以中国航天成果为主题，演示小程序多页面开发：通过app.json注册页面、navigator实现跳转、icon组件使用、Flex布局，并封装自定义导航栏组件。包含首页列表及5个详情页，支持返回功能，并拓展北斗、空间站页面，更换多种icon类型，全面覆盖项目开发流程。
2026-09-09 16:21:38
113
原创 微信小程序学习笔记盒模型
content 内容区：存放文字、图片，widthheight设置的就是内容区域的宽高。padding 内边距：内容与边框之间的距离，会撑开盒子。border 边框：盒子的边线，可以设置粗细、线型、颜色。margin 外边距：盒子和其他盒子之间的距离，控制盒子外部留白。content‑box（标准盒模型，小程序默认）总宽度 = width (内容宽) + padding + border 设置的宽高只作用于内容，内边距、边框会额外增大盒子整体尺寸。border‑box（怪异盒模型）
2026-09-08 16:00:11
179
原创 微信小程序备案全流程实操记录
微信小程序备案是发布上线的强制要求，需在微信公众平台完成。操作分七步：登录后台、进入备案、填主体/负责人/业务信息、人脸核验、提交承诺书。审核经平台初审和通管局复审，通过后生效，驳回需修改重提。
2026-09-08 10:13:48
240
原创 微信小程序案例 2.1-字体和文本样式设置（内联style抽取class改造）
本次实验通过微信小程序文本样式优化，将内联style统一抽离为wxss公共类，实现结构与样式分离，遵循短横线命名规范；利用scroll-view实现纵向滚动，并丰富字体、缩进、字间距等样式，提升了代码可维护性与页面规范性。
2026-09-01 21:40:30
302
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人