- 博客(31)
- 收藏
- 关注
RSS订阅原创 （案例 5.8）：数据缓存
掌握微信小程序数据缓存 API 的功能和使用方法，包括同步与异步存储缓存数据（ / ）、同步与异步获取缓存数据（ / ）、同步与异步获取缓存数据信息（ / ）、同步与异步清空缓存空间（ / ）；理解同步接口 try/catch 与异步接口 success/fail 回调两种错误处理方式；完成拓展任务：增加输入框输入要删除的 key，点击"删除指定 key"从缓存中删除指定数据。微信开发者工具（稳定版），原生微信小程序，基础库 3.x，不使用云开发、不使用模板，AppID 使用测试号（）。五、完整代码ap
2026-11-10 13:35:41
93
原创 （案例 5.6）：照相和摄像
一个接口就能同时完成拍照、摄像、选图、选视频四件事，差别只在mediaType和sourceType两个参数，课件里和两个事件函数调用的是同一个 API，验证了这一点。回调里的是数组，count大于 1 时要遍历处理，本案例只取第一项。拓展任务"预览图片"的做法是：用imgUrl是否有值同时控制按钮的disabled样式类和的空值校验，双保险避免空路径预览报错；的urls传数组，以后要支持多选预览只需把count调大并把所有收集进数组。另一个容易踩的坑是用户取消选择也会触发fail，必须用errMsg。
2026-11-10 13:32:06
119
原创 5.7 文件操作实验
本实验围绕展开，把小程序文件系统最容易混淆的三件事讲清楚了：文件存放在哪（用户目录）、路径怎么写（协议名://前缀不能硬编码，真机与开发者工具不同）、文本怎么读写（readFile不传encoding拿到的是，文本场景必须四个核心 API 的参数结构高度一致，都是的回调风格，掌握一个就能迁移到其余几个。拓展的"删除文件"只需要unlink加一层确认，原有写、复制、读的逻辑一行都不用改，体现了接口设计的正交性；同时删除的是副本而非源文件，保证四个基础功能可以反复演示。在新基础库已标记废弃，实验中在fail。
2026-11-04 20:32:54
270
原创 5.3 图形变换
Canvas 是小程序中实现绘图的核心组件，借助提供变换 API，可以轻松完成图形平移、旋转、缩放、矩阵形变。本次案例 5.3，完整实现基础图形变换功能，并完成课后作业扩展，新增绘制效果。
2026-11-03 13:16:58
185
原创 5.2 图形变换
本案例使用微信小程序Canvas 2D画布 API，实现图形的平移、旋转、缩放、矩阵变换、还原基础功能；作业扩展增加按钮实现矩形叠加椭圆绘制效果。界面：紫色画布背景，黄色描边方框，底部功能按钮，顶部标题动态切换。坐标平移rotate()图形旋转（弧度）scale()图形缩放矩阵变换save()restore()保存恢复绘图状态（非常关键，防止变换叠加）ellipse()绘制椭圆（作业扩展）忘记save()restore()，变换会叠加，图形越来越歪。
2026-11-03 13:11:33
146
原创 5.1变脸游戏
监听加速度数据。回调参数分别代表手机 x/y/z 三个轴加速度。当用力摇晃手机，轴的绝对值会变大，我们判断大于 0.5 就视为摇晃动作。加速计传感器功能，微信模拟器无法模拟，需要手机真机调试。
2026-10-28 13:06:17
192
原创 Canvas2D
组件，学会创建 2D 绘图上下文；实现手指触摸自由绘图、清空画布；完成作业扩展，增加按钮动态切换画笔颜色。环境：微信开发者工具，小程序，
2026-10-28 13:01:28
219
原创 map 地图组件
❌忘记写，位置 API 直接报错。新版本微信小程序强制要求声明隐私接口。❌type 不写gcj02，打开地图位置偏移错乱。微信地图只识别 gcj02 火星坐标。⚠模拟器定位效果有限，位置相关功能必须真机调试才能完整跑通。⚠上线发布：仅仅写 app.json 配置不够，小程序后台【开发管理】→【接口设置】，手动开通接口，同时小程序类目要符合接口要求，否则提交审核会被驳回。marker 图片路径错误，标记点不显示：图片路径开头必须写绝对路径，。
2026-10-27 14:39:14
197
原创 scroll‑view 组件
scroll‑view 是小程序中实现局部滚动的核心组件，可以实现页面局部区域纵向滚动或者横向滚动，区别于页面整体滚动。本次实验基于微信开发者工具，新建不使用云服务、不使用模板的小程序项目，完成 scroll‑view 纵向、横向滚动演示，并且完成作业拓展，在横向滚动区域新增 “阳光灿烂” 模块，熟悉滚动相关属性与事件。本项目采用 webview 渲染引擎，保证 text 组件内\n换行符可以正常生效。横向滚动页面上下堆叠，无法左右滑动错误写法：横向子项设置width:100%。解决：子项改为固定宽度；
2026-10-26 18:05:02
167
原创 video 组件
本次实验基于微信小程序video媒体组件，实现视频播放、预置定时弹幕、输入框自定义发送随机颜色弹幕功能。同时验证小程序调试基础库版本差异：低版本基础库播放器会显示弹幕开关danmu‑btn按钮，高版本基础库该属性失效，弹幕按钮消失，但发送弹幕接口功能依旧可用。实验案例来源：案例 4.7 video 组件，使用 webview 渲染引擎，自定义导航栏，修复自定义导航顶部黑块问题，视频素材使用腾讯云存储 mp4 网络资源。自定义导航栏顶部大黑块关闭原生导航，页面顶到状态栏，没有占位元素。
2026-10-25 12:12:12
203
原创 案例 4.3 slider 组件
slider 滑动条适合数值连续调节场景，需要分清和两个颜色属性。注意区分和bindchange，根据业务需求选择实时触发或者松手触发。data‑*自定义属性配合动态对象属性，可以减少大量重复代码，提升代码复用性。rgba 可以同时控制色彩与透明度，结合内联style可以实现页面元素动态变色。
2026-10-24 22:18:07
168
原创 WXML include 文件引用
本案例学习小程序中 include文件引用，将页面拆分为头部、正文、页脚、扩展阅读多个独立 wxml 片段，通过 include 标签引入复用。使用include引入外部 wxml 片段，拆分页面为 header、main、footer。页面展示 2026 年重大科技进展，粉色外边框，标题居中、正文首行缩进、页脚居右显示日期。新增扩展阅读片段extra.wxml，同样使用 include 引入。添加两个按钮：【显示扩展内容】、【隐藏扩展内容】，通过条件渲染控制扩展阅读区域显示与隐藏。
2026-10-23 09:14:51
128
原创 3.7 列表渲染和九九乘法表
本案例学习小程序嵌套 wx:for 列表渲染wx:if条件渲染、动态 class、页面横屏配置，使用 flex 布局完成九九乘法下三角表格。页面展示九九乘法口诀表标题，整体纵向布局，每一行横向排列。嵌套列表渲染 + 条件渲染实现下三角九九乘法表。页面开启横屏显示。奇数行、偶数行设置不同背景色；奇数行统一颜色，偶数行统一颜色。每一个乘法表达式单元格增加边框。约束要求：使用小程序系统原生导航栏，禁止自定义导航组件。wx:for="{{数组}}"遍历数组，循环生成组件；自定义循环变量名。
2026-10-20 13:40:26
66
原创 条件渲染与 picker 选择器组件
本案例练习小程序picker 普通选择器条件渲染、<block>条件块、input 失去焦点事件bind:blur。页面初始展示红色色块；点击 picker 弹出颜色选项，选中确定后上方色块同步更新颜色。input 输入数字，真机弹出带小数点数字键盘。输入数字大于 0，下方三色条显示；数字≤0，三色条隐藏。作业扩展：在原有红、绿、蓝三色基础上，新增紫色选项。使用小程序系统原生导航栏，禁止自定义导航组件。picker 组件普通选择器；range绑定选项数组；监听选择变化；事件对象拿到选中下标。
2026-10-20 13:37:05
148
原创 实验 3.5 计时器
setTimeout是一次性延时定时器，适合做延迟显示；循环定时器适合周期性执行代码，比如倒计时。循环定时器开启后必须保存返回的timerId，需要停止时调用关闭，避免产生多个定时器造成逻辑错乱。hidden属性可以快速控制整块 DOM 元素显示隐藏，不需要销毁组件。CSS 伪元素::before结合相对 + 绝对定位，可以实现水印、背景文字效果，不需要新增 wxml 标签，完成扩展作业。使用布尔变量做状态标记isTime，用来记录计时是否允许继续执行，处理倒计时结束边界逻辑。
2026-10-16 09:08:45
198
原创 实验 2.10 自动随机变化的颜色
小程序通过style="{{变量}}"实现动态样式，本案例动态控制文字颜色。使用可以生成随机下标，拼接出 #开头的十六进制随机颜色。实现周期性自动执行；是小程序更新页面数据的核心方法。事件绑定bind:tap实现按钮交互，手动触发颜色更新。扩展作业实现：标题直接复用颜色数组第 0 项，做到标题与第一行诗句颜色同步，自动、点击都可以同步更新。控制台打印数组，用于调试查看程序内部生成的数据，方便排错。
2026-10-13 13:54:40
196
原创 实验 2.2 图片与声音
image组件通过src绑定网络资源，保证图片自适应布局。得到音频实例，完成播放暂停控制；控制播放速度，获取播放进度。onLoad生命周期函数页面加载只执行一次，适合做资源初始化。云存储适合存放图片音频媒体文件，规避小程序包大小限制；但是下载链接带签名，存在有效期。数据绑定{{变量名}}，事件绑定bind:tap，是小程序页面交互的基础。完成扩展作业，点击交互时打印音频播放位置和播放速率，在调试器 Console 面板观察输出。
2026-10-13 13:43:43
202
原创 案例 4.6 image 组件实验博客
image组件mode属性分为缩放模式和裁剪模式，部分裁剪模式只支持 webview 渲染引擎。wx:for可以批量渲染列表，获取数组索引，索引加 1 生成序号，不需要手动修改 js 数组，即可完成编号拓展。
2026-09-22 10:03:43
134
原创 案例 4.2 checkbox 和 radio 组件实验
本实验完全保留课件原始index.js逻辑代码，wxml 原样保留自定义导航组件。通过给滚动区域增加顶部内边距，解决自定义导航栏的内容遮挡问题。获取的是选中项数组，适合多选场景；获取单个字符串，适合单选。新增30rpx选项时，只需要增加 radio 标签，原有 js 代码不需要修改即可直接适配新值。通过 wxml 动态 style +setData完成样式动态更新。
2026-09-22 10:02:11
81
原创 案例 4.4 swiper 和 switch 组件
swiper 是小程序轮播容器组件，轮播内容必须写在标签里面。switch 开关组件结合 bindchange 事件，可以实现简单控制面板，动态修改其他组件属性。wx:for 循环可以批量渲染轮播项，新增轮播页面只需要修改数组即可，不用重复写 swiper‑item 标签。拓展练习增加西柏坡精神轮播项，掌握数组、样式同步新增的开发流程。
2026-09-21 20:55:10
183
原创 案例 4.1 form 组件
form 组件用于收集一组表单控件的数据，依靠 name 属性作为 key 收集各个控件的值。button 的form‑type可以设置为 submit 提交表单、reset 重置表单。获取表单数据之后要先做合法性校验，再执行业务计算逻辑。用于给用户弹出消息提示，icon 设为 none 可以展示多行提示文字。拓展重置按钮，练习表单重置事件，完成输入内容和结果的一键清除。
2026-09-21 20:52:58
68
原创 案例 3.9 模板
年龄: {{age}}</view><view>所学专业: {{major}}</view><view>姓名: {{name}}</view><view>年龄: {{age}}</view><view>讲授课程: {{course}}</view>--新增奥运冠军拓展模板--><view>奥运冠军姓名: {{name}}</view><view>项目: {{sport}}
2026-09-20 14:15:10
58
原创 3.8 模块化
小程序每个 JS 文件都是独立模块，默认作用域隔离，必须通过导出、require()导入才能跨文件访问数据。../../返回根目录、./代表当前目录。全局模块通过getApp()调用，无需 require。WXML 样式 class 必须与 WXSS 完全一致，否则样式失效。Windows 开发小程序极易出现后缀隐藏、路径层级错误，是模块化实验最常见 bug。今天 13:52在博客中添加一些代码示例如何在微信小程序中使用模块化？模块化开发的优点有哪些？
2026-09-20 13:53:43
123
原创 个人微信小程序 ICP 备案实操完整流程记录
微信小程序想要正式发布上线，ICP 备案是必须完成的前置步骤，个人小程序的备案全程免费，没有任何备案手续费。本次实操整理小程序后台备案提交的全部流程，在此记录每一步操作，方便后续学习查阅。微信小程序 ICP 备案是小程序上线必不可少的一环，跟着后台向导一步步填写真实资料，完成人脸和短信核验就能提交申请。个人备案操作门槛不高，重点是保证所有填写信息真实准确，避免信息填写错误导致备案被驳回。
2026-09-16 12:32:17
302
原创 案例 3.4 数据和事件绑定 实验博客
单向数据绑定：使用{{ }}语法，数据只能从 js 逻辑层流向 wxml 视图层，页面不能直接修改 js 的数据。{{对象名.属性名}}；{{数组[下标]}}；还可以直接在大括号内做算术运算。事件绑定bind:tap绑定点击事件，点击组件会触发 js 中对应的事件处理函数。setData：小程序专门用于更新页面数据的 API。调用 setData，逻辑层的数据发送到视图层，页面自动重新渲染。注意：只把页面渲染用到的数据放在 data 中；
2026-09-16 12:25:24
75
原创 案例 3.3 生命周期函数 实验博客
本实验基于 “创建标签” 项目副本，完成了小程序应用与页面生命周期代码编写。app.js管理整个小程序的生命周期，Page()管理单个页面生命周期。tabBar 页面切换时页面不会销毁，只会触发onHide隐藏；再次访问只会执行onShow，不会再次执行onLoad与onReady。生命周期是小程序非常重要的机制，可以在对应回调函数中做页面初始化、数据请求、状态保存等业务逻辑。
2026-09-15 14:25:48
139
原创 实验 3.1 创建页面和导航 实验博客
本次实验掌握了微信小程序创建页面和实现页面间导航的方法，学会使用 navigator 标签完成页面跳转，熟悉 icon 组件的 type 属性，完成了 5 个页面导航和不同图标展示的作业要求，加深了对小程序多页面结构以及导航栏组件使用的理解。
2026-09-11 12:27:51
54
原创 实验 2.4 Flex 弹性布局 实验博客
本次实验熟悉了微信小程序 Flex 弹性盒模型，学会反向布局与嵌套布局，理解 flex‑grow 分配空间原理，掌握全屏页面配置，完成本次实验要求。
2026-09-08 14:29:45
177
原创 2.3 盒模型实验
盒模型组成：内容区 (width/height)、内边距padding、边框border、外边距margin。标准盒模型（默认）：总宽度 = width + padding + border。border‑box：总宽度 = width，padding 和 border 包含在 width 里面。dashed代表虚线边框，solid代表实线边框。本次实验熟悉小程序样式盒模型，掌握外边距、内边距、边框、背景色的配置，完成题目要求，额外增加一个新盒子完成作业拓展。
2026-09-08 13:54:40
166
原创 微信小程序案例 2.1-字体和文本样式
本次微信小程序案例主要完成文本样式排版 + 文字下划线效果实现。页面展示党的二十大会议主题相关文本，通过 wxss 控制字体大小、颜色、对齐方式、下划线等样式，并在页面底部输出作业个人信息。掌握小程序页面基础结构，熟悉 wxml、wxss、js、json 文件分工练习文本展示与样式排版，实现标题红色居中、正文蓝色字体使用<text>标签配合实现文字下划线效果在页面底部输出班级、学号、姓名作业信息了解小程序部分 CSS 属性在不同模拟器 / 真机上的兼容性差异。
2026-09-06 13:51:13
319
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人