- 博客(30)
- 收藏
- 关注
RSS订阅原创 微信小程序｜本地数据缓存完整实践（含扩展删除指定 Key）
在微信小程序开发中，本地缓存 Storage 是非常高频的能力。可以用来保存用户偏好设置、表单临时数据、非实时业务数据，关闭小程序后数据不会丢失，直到代码删除或用户清理缓存博客园。小程序提供一整套缓存 API，分为异步（不带 Sync 后缀）和同步（带 Sync 后缀）两套接口。异步：不会阻塞页面执行，通过回调拿到结果，适合大部分业务场景。同步：代码会原地等待操作完成，需要搭配try‑catch捕获异常，适合简单读写场景腾讯云。本次案例基于微信开发者工具，完成全部缓存 API 演示，并额外扩展。
2026-11-10 22:23:52
126
原创 微信小程序本地文件操作实战｜案例 5.7 文件读写复制与删除扩展
删除文件</button>，用来完成本地文件的写入、复制、读取、获取文件信息、删除等操作。<button type="primary" size="mini" bind:tap="copy">复制文件
2026-11-05 20:31:07
157
原创 微信小程序 Canvas2D 图形变换实战｜案例 5.3 平移 / 旋转 / 缩放 / 矩阵变换 + 扩展椭圆叠加
旋转</button><button type="primary" size="mini" bind:tap="scale">缩放
2026-11-04 20:13:22
141
原创 微信小程序 Canvas 2D 绘图实战｜案例 5.2 基础图形绘制踩坑全记录
最近在做软件工程专业的小程序课程作业，对应案例《基本绘图》，目标是实现圆形、虚线、文字、径向渐变、阴影、半透明图形、加载外部图片这一系列画布功能。renderer参数报错、CSS 横杠符号异常、旧版 canvas-id 不支持径向渐变、图片跨域等等，折腾了很久才把全部功能调通，在这里整理一份完整踩坑笔记，给同样做这个实验的同学参考。开发环境：微信开发者工具，基础库 v2.30+ 功能清单：清空画布、实心圆、描边圆、虚线、端点样式、文字绘制、径向渐变矩形、阴影图形、半透明矩形、加载网络图片。
2026-11-03 15:09:53
121
原创 微信小程序实战：变脸游戏（摇一摇变脸 + 累计计数扩展）
本案例为微信小程序变脸小游戏，是小程序设备 API 的经典入门案例。基础功能支持点击图片随机变脸、摇晃手机加速度传感器触发变脸；动态统计并展示累计变脸总次数，点击变脸、摇晃变脸两种方式都会对次数进行累加。适合初学小程序、学习加速度监听 API，理解小程序数据绑定、页面响应逻辑。开发工具：微信开发者工具 基础库版本：3.17.6 实现技术：原生微信小程序（wxml+wxss+js+json 配置）
2026-11-02 22:14:38
146
原创 微信小程序 Canvas2D 自由绘图案例（支持切换画笔颜色）
改变画笔线条颜色</button><button type="primary" size="mini" bind:tap="clear">清空画布
2026-10-31 22:16:37
169
原创 微信小程序 map 地图组件实战笔记｜实现选点、打开位置、多点标记
在微信小程序开发中，地图是非常高频的业务场景，比如外卖取件、校园点位展示、门店导航等。微信小程序内置<map>地图组件，搭配位置 API，可以快速完成位置选择、地图展示、导航跳转整套能力。本次课程作业案例，从零实现小程序地图页面，包含3 个地图标记点，实现选择位置、打开内置地图导航功能，踩过不少配置坑，在这里记录完整开发过程与避坑要点。开发环境：微信开发者工具，不使用云服务，不引入第三方 npm 组件。<map>组件longitudelatitude：地图中心点经纬度；markers。
2026-10-30 10:51:00
152
原创 微信小程序 scroll‑view 组件实战：实现纵向 & 横向滚动（附作业扩展）
是微信小程序内置滚动容器组件，用来实现局部区域滚动。⚠️注意：不要直接用页面本身滚动，scroll‑view 是实现盒子内部滚动；纵向滚动必须指定高度，横向滚动需要开启不换行。常用核心属性：表格属性说明开启纵向垂直滚动，必须设置 height 高度开启横向水平滚动，配合scroll‑into‑view="id值"页面加载自动滚动到指定 id 的子节点，id 不能数字开头横向滚动初始偏移，单位 px：滚动到达顶部 / 最左边触发：滚动到达底部 / 最右边触发bindscroll。
2026-10-29 22:15:06
16
原创 微信小程序 video 弹幕组件实战踩坑记录｜基础库版本差异前言
navigation-bar title="video组件" back="{{false}}" color="black" background="#FFF"></navigation-bar><scroll-view class="scrollarea" scroll-y type="list"><input type="text" placeholder="在此处输入弹幕内容" bind:blur="inputBlur"/>在输入框填写文字，失去焦点记录内容，点击发送弹幕，随机颜色弹幕飘出；
2026-10-28 15:15:13
79
原创 微信小程序案例：Slider 滑动条结合 rgba 实现动态调色
在微信小程序开发中，slider滑动选择器组件经常用来做音量调节、数值设置、颜色调色盘这类交互。今天通过案例 4.3，实现拖动滑块实时修改页面颜色，同时学习data‑*自定义属性、JS 动态属性名、rgba()颜色函数这 3 个非常实用的知识点。本案例同时完成课后作业：给第一个滑动条设置轨道背景黄色。实现效果：4 个滑动条分别控制红、绿、蓝、透明度；拖动滑块，下方文本块的背景色、文字颜色同步实时变化。WXML 中写，事件触发后，通过就可以拿到r。好处：4 个滑块共用同一个事件函数。
2026-10-27 08:08:50
162
原创 微信小程序｜include 文件引用：实现内容按需展示
navigation-bar title="文件引用" back="{{false}}" color="black" background="#FFF"></navigation-bar><scroll-view class="scrollarea" scroll-y type="list">在主页引入，新增【显示扩展内容】【隐藏扩展内容】按钮，点击按钮控制扩展阅读板块的显示与隐藏，掌握文件引用、条件渲染、点击事件联动的综合用法。页面初始加载：展示标题、正文、页脚，拓展阅读默认隐藏。
2026-10-26 21:53:46
198
原创 微信小程序｜列表渲染实现九九乘法表（奇偶行异色 + 单元格边框）
本案例基于微信小程序原生语法，使用wx:for嵌套列表渲染完成九九乘法表开发。在基础乘法表功能之上，完成两项扩展需求：奇数行、偶数行设置不同背景色，并且为每一个乘法算式单元格添加边框，熟悉小程序列表渲染、动态 class、条件渲染的使用，是小程序基础语法非常经典的练习案例。wx:for嵌套循环、wx:if条件渲染、动态样式绑定、wxss 样式布局这个案例很好地理解小程序列表渲染的核心逻辑。wx:for是小程序渲染列表最常用的 API，结合动态 class 可以轻松实现隔行变色效果，wx:if。
2026-10-25 15:08:04
79
原创 微信小程序：条件渲染与 picker 组件完整实验报告
picker 普通选择器通过range绑定数组，事件拿到选中项索引，配合数据绑定动态修改页面样式。wx:if属于条件渲染，条件不成立节点直接不会渲染；<block>是逻辑包装标签，不会产生额外 DOM。bind:blur在输入框失去焦点触发，适合输入完成之后再做校验逻辑。setData是小程序修改 data 数据、驱动页面更新的唯一方式。
2026-10-19 22:19:31
205
原创 微信小程序案例：图片与声音（实现音频播放、调速与控制台日志）
本案例是微信小程序多媒体开发入门实践，实现点击图片控制音频播放 / 暂停，并在此基础上完成扩展功能：自定义音频播放速率（慢速 / 快速播放）；每次播放、暂停音频时，在调试控制台打印当前音频播放位置与播放速率，适合小程序音频 API 的学习。：小程序原生音频 API，用于本地 / 网络音频播放控制。：音频播放速率，取值区间 0.5~2.0，小于 1 慢速，大于 1 快速。：获取音频当前播放位置，单位秒，只读属性。云开发存储：小程序多媒体素材推荐放在云存储，避免包体积超限；
2026-10-19 22:12:18
208
原创 微信小程序实战：自动随机变化的颜色
学习微信小程序定时器与动态内联样式，完成古诗文字随机变色案例。本案例使用周期定时器实现每隔 5 秒自动更换诗句颜色，点击按钮也可以手动触发颜色变化，同时完成扩展作业：标题颜色与第一行诗句颜色保持一致。开发工具为微信开发者工具，不使用云服务。
2026-10-15 22:20:11
134
原创 微信小程序实战案例：计时器的实现
最近学习微信小程序定时器相关 API，做了一个倒计时计时器小案例。setTimeout延时执行一次，周期性循环执行。本案例就利用这两个定时器，完成具备开始、暂停、重置功能的倒计时，同时做功能扩展，增加背景水印文字。开发环境：微信开发者工具，不使用云服务，普通小程序模板项目。通过这个计时器案例，掌握了小程序两种定时器的用法，理解页面数据setData更新机制，学会按钮事件绑定。同时练习 CSS 伪元素、绝对定位布局。定时器是小程序很常用的能力，可以做倒计时、轮播、定时弹窗等各种业务。
2026-10-15 22:03:45
122
原创 微信小程序 image 组件 14 种显示模式完整实战
text: 'scaleToFill: 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'text: 'bottom right: 裁剪模式，不缩放图片，只显示图片的右下边区域。text: 'bottom: 裁剪模式，不缩放图片，只显示图片的底部区域。text: 'right: 裁剪模式，不缩放图片，只显示图片的右边区域。text: 'left: 裁剪模式，不缩放图片，只显示图片的左边区域。text: 'top: 裁剪模式，不缩放图片，只显示图片的顶部区域。
2026-10-09 09:53:15
143
原创 微信小程序｜swiper 轮播与 switch 开关组件实战（作业拓展：新增西柏坡精神轮播项）
自动播放</text><text class="my-left">衔接滑动</text><text class="my-left">指示点</text><text class="my-left">竖向中国精神
2026-10-08 10:26:26
157
原创 微信小程序｜checkbox 和 radio 组件实战，动态修改文本样式（作业拓展：新增 30rpx 字号选项）
倾斜</checkbox>--多选框组：checkbox-group，bindchange监听变化--><checkbox value="isBold">加粗
2026-10-08 10:22:02
140
原创 微信小程序｜form 表单实战，三角形面积计算器（带重置按钮作业）
input type="digit" placeholder="请输入三角形第一条边长" name="a" focus="true" value="{{sideA}}" /><input type="digit" placeholder="请输入三角形第二条边长" name="b" value="{{sideB}}" /><input type="digit" placeholder="请输入三角形第三条边长" name="c" value="{{sideC}}" />--作业新增重置按钮-->
2026-09-23 22:19:06
229
原创 微信小程序｜template 模板实战，学生、教师、奥运冠军卡片、
⚠️踩坑重点：import路径！index.wxml 在pages/index/，需要../../回到项目根目录，很多同学直接写/template/template.wxml会出现Template not found模板找不到警告。<template is="teacher" data="{{name:'薛老师', age:38, course:'线性代数'}}" /><template is="student" data="{{name:'杨同学', age:21, major:'人工智能'}}" />
2026-09-23 22:16:16
136
原创 微信小程序｜CommonJS 模块化实战，多模块导入导出完整案例
随着小程序项目业务变多，代码全部堆在一个js文件中会变得臃肿，难以维护。小程序采用CommonJS 模块化规范，可以把功能拆分成多个独立 JS 模块，通过导出、require()导入，实现代码复用。全局模块（app.js不同目录下外部模块相同目录下其他模块当前页面自身模块作业拓展：给每一类模块输出设置不一样的背景色，直观区分模块来源。require | 微信开放文档文件作用域：JS 文件中直接写的constfunction属于当前模块私有，外部文件访问不到。导出。
2026-09-22 13:47:16
173
原创 微信小程序入门｜详解数据绑定与事件绑定
学习微信小程序，是必须跨过的第一道门槛。小程序采用逻辑层与视图层分离的模式，JS 负责业务逻辑，WXML 负责页面渲染，两者依靠数据绑定完成联动；而事件绑定负责接收用户点击等交互行为，触发逻辑层代码执行。本文基于课堂实战案例，从零实现一个演示项目，同时完成作业拓展：给学生对象新增专业字段，带你搞懂 Mustache 语法、对象绑定、数组绑定、bind:tap点击事件、setData核心 API。
2026-09-22 13:23:27
189
原创 微信小程序开发：探究小程序与页面生命周期函数
通过本案例，能够分清应用生命周期和页面生命周期两套回调函数。app.js管控整个小程序的启动、前后台状态；每个 Page 页面 js 管控自身页面加载、渲染、显示隐藏。Tab 页面特点：页面只会初始化一次，后续切换仅执行 onShow，这是小程序开发非常重要的知识点，实际项目刷新页面数据经常会用到这个特性。
2026-09-15 22:38:03
141
原创 微信小程序开发实践
开发微信小程序，实现底部 Tab 标签栏，基础 3 个页面，新增 2 个页面，合计 5 个 Tab 页面。每个页面使用卡片布局展示感动人物介绍，卡片需要灰色边框、内边距、外边距。项目最终打包提交，撰写开发技术博客。index：首页（总介绍：中国网事・感动 2023）jiaochao：贾潮江zhupeijuan：朱培娟page4：莫日发page5：朱言春✅ wxss 只是样式定义仓库，必须 wxml 通过 class 引用，样式才能渲染，这是小程序样式最核心知识点。
2026-09-15 22:06:51
166
原创 微信小程序 Flex 弹性布局案例实战
Flex（弹性盒模型），给容器设置之后，容器内部子元素就可以使用 Flex 相关属性进行排布。核心概念分为容器（父元素）与项目（子元素）。：控制主轴方向（子元素排列方向）row默认：从左向右排列：从右向左反向排列：主轴上的对齐方式，实现元素水平均匀分布：交叉轴垂直方向对齐需求：原始案例第一行是从左到右均匀排布；第一行保持水平均匀分布，改为从右到左排列，只修改第一行容器，其他行布局不变。
2026-09-12 10:37:49
77
原创 【无标题】微信小程序开发备案流程与心得体会
在微信小程序正式上线发布前，必须完成工信部ICP备案。这是国家网络信息服务的合规要求，也是小程序能够上传代码、提交审核、正式发布的必要前提。本次我以个人开发者身份，完整完成了微信小程序注册、配置、开发、备案与查询全流程，本文记录完整备案操作步骤、关键知识点、常见问题与个人学习体会。数据同步延迟误区：备案成功不等于工信部立刻可查，耐心等待系统同步，禁止重复提交备案。照片规范问题：照片模糊、反光、镜像、遮挡信息，都会直接驳回备案申请。类目不匹配问题：功能与类目不一致，是小程序审核失败的最主要原因。
2026-09-12 10:31:37
344
原创 自定义返回图标 + 页面导航跳转 + 本地图片路径规范开发
在微信小程序开发中，页面跳转与导航栏交互是最基础也是最高频的功能。小程序原生自带顶部导航栏返回按钮，但在实际项目中，UI 设计往往要求页面内部自定义左上角返回图标，搭配项目本地图片资源实现统一视觉风格。本文结合「航天成果展示系统」实战项目，完整讲解：小程序本地图片资源绝对路径规范引用自定义左上角返回图标实现页面 navigateTo 跳转 + navigateBack 返回逻辑列表右侧箭头图标统一封装多页面结构搭建与项目规范适合小程序初学者、课程作业、入门实战学习。
2026-09-10 14:55:54
134
原创 CSS 盒模型实战
content（内容区）：存放文字、图片等内容，盒子主体；padding（内边距）：内容和边框之间的距离，会撑大盒子；border（边框）：盒子的边线，可以设置实线、虚线、颜色、粗细；margin（外边距）：盒子与其他盒子之间的距离，用来控制元素之间的间隔。小程序提示：小程序使用rpx作为响应式单位，750rpx = 屏幕宽度，适配不同手机屏幕，开发优先使用 rpx。auto左右自动分配，实现盒子水平居中，这是小程序盒子居中常用写法；padding 会撑大盒子尺寸。
2026-09-10 14:35:24
213
原创 微信小程序开发工具字体修改熟悉
样式分离的好处：将样式写在 wxss，结构 (wxml) 和样式 (wxss) 分离，代码可读性高，便于统一维护、复用样式。内联 style 只适合动态变化的样式，静态样式推荐使用 class。class 命名规范：小程序 WXSS 推荐使用短横线命名xxx-xxx，不要驼峰xxxXxx。滚动实现：父容器必须设置明确高度，配合，内部内容溢出才会产生滚动；如果没有设置高度，overflow 不会生效。文本样式text-decoration: underline 颜色可以设置下划线以及下划线颜色；
2026-09-07 19:45:43
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人