<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[cjs123456777的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/cjs123456777</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; cjs123456777]]></copyright><item><title><![CDATA[微信小程序本地数据缓存实战：同步 & 异步 Storage API 完整解析]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/170437973</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/170437973</guid><author>cjs123456777</author><pubDate>Tue, 10 Nov 2026 14:03:05 +0800</pubDate><description><![CDATA[本文通过实战Demo详解微信小程序本地缓存API，对比同步与异步API的使用场景，完整演示setStorage、getStorage、removeStorage等8个核心接口，并实现删除指定key功能。强调异步API优先原则，避免阻塞主线程，结合开发者工具存储面板直观展示缓存变化，帮助开发者掌握10MB持久化缓存的高效管理方法。]]></description><category></category></item><item><title><![CDATA[# 微信小程序媒体 API 实战：wx.chooseMedia 实现照相与相册选图选视频]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/170436257</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/170436257</guid><author>cjs123456777</author><pubDate>Tue, 10 Nov 2026 13:43:55 +0800</pubDate><description><![CDATA[本文基于微信小程序实战案例，详解wx.chooseMedia与wx.previewImage的使用。通过“照相和摄像”功能实现图片/视频选取、回显及全屏预览，重点演示参数配置、动态按钮禁用逻辑与临时路径生命周期管理。涵盖真机调试、权限处理、多选扩展等开发要点，指导开发者高效迁移旧接口，构建稳定媒体交互体验。]]></description><category></category></item><item><title><![CDATA[微信小程序文件系统实战：FileSystemManager 本地文件读写、复制与删除]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169942197</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169942197</guid><author>cjs123456777</author><pubDate>Wed, 04 Nov 2026 21:21:26 +0800</pubDate><description><![CDATA[本文基于微信小程序原生API，结合Skyline渲染引擎，实现交互式本地文件操作演示。通过FileSystemManager完成文件写入、复制、读取、信息获取与删除等操作，重点讲解沙箱机制、路径规范（使用${wx.env.USER_DATA_PATH}）、API调用要点及模拟器/真机差异等踩坑经验，提供完整代码示例，帮助开发者掌握小程序本地文件处理核心技能。]]></description><category></category></item><item><title><![CDATA[微信小程序 Skyline Canvas 图形变换实战]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169940834</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169940834</guid><author>cjs123456777</author><pubDate>Tue, 03 Nov 2026 13:58:24 +0800</pubDate><description><![CDATA[本文基于微信小程序 Skyline 渲染引擎，详解 2D Canvas 坐标系变换原理与实践。通过交互式演示，完整实现平移、旋转、缩放、矩阵变换及椭圆绘制，梳理 save()/restore() 状态管理、ctx.scale(dpr) 高清适配、ellipse() 参数细节等核心知识点，提供可复用的初始化流程与开发避坑指南，助力前端可视化高效落地。]]></description><category></category></item><item><title><![CDATA[微信小程序 Skyline 2D Canvas 绘图实战：基础图形与图片渲染]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169940291</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169940291</guid><author>cjs123456777</author><pubDate>Tue, 03 Nov 2026 13:50:18 +0800</pubDate><description><![CDATA[本文基于微信小程序Skyline渲染引擎，详解Canvas 2D的初始化流程与核心API，涵盖画布缩放、路径绘制、渐变填充、阴影效果、文本旋转及本地图片异步加载等关键技术。通过构建交互式绘图面板，系统梳理了createSelectorQuery节点查询、ctx.scale高清适配、createImage()异步加载等开发要点，解决了常见渲染模糊、资源路径错误等问题，为Skyline环境下Canvas开发提供完整实践方案。]]></description><category></category></item><item><title><![CDATA[微信小程序 Canvas 2D 自由绘图组件]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169242412</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169242412</guid><author>cjs123456777</author><pubDate>Fri, 30 Oct 2026 09:57:49 +0800</pubDate><description><![CDATA[本项目基于微信小程序Canvas 2D组件实现自由绘图功能，支持触控绘制、清空画布及画笔颜色切换（红/绿）。通过createSelectorQuery获取画布节点，结合设备像素比（dpr）确保绘图清晰。利用touchstart与touchmove事件实现连续线条绘制，设置lineCap和lineJoin提升线条圆润度。代码结构清晰，符合课程要求，是小程序图形绘制的基础实践。]]></description><category></category></item><item><title><![CDATA[微信小程序设备 API 实战：基于加速计实现变脸交互小游戏]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169258253</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169258253</guid><author>cjs123456777</author><pubDate>Fri, 30 Oct 2026 09:56:59 +0800</pubDate><description><![CDATA[本文基于微信小程序wx.onAccelerometerChange API，实现一款支持点击切换与摇晃变脸的交互小游戏。通过监听三轴加速度变化识别摇晃动作，结合随机脸谱切换与累计计数功能，完整演示传感器事件绑定、数据驱动视图及业务逻辑封装。项目采用原生小程序开发，强调真机调试必要性，并提出防抖、事件释放等优化建议，适用于体感交互类场景开发参考。]]></description><category></category></item><item><title><![CDATA[微信小程序 map 组件案例开发]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169237258</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169237258</guid><author>cjs123456777</author><pubDate>Thu, 29 Oct 2026 20:37:32 +0800</pubDate><description><![CDATA[本项目基于微信小程序原生开发，实现地图组件map及位置接口wx.getLocation、wx.chooseLocation、wx.openLocation的综合应用。页面展示包含3个标记点的地图，支持“选择位置”与“打开位置”功能，通过自定义图标与标签增强可视化效果。项目不依赖第三方组件，配置权限并适配自定义导航栏，完整演示了地图定位与交互逻辑，适用于学习与实际场景集成。]]></description><category></category></item><item><title><![CDATA[微信小程序 Video 组件实战：视频弹幕功能开发实践]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169260196</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169260196</guid><author>cjs123456777</author><pubDate>Thu, 29 Oct 2026 20:36:29 +0800</pubDate><description><![CDATA[微信小程序原生video组件内置弹幕功能，支持预设定时弹幕与用户实时发送彩色弹幕，无需第三方库。开发中需注意：在onReady获取VideoContext，避免空实例；随机颜色需补零处理；废弃的控制器按钮应自定义UI替代；输入内容需校验防空。兼容性方面，高版本基础库移除弹幕开关按钮，但核心功能仍可用。建议真机验证、防抖发送、防盗链资源部署，拓展缓存、自定义样式及多端互通等玩法，提升交互体验。]]></description><category></category></item><item><title><![CDATA[微信小程序实践：scroll‑view 滚动容器组件]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169062175</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169062175</guid><author>cjs123456777</author><pubDate>Tue, 27 Oct 2026 10:05:02 +0800</pubDate><description><![CDATA[本文演示了微信小程序中scroll-view组件的纵向与横向滚动实现，通过scroll-into-view和scroll-left实现页面初始化定位，结合bindscrolltoupper、bindscrolltolower等事件监听滚动状态，并利用CSS伪元素::before实现文字居中，避免在WXML中冗余书写。重点解析了滚动容器布局、横向排列关键样式（white-space: nowrap + inline-block）及常见问题排查，如ID命名规范、空格干扰等，完整展示了可复用的滚动视图开发方案。]]></description><category></category></item><item><title><![CDATA[微信小程序实践：使用 Slider 滑块组件结合 rgba 实现动态调色板]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/169061607</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/169061607</guid><author>cjs123456777</author><pubDate>Mon, 26 Oct 2026 10:26:10 +0800</pubDate><description><![CDATA[在微信小程序开发中，`slider` 滑块组件常用于数值调节场景。本文将基于小程序原生框架，利用 `slider`、`data‑*` 自定义属性、ES6 动态对象属性以及 CSS `rgba()` 颜色函数，搭建一个交互式调色演示页面，拖动滑块实时修改页面元素背景与文字颜色，理解表单组件、事件传参与样式动态绑定的核心开发思路。]]></description><category></category></item><item><title><![CDATA[微信小程序 WXML 文件引用：include 片段复用]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/168550643</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/168550643</guid><author>cjs123456777</author><pubDate>Sun, 25 Oct 2026 10:55:21 +0800</pubDate><description><![CDATA[在小程序开发中，会遇到多处页面需要复用相同 UI 片段的场景。`include` 是 WXML 提供的文件引入方式，可以将外部 WXML 片段嵌入到当前页面，实现视图代码复用。本文演示如何使用`include`拆分头部、正文、页脚独立片段，结合条件渲染实现片段的动态显示与隐藏。]]></description><category></category></item><item><title><![CDATA[微信小程序列表渲染：嵌套 wx:for 实现九九乘法表]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/168549659</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/168549659</guid><author>cjs123456777</author><pubDate>Sat, 24 Oct 2026 21:41:55 +0800</pubDate><description><![CDATA[本文基于微信小程序`wx:for`列表渲染语法，使用双层嵌套循环实现九九乘法口诀表；结合`wx:if`条件渲染完成下三角布局，通过动态内联样式实现奇偶行背景色区分，同时为列表添加`wx:key`优化渲染性能，熟悉小程序 WXML 数据驱动视图的开发模式。]]></description><category></category></item><item><title><![CDATA[微信小程序picker 选择器与条件渲染实战]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/168548825</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/168548825</guid><author>cjs123456777</author><pubDate>Fri, 23 Oct 2026 21:50:24 +0800</pubDate><description><![CDATA[本文基于小程序案例，学习`picker`普通选择器、`wx:if`条件渲染、`<block>`虚拟包装标签、input 失焦事件，完成基础案例并扩展增加紫色选项，理解小程序数据绑定与事件驱动开发。]]></description><category></category></item><item><title><![CDATA[微信小程序图片与声音]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/168246895</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/168246895</guid><author>cjs123456777</author><pubDate>Sun, 18 Oct 2026 09:52:36 +0800</pubDate><description><![CDATA[本文基于微信小程序原生框架结合云存储实现多媒体演示案例，将图片与音频资源存放于微信云存储，通过 HTTPS 网络链接进行资源加载，避免静态资源占用小程序包体积。利用`wx.createInnerAudioContext`音频上下文 API，结合布尔状态变量实现点击图片交替完成音频播放与暂停；设置音频播放速率，并在每次交互后向控制台输出音频当前播放位置与播放速率。项目实践小程序 image 组件使用、事件绑定、生命周期、云存储资源引用等知识点，可作为前端开发练习与功能测试验证案例。]]></description><category></category></item><item><title><![CDATA[微信小程序自动随机变化的颜色]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/168246448</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/168246448</guid><author>cjs123456777</author><pubDate>Sat, 17 Oct 2026 16:47:59 +0800</pubDate><description><![CDATA[本文基于微信小程序原生框架开发古诗随机变色页面，利用`setInterval`周期定时器实现页面每 5 秒自动更换文字颜色，通过双层循环算法生成十六进制随机颜色数组，分别为四句诗文设置不同色彩；同时支持按钮手动触发颜色更新，控制台输出颜色数组用于调试。在原有实现基础上复用颜色数组变量，完成标题与首行诗文颜色联动同步，进一步优化页面视觉表现，可用于前端开发练习以及功能测试场景。]]></description><category></category></item><item><title><![CDATA[微信小程序计时器]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/168246220</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/168246220</guid><author>cjs123456777</author><pubDate>Sat, 17 Oct 2026 16:33:17 +0800</pubDate><description><![CDATA[本文基于微信小程序原生框架实现一款倒计时计时器应用，采用 webview 渲染引擎，利用`setTimeout`、`setInterval`、`clearInterval`定时器 API 完成页面延迟渲染、倒计时启动、暂停、重置等交互逻辑。通过状态变量控制计时器运行状态，实现倒计时归 0 后的边界拦截处理；同时借助 CSS 伪元素与绝对定位技术，在不新增 DOM 节点的前提下，为计时面板增加背景水印文字完成视觉增强。项目完整复现业务交互流程，也可作为手工功能测试的练习案例，对正常流程、边界场景开展功能验证。]]></description><category></category></item><item><title><![CDATA[微信小程序 image 组件]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/166370986</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/166370986</guid><author>cjs123456777</author><pubDate>Thu, 24 Sep 2026 10:45:33 +0800</pubDate><description><![CDATA[本文详解小程序 image 组件 14 种显示模式的实战应用，通过 wx:for 循环渲染并结合 renderer: "webview" 配置，实现缩放与裁剪模式的完整展示。项目统一容器尺寸、添加序号与说明，确保布局规整、兼容性强，帮助开发者掌握 mode 属性核心原理及配置要点，避免图片变形、裁剪失效等问题。]]></description><category></category></item><item><title><![CDATA[微信小程序：radio 与 checkbox 组件实现文本样式动态切换]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/166362662</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/166362662</guid><author>cjs123456777</author><pubDate>Thu, 24 Sep 2026 10:44:19 +0800</pubDate><description><![CDATA[本项目基于微信小程序原生框架，通过radio单选与checkbox多选组件实现诗词文本样式动态修改。支持字体大小切换（30rpx~60rpx）及加粗、斜体、下划线等多重样式叠加，结合setData数据绑定与行内样式动态更新，展现数据驱动视图的核心机制。页面采用卡片布局，首行缩进与两端对齐提升阅读体验，兼顾全局与页面独立样式管理。]]></description><category></category></item><item><title><![CDATA[微信小程序 Form 表单组件]]></title><link>https://blog.youkuaiyun.com/cjs123456777/article/details/166360843</link><guid>https://blog.youkuaiyun.com/cjs123456777/article/details/166360843</guid><author>cjs123456777</author><pubDate>Tue, 22 Sep 2026 19:55:18 +0800</pubDate><description><![CDATA[本项目基于微信小程序Form表单组件，实现三角形边长输入、合法性校验、海伦公式面积计算及一键重置功能。通过双向数据绑定与setData()动态更新，完整掌握表单提交、数据校验、数学运算与页面状态管理，适合初学者学习前端交互逻辑与业务流程开发。]]></description><category></category></item></channel></rss>