<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[zcmdcsdn_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/zcmdcsdn_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zcmdcsdn_]]></copyright><item><title><![CDATA[用 wx.chooseMedia 做照相和摄像（附预览图片扩展）]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170422346</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170422346</guid><author>zcmdcsdn_</author><pubDate>Tue, 10 Nov 2026 11:13:21 +0800</pubDate><description><![CDATA[配 .scrollarea { flex: 1 }，是为了让内容超出屏幕时能在 scroll-view 内部滚动，而不是整页拖动。current 是打开预览时默认显示的那张，urls 是数组。一个 scroll-view 包一个 .box，里面五个组件，顺序是：标题 → 获取图片按钮 → 预览图片按钮（作业新增）→ image → 获取视频按钮 → video。关键点：sourceType 里同时写 album 和 camera，点击按钮时微信才会从底部弹出"拍摄 / 从相册选择 / 取消"。]]></description><category></category></item><item><title><![CDATA[文件复制与删除功能实现]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170417191</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170417191</guid><author>zcmdcsdn_</author><pubDate>Tue, 10 Nov 2026 10:42:20 +0800</pubDate><description><![CDATA[通过本次代码实现，我们直观看到高层文件操作的系统调用封装。操作系统屏蔽了磁盘扇区、文件分配表等底层细节，给应用程序提供简单易用的 API。文件复制本质是数据的读取 + 写入；文件删除只是解除文件名和磁盘数据块的映射，并不是立刻抹除数据。]]></description><category></category></item><item><title><![CDATA[ Canvas 2D 图形变换]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170342026</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170342026</guid><author>zcmdcsdn_</author><pubDate>Mon, 09 Nov 2026 10:42:30 +0800</pubDate><description><![CDATA[整个工程一共 9 个文件，真正有逻辑的只有 pages/index/index.js 里那六个方法：drawing、clear、translate、rotate、scale、transform、reset、rectEllipse。wxml 和 wxss 负责排版，画布部分只有三行样式。]]></description><category></category></item><item><title><![CDATA[微信小程序 Canvas 2D 绘图实战：从圆、虚线到图片绘制]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170340090</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170340090</guid><author>zcmdcsdn_</author><pubDate>Mon, 09 Nov 2026 10:18:10 +0800</pubDate><description><![CDATA[真正容易翻车的不是绘图 API，而是四个细节：节点获取方式、设备像素比、绘图状态残留、图片的异步加载。把这几处处理好，案例里剩下的 9 个按钮本质上只是调用不同的 CanvasRenderingContext2D 方法。]]></description><category></category></item><item><title><![CDATA[Canvas 实现自由绘图｜附扩展切换画笔颜色完整实战]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170200504</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170200504</guid><author>zcmdcsdn_</author><pubDate>Fri, 06 Nov 2026 21:50:28 +0800</pubDate><description><![CDATA[手机有设备像素比 dpr，如果不做缩放处理，画出来的线条会模糊，所以要把画布宽高乘以 dpr，再调用。本案例完整实现课程作业：基础自由绘图 + 扩展切换画笔颜色，复制全部代码即可直接运行体验小程序画板。初始画布为蓝色背景，默认画笔红色；点击切换按钮后画笔变为绿色，可继续涂鸦书写文字图案。不是 dom 对象，必须通过。本案例基于微信小程序。]]></description><category></category></item><item><title><![CDATA[变脸游戏5.1]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170146250</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170146250</guid><author>zcmdcsdn_</author><pubDate>Thu, 05 Nov 2026 18:03:11 +0800</pubDate><description><![CDATA[原题基础要求只有点击 + 摇晃变脸，我额外增加了： ✅ 累计变脸次数动态统计（本题 20 分扩展项） ✅ 去重逻辑：不会随机到和当前一样的脸谱 ✅ 页面销毁关闭传感器，优化性能 ✅ 友好文字提示。注意：图片需要自己准备 5 张脸谱放到 images 文件夹，文件名对应代码里的路径。作业要求：基础变脸 + 累计变脸次数统计，代码打包提交 + 发布技术博客。]]></description><category></category></item><item><title><![CDATA[扩展三个 marker 标记点，微信小程序地图开发]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170054006</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/170054006</guid><author>zcmdcsdn_</author><pubDate>Wed, 04 Nov 2026 22:39:37 +0800</pubDate><description><![CDATA[本次项目为 uni-app 前端开发课程教材案例 4.9 地图组件实战作业。原教材案例仅实现基础地图展示与少量标记点功能，功能较为单一。根据课程作业扩展要求，我在原有案例基础上自主扩展实现 3 个独立 Marker 标记点位，完善点位标注、点击交互、弹窗提示、地图渲染等全套功能。本项目基于开发，通过微信小程序模拟器运行调试，无需复杂后端接口，纯前端即可完成地图渲染与点位交互，非常适合新手入门小程序地图开发。保留官方基础地图组件所有原生功能成功扩展至 3 个 Marker 标记点位，完全满足作业扩展要求。]]></description><category></category></item><item><title><![CDATA[scroll‑view 组件案例实验]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/169825329</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/169825329</guid><author>zcmdcsdn_</author><pubDate>Mon, 02 Nov 2026 10:14:36 +0800</pubDate><description><![CDATA[scroll‑view 是小程序实现局部滚动的组件，区别页面整体滚动。纵向必须设置高度；横向要处理禁止换行和行内块布局。scroll‑into‑view 可以实现页面加载自动滚动到指定模块。bindscroll 事件会高频触发，业务中不要在里面写过重逻辑。作业拓展：在横向滚动中增加新的 view，配合 css 伪类完成新增页面，实现多页面横向滑动效果。]]></description><category></category></item><item><title><![CDATA[slider 滑动选择器组件（RGBA 调色）]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/169257975</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/169257975</guid><author>zcmdcsdn_</author><pubDate>Tue, 27 Oct 2026 13:54:43 +0800</pubDate><description><![CDATA[本次学习微信小程序原生 slider 滑动组件，完成调色小程序作业。程序一共包含 4 条滑动条，分别控制红色、绿色、蓝色以及透明度，拖动滑块可以实时改变下方文本区域的背景色和文字颜色。按照作业额外要求，对第一条红色滑动条设置黄色轨道背景，用来做视觉区分。通过这个案例可以掌握滑动组件使用、data‑* 自定义属性、事件传参、WXML 动态样式绑定等基础知识点。slider 是小程序提供的表单类滑动选择组件，用户可以拖动圆点来改变数值。value：保存滑块当前的数值；max：规定滑块可以调节的最大数值；]]></description><category></category></item><item><title><![CDATA[文件引用 include 实现内容显示隐藏]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/169143938</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/169143938</guid><author>zcmdcsdn_</author><pubDate>Mon, 26 Oct 2026 10:14:20 +0800</pubDate><description><![CDATA[在微信小程序开发过程中，如果把所有页面内容全部写在同一个 wxml 文件中，代码会十分冗长杂乱，后期修改维护非常麻烦。小程序提供了include文件引用功能，可以将页面拆分成多个独立的片段文件，在主页面按需引入，实现代码复用。本次为课程作业案例，除基础文件引用之外，增加按钮控制拓展内容的显示与隐藏。include 文件引用是小程序模块化开发的基础手段，把页面拆分成多个小文件，代码结构更加清晰，方便后期复用与修改。]]></description><category></category></item><item><title><![CDATA[微信小程序｜图片与音频播放案例，实现倍速播放、播放位置日志打印]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168882538</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168882538</guid><author>zcmdcsdn_</author><pubDate>Fri, 23 Oct 2026 20:18:50 +0800</pubDate><description><![CDATA[一是支持音频切换慢速、快速播放；二是点击播放、暂停时，在控制台自动打印音频当前播放位置和播放速率，用来观察音频想关接口。本次是小程序媒体基础案例，原本功能是展示图片、实现音频播放暂停。按照作业要求做了两处功能拓展；]]></description><category></category></item><item><title><![CDATA[使用 wx:for 嵌套列表渲染实现九九乘法表]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168549886</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168549886</guid><author>zcmdcsdn_</author><pubDate>Tue, 20 Oct 2026 14:19:21 +0800</pubDate><description><![CDATA[本次基于微信小程序原生开发，利用wx:for 列表渲染嵌套循环、wx:if 条件渲染实现九九乘法口诀表。在基础案例之上完成作业扩展：实现奇数、偶数行区分不同背景色，并且每个乘法算式单元格增加边框效果，页面设置横屏展示，使用 Flex 弹性布局完成排版。实验环境：微信开发者工具，不使用云服务，不使用模板，渲染引擎设置为webview。wx:for 列表渲染：支持嵌套循环，可以循环数字数组模拟行列；指定循环变量名，拿到循环索引。wx:if 条件渲染：按需渲染节点，本案例j<=i。]]></description><category></category></item><item><title><![CDATA[条件渲染与 picker 选择器组件]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168549021</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168549021</guid><author>zcmdcsdn_</author><pubDate>Tue, 20 Oct 2026 14:02:45 +0800</pubDate><description><![CDATA[掌握小程序picker选择器组件的基本使用，理解选择事件。掌握条件渲染以及<block>虚拟节点的用法。掌握input输入框bind:blur失去焦点事件，实现数字条件显示隐藏元素。完成功能扩展：在原有红、绿、蓝三色基础上增加紫色选择项。实验环境：微信开发者工具，新建项目，不使用云服务，不使用模板，渲染器设置 webview。WXSS 样式代码，必须使用英文半角，中文全角短横线会报编译错误。navigation‑bar 不属于小程序原生组件，课件中是自定义组件，直接删除，否则会报错。]]></description><category></category></item><item><title><![CDATA[标题与首行文字同步变色]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168432065</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168432065</guid><author>zcmdcsdn_</author><pubDate>Mon, 19 Oct 2026 10:47:22 +0800</pubDate><description><![CDATA[这个小案例主要用来熟悉小程序定时器 API，区分一次性定时器setTimeout和循环定时器。定时器使用完毕记得清除，防止内存泄漏；不要单纯依靠定时器开关控制业务，搭配状态变量做逻辑拦截；复制粘贴代码带来的隐形特殊字符，是小程序开发高频报错来源；CSSposition定位配合z‑index可以轻松实现图层叠加，水印、背景文字都可以用这套思路。]]></description><category></category></item><item><title><![CDATA[计时器案例（定时器 setInterval/setTimeout 综合应用）]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168429558</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/168429558</guid><author>zcmdcsdn_</author><pubDate>Mon, 19 Oct 2026 10:25:03 +0800</pubDate><description><![CDATA[本次实现微信小程序计时器小案例，主要练习小程序定时器setTimeoutAPI 使用。业务需求：小程序启动先展示空白页面，2 秒之后渲染计时器界面；初始倒计时数值 60；具备开始计时、停止计时、重新计时三个按钮；倒计时到 0 之后，点击开始、停止按钮不会继续变化；点击重新计时恢复到 60。作业扩展要求在计时数字框内增加背景文字，模拟时光流逝效果。开发环境：微信开发者工具，新建项目选择不使用云服务、不使用模板，渲染器配置为 webview。这个案例主要熟悉小程序定时器 API，区分一次性定时器。]]></description><category></category></item><item><title><![CDATA[image 组件 14 种图片显示模式]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/167275835</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/167275835</guid><author>zcmdcsdn_</author><pubDate>Thu, 08 Oct 2026 15:27:46 +0800</pubDate><description><![CDATA[每个对象包含两个属性，`mode`存放 image 的显示模式字符串，`text`存放该模式的中文解释文字。5. **作业新增编号逻辑**：wx:for 自带`index`下标，下标从 0 开始，所以使用`index+1`，实现编号从 1 到 14 依次展示。配置`wx:key`消除开发工具循环警告。6. 绑定文本说明`item.text`，image 标签动态绑定`src`图片地址和`mode`显示模式。`wx:for`用于循环渲染数组，循环内部自带变量`index`代表数组下标，下标从 0 开始。]]></description><category></category></item><item><title><![CDATA[微信小程序 checkbox 和 radio 组件案例学习]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166491992</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166491992</guid><author>zcmdcsdn_</author><pubDate>Wed, 23 Sep 2026 20:42:41 +0800</pubDate><description><![CDATA[1. **checkbox-group + checkbox 复选框组**`checkbox-group` 作为复选框的容器，通过 `bindchange` 绑定切换事件。当勾选或者取消勾选复选框时，触发绑定的事件函数，`e.detail.value` 返回一个数组，数组里面存放所有被选中复选框的`value`值。2. **radio-group + radio 单选框组**`radio-group` 是单选框容器，同样使用`bindchange`监听选择变化。2. **点击复选框、单选框没有任何效果**]]></description><category></category></item><item><title><![CDATA[微信小程序 form 组件实战｜三角形面积计算器]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166491893</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166491893</guid><author>zcmdcsdn_</author><pubDate>Wed, 23 Sep 2026 20:35:01 +0800</pubDate><description><![CDATA[完成课后作业新增重置按钮，完整可运行源码。点击`form‑type="submit"`按钮，form 组件收集内部所有带`name`属性组件的值，通过`bindsubmit`触发事件，数据放在`e.detail.value`对象。<input type="digit" placeholder="请输入三角形第一条边长" name="a" focus="true" value="{{sideA}}"/>> 文章标签：`微信小程序` `form组件` `input` `button` `海伦公式`]]></description><category></category></item><item><title><![CDATA[微信小程序 swiper 与 switch 组件实战]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166363133</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166363133</guid><author>zcmdcsdn_</author><pubDate>Tue, 22 Sep 2026 14:26:02 +0800</pubDate><description><![CDATA[这个案例演示小程序组件数据双向绑定，通过开关组件动态控制轮播组件属性。switch开关触发事件 → setData 更新 data 数据 → wxml 插值表达式把数据绑定到 swiper 组件属性，页面实时刷新。本作业在原有基础上扩展为 4 个轮播条目，加深对 wx:for 列表渲染的理解。]]></description><category></category></item><item><title><![CDATA[生命周期函数实战，看懂 App 与 Page 生命周期执行顺序]]></title><link>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166361626</link><guid>https://blog.youkuaiyun.com/zcmdcsdn_/article/details/166361626</guid><author>zcmdcsdn_</author><pubDate>Tue, 22 Sep 2026 13:57:10 +0800</pubDate><description><![CDATA[App 生命周期表格函数执行次数触发时机onLaunch仅 1 次小程序冷启动初始化onShow多次小程序显示（启动、后台恢复）onHide多次小程序退到后台Page 页面生命周期表格函数执行次数触发时机onLoad页面仅 1 次页面加载，可以获取 options 参数onReady页面仅 1 次DOM 渲染完成，可操作视图onShow可多次页面变为可见（Tab 切换、后台恢复）onHide可多次页面被隐藏onUnload页面销毁才执行关闭页面销毁；]]></description><category></category></item></channel></rss>