文无事事-优快云博客

原创 # 微信小程序案例5.8 数据缓存（拓展：删除指定key）

本实验完成小程序本地存储全套同步、异步接口练习，区分同步与异步调用方式。拓展任务实现单独删除指定 key，符合作业要求。本地 Storage 持久化存储，上限 10MB，适合保存简单配置、用户偏好等少量信息。

2026-11-10 14:26:46 143

原创 # 微信小程序案例5.6 照相和摄像（拓展：图片预览）

本实验学习媒体选择 API，完成图片、视频的拍摄与相册选取，掌握临时文件路径的使用。拓展任务实现按钮动态禁用与全屏图片预览。理解disabled属性数据绑定、image / video 组件的渲染方式。

2026-11-10 14:06:01 154

原创 # 微信小程序案例5.2 基本绘图（拓展：绘制图片）

6.createRadialGradient(x0,y0,r0,x1,y1,r1)径向渐变，addColorStop添加颜色。实现清空画布clear、画实心圆、画轮廓圆、绘制虚线、端点交点、绘制文字、图形渐变、阴影矩形、半透明图等功能函数。1.ctx.arc(x,y,r,起始角,结束角)画圆；5.ctx.fillText(text,x,y)绘制文字，font设置字体。9.ctx.drawImage(img,x,y,w,h)绘制图片。3.ctx.setLineDash([实线长,间隙长])画虚线。

2026-11-03 14:12:33 193

原创 # 微信小程序 video视频弹幕案例

本案例使用video媒体组件实现视频播放与自定义弹幕交互，借助VideoContext对象调用sendDanmu接口发送弹幕，熟悉小程序媒体组件开发与云存储资源引用方式。

2026-10-27 13:37:48 199

原创 # 微信小程序案例4.3 slider组件

本案例练习slider滑动选择器组件；利用data‑*自定义属性，多个滑动条复用同一个事件函数；JS动态计算属性名简化代码；rgba()实现动态颜色。拓展任务使用修改第一个滑动条划过轨道颜色。注意在拖动过程持续触发，适合做实时预览效果。

2026-10-25 14:00:36 107

原创 # 微信小程序案例3.10 文件引用

本案例练习小程序WXML的include文件引用，将页面拆分为多个wxml片段，实现页面片段复用。结合按钮点击事件、wx:if条件渲染完成拓展任务，控制被引入外部片段的显示与销毁。拓展阅读使用view标签逐条排版，比br标签更符合小程序规范。注意include只会引入普通标签，不会引入template模板内容。

2026-10-21 12:30:08 106

原创 # 微信小程序案例3.7 列表渲染和九九乘法表

本案例学习小程序wx:for列表渲染，嵌套循环实现九九乘法表；利用wx:if条件渲染过滤不需要显示的部分。通过wxml三元运算符动态切换class，完成拓展任务，实现奇偶行不同背景色，给每一项乘法式子增加边框。页面配置开启横屏；使用flexnowrap防止内容挤压换行，横纵向滚动保证任意屏幕尺寸下都能完整展示乘法表。

2026-10-20 14:17:06 227

原创 # 微信小程序案例3.6 条件渲染和picker组件

本案例学习picker普通选择器组件，掌握条件渲染，<block>逻辑条件块，input输入框bind:blur失去焦点事件。完成拓展任务，新增紫色选项，实现4种颜色切换。wx:if条件渲染会销毁重建DOM，与hidden仅视觉隐藏有本质区别；block标签只用于逻辑控制，不会生成多余页面DOM节点。

2026-10-20 13:42:45 203

原创微信小程序案例2.10 自动随机变化的颜色

本案例利用与算法生成十六进制随机颜色；使用定时器实现5秒自动换色，按钮点击实现手动换色。通过wxml的style属性绑定JS数组变量，动态控制每一行文字颜色。拓展功能实现：标题绑定colors[0]，让标题颜色与第一行诗词颜色完全同步。加深理解小程序逻辑层setData驱动视图层页面更新的机制。

2026-10-16 11:19:29 155

原创 # 微信小程序案例3.5 计时器

本案例练习小程序定时器API，setTimeout做延时显示，实现周期性倒计时，关闭定时器。完成倒计时开始、暂停、重新计时完整业务。拓展任务利用CSS伪元素实现计时框内部背景水印文字。定时器用完务必清除，防止页面卸载之后后台继续运行，造成内存泄漏。

2026-10-16 10:36:02 167

原创微信小程序案例2.2 图片与声音（云开发云存储）

本案例基于微信云开发云存储托管图片和音频资源，使用完成音频播放暂停控制。完成拓展需求，点击图片切换播放倍速，同时控制台输出播放位置、播放速率。云存储把静态资源放到云端，避免图片音频占用小程序代码包大小，满足小程序主包2MB限制。注意区分模拟器与真机差异，模拟器部分音频属性打印存在bug，真机效果为准。

2026-10-13 14:28:02 61

原创 # 微信小程序案例4.4 swiper和switch组件&案例4.6 image组件

swiper是轮播容器，内部只能放置swiper‑item子组件。switch开关组件依靠bindchange捕获切换事件，使用!对布尔值取反，setData更新数据，动态控制swiper组件属性。wx:for循环遍历数组批量生成轮播项，在数组中添加元素即可新增轮播页面。indicator‑dots控制指示点，autoplay控制自动播放，circular实现衔接循环，vertical切换滑动方向。拓展任务完成，新增第四个轮播项西柏坡精神，紫色背景，实现四页轮播效果。本案例学习微信小程序。

2026-10-09 20:19:39 149

原创 # 微信小程序案例4.1 form组件&微信小程序案例4.2 checkbox 和 radio 组件

form表单通过bindsubmit捕获提交事件，表单内input必须配置name属性，通过拿到表单提交数据。button的form‑type属性可以实现提交与重置，会触发form的bindreset事件。input返回的数据为字符串，必须使用parseFloat转换为数字，否则会出现字符串拼接而不是数学计算。业务逻辑必须做输入合法性校验，不满足三角形三边关系时调用wx.showToast提示用户。使用海伦公式完成三角形面积计算，wx:if控制计算结果的显示与隐藏。

2026-10-09 19:38:42 207

原创 # 微信小程序案例3.9 模板

template模板用来封装重复UI片段，实现界面复用，减少重复代码。import引入外部模板文件，is属性指定调用哪一个模板；展开对象语法向模板传递多个字段。import具有作用域，只导入目标文件内部定义template，不会递归导入嵌套import的模板。模板有独立作用域，只能接收data传入的数据，不能直接访问页面data。拓展任务完成，新增olympic奥运冠军模板，展示奥运冠军姓名与参赛项目。

2026-10-08 13:03:18 152

原创 # 微信小程序案例3.8 模块化

模块化可以将公共代码抽离到单独 js 文件，实现代码复用，便于后期项目维护。require 引入外部模块时，相对路径不能写错，…/代表向上一层目录。getApp () 用来读取 app.js 全局的数据，全局数据整个小程序页面都可以访问。拓展任务：通过 CSS 类选择器，为不同模块内容设置不同背景颜色，视觉上区分来源。注意事项：WXSS 代码中不能包含隐藏特殊字符，否则会出现编译报错。

2026-10-08 12:43:25 207

原创微信小程序案例3.4 数据和事件绑定

wxml使用{{}}Mustache语法实现单向数据绑定，数据只能从js逻辑层流向页面视图。对象取值使用对象.属性名；数组取值使用数组[下标]。通过bind:tap绑定按钮点击事件，执行js事件处理函数。修改页面data数据，必须使用this.setData()，直接修改this.data页面不会刷新渲染。完成作业拓展：给student对象增加major专业属性，初始化和setData更新时都可以正常渲染到页面。

2026-09-22 14:34:21 148

原创微信个人小程序备案完整流程（个人笔记工具小程序）

本次课程实操，完整走完个人小程序备案流程，熟悉备案材料填写、信息核验流程，理解互联网信息服务备案相关管理规范。本次备案小程序名称为个人笔记工具，属于课程学习演示项目，服务类目选择【工具 - 备忘录】。注意：个人小程序不能选择社交 - 笔记类目，该类目仅限企业主体，本项目选用工具 - 备忘录，无需额外资质材料。类目选择：个人备忘笔记小程序，选择【工具 - 备忘录】，切勿选择社交类笔记类目，会直接驳回。填写小程序基础信息，填写备案备注，备注需要写明小程序业务内容，并附上个人小程序强制声明。

2026-09-22 14:04:27 219

原创实验3.3 生命周期函数

在app.js和5个tab页面的js文件中编写生命周期回调函数，每个函数使用console.log输出提示信息，同时添加页面分享回调函数。2.点击tab切换页面：离开的页面执行onHide；进入的页面执行onShow；console.log(‘index页面的 onUnload 函数被调用了 – 监听页面卸载’);console.log(‘index页面的 onShow 函数被调用了 – 监听页面显示’);console.log(‘index页面的 onHide 函数被调用了 – 监听页面隐藏’);

2026-09-20 14:34:45 151

2401_88232053的博客