LLLsir-优快云博客

原创《案例5.3 图形变换》

本案例理解了 Canvas 坐标系变换的核心逻辑，都是修改变换矩阵，搭配状态栈可以实现多个独立图形互不干扰。拓展方向：给图形增加连续变换动画、叠加多个不同图形、增加描边样式、实现拖拽变换等，是小程序海报、签名、画板项目的核心基础。

2026-11-09 09:58:46 176

原创《案例 5.2 基本绘图》

这个案例覆盖了小程序 Canvas 的入门核心：画布初始化、坐标系、基础图元、图片渲染。可以继续拓展：画笔涂鸦、保存画布为图片、缩放裁剪图片、调色板修改画笔颜色等，是小程序图片编辑器、海报生成器的基础。

2026-11-09 09:54:52 171

是微信小程序提供的可滚动容器组件，可以实现纵向滚动和横向滚动，在开发商品横向滑动栏、长列表、分类滑动菜单时使用非常广泛。本次案例实现横向滚动与纵向滚动基础效果，并完成扩展需求：横向滚动项由原来3项增加到4项，掌握scroll-view核心属性与布局要点。index.wxssindex.jsindex.json四、核心知识点讲解核心属性：开启横向滚动，开启后容器内容可以水平滑动；横向滚动必须搭配，子元素设置：开启纵向滚动，必须给scroll-view设置固定高度，否则无法滚动：

2026-11-02 09:55:28 147

原创《案例4.3 slider组件》

bindchange是松开滑块才触发，如果想要拖动过程实时刷新，换成；颜色值支持英文颜色名、十六进制色号；slider组件宽度默认撑满父容器，可以在外层view设置width限制宽度；value值必须在min和max区间内，否则会自动修正。

2026-11-02 09:54:51 214

原创《案例3.6 条件渲染和picker组件》

picker的bindchange只有点确定才触发，切换滚动的时候不会触发；wx:if 多分支不能中间插入其他标签，否则条件分支断裂；数组range里面的文字，必须和条件判断字符串严格一致（区分文字，不能多空格）；新增颜色的时候，数组、判断分支、css样式三处都要同步增加，缺一不可。

2026-10-26 09:56:28 227

原创《案例 2.10 自动随机变化的颜色》

本案例掌握小程序动态样式绑定，学会随机Hex颜色生成与定时器使用。扩展需求将标题与首行诗文绑定同一个颜色变量，实现自动变色、点击变色两种场景下颜色同步效果。动态修改页面样式在前端开发中使用广泛，可用于主题切换、动态特效、交互式UI等场景，是小程序前端交互开发的基础案例。

2026-10-23 10:25:01 123

原创《案例3.5 计时器》

本案例完成小程序计时器基础功能，学习了定时器、数据绑定、CSS图层定位。扩展需求实现了在时间显示区域增加形容时间如流水的背景文字。定时器是前端开发中非常常用的能力，可用于倒计时、秒表、定时任务等场景，是小程序前端动画与定时任务的基础案例。

2026-10-20 13:16:53 189

原创《案例 2.2 图片与声音》

本案例完成小程序图片渲染与音频多媒体开发，掌握音频上下文API。在基础播放暂停之上，扩展倍速播放功能，并在播放暂停事件中打印播放位置与速率。小程序多媒体API适合做有声读物、音乐播放器等场景，是小程序多媒体开发的基础入门案例。

2026-10-20 13:11:00 141

原创案例4.4 swiper和switch组件

swiper：小程序原生轮播容器，必须搭配使用；指示点、autoplay自动播放、circular循环、vertical方向、interval切换间隔、duration动画时长。switch：单选开关组件，bindchange监听切换事件，checked绑定布尔值；小程序数据驱动：修改data必须使用，修改后页面自动刷新；列表渲染wx:for：循环数组批量生成swiper-item，新增轮播项只需要在js数组追加元素，不用重复写标签。

2026-10-09 09:52:25 189

原创案例4.6 image组件

image组件mode是小程序图片展示的核心，日常开发头像、banner、图片列表最常用aspectFill（居中裁剪）和aspectFit（完整展示图片）。本案例一次性演示全部14种模式，通过循环渲染+序号编号，方便学习和对比。在实际业务开发中，优先选用缩放模式；裁剪模式有平台限制，需要谨慎使用。

2026-10-09 09:51:48 165

原创案例4.2 checkbox 和 radio 组件

radio必须放到里面，否则bindchange事件无法正常捕获；checkbox必须放在，才能一次性拿到全部选中项；变量为空字符串时，css属性会自动失效，不影响原有样式；新增30rpx单选框，只需要新增一行，js逻辑不需要改动，代码复用性好。

2026-10-08 20:43:51 145

原创案例4.1 form组件

这个小程序案例完整演示了微信小程序form表单组件的基础用法。form组件收集表单数据，通过提交事件拿到输入值，配合条件校验、数学运算完成业务逻辑；新增重置按钮，使用bindtap绑定自定义事件，调用setData清空数据，实现视图重置。通过这个案例，可以理解小程序数据驱动视图的核心思想，表单提交、事件处理、条件渲染等常用开发能力，适合小程序前端入门练习。

2026-10-08 20:43:20 195

原创案例3.9 模板

姓名：{{name}}</text><text>年龄：{{age}}</text><text>专业：{{major}}</text></view>--教师模板--><text>姓名：{{name}}</text><text>年龄：{{age}}</text><text>授课课程：{{course}}

2026-09-22 13:11:24 107

原创案例3.8 模块化

const myIndexMsg = '来自相同目录下不同模块的变量'return '来自相同目录下不同模块的函数'全局模块app.jsgetApp()获取全局实例，直接读取app内属性与方法，适合全局共享数据。自定义模块导入require("文件路径")加载外部js文件；被导入文件通过对外暴露变量、函数。模块路径规则：跨目录用相对路径../../；同目录可直接写文件名。样式区分：使用不同class绑定不同背景色，实现视觉区分不同模块输出，满足作业第二点要求。

2026-09-22 13:10:00 164

原创微信小程序后台备案流程

备案是小程序上线硬性要求，未备案小程序无法正式发布，开发调试不受影响。最常见驳回原因：证件照片模糊、业务描述和小程序实际功能不一致、负责人短信超时未核验。个人主体备案限制更多，很多经营性业务不能使用个人主体。备案全程免费，不要找第三方付费代办。

2026-09-20 08:24:20 165

原创 3.4 数据和事件绑定

插值表达式{{}}只能写简单表达式，不能写复杂JS语句。直接赋值 this.data.a = 100 不会更新页面，必须使用。对象取值用对象.属性名，数组取值用数组[下标]。本次作业要求：在student结构增加专业属性，初始值与点击修改后的值都做了定义，满足作业要求。项目保留了上一节页面生命周期代码，可同时观察页面生命周期控制台打印日志，实现知识点串联复习。本案例学习小程序数据绑定与事件绑定两大基础核心。data存放页面数据，WXML通过{{}}渲染；

2026-09-20 08:06:56 176

原创案例3.3 生命周期函数

页面生命周期，就是页面从被创建、加载、展示，到隐藏、最后卸载销毁的完整过程。小程序框架自动按顺序调用对应的生命周期回调函数，开发者可以在这些函数里面写业务代码：比如页面加载时请求数据、页面隐藏时保存状态等。onLoad：页面加载。页面创建时执行，只执行一次，可以接收页面跳转传递参数。onShow：页面显示。每次页面出现在屏幕都会执行（切换tab、返回页面都会触发）。onReady：页面初次渲染完成。页面DOM渲染完毕，只执行一次，适合操作页面节点。onHide：页面隐藏。

2026-09-18 10:34:38 132

原创案例3.2 创建标签

本案例学习了微信小程序全局配置app.json、tabBar底部导航实现原理。在原有3Tab案例基础上，新增2个页面，扩展为5Tab页面，掌握多页面注册、底部标签导航开发。小程序的tabBar由框架原生提供，不需要手写JS切换逻辑，配置简单高效，适合多页面应用开发。

2026-09-18 10:20:33 181

原创微信小程序案例 3.1：创建页面和导航

本次实验为微信小程序案例 3.1，主要完成小程序页面创建、底部 tabBar 导航配置，并且新增页面，最终实现一共 5 个页面互相跳转。掌握小程序项目目录结构、app.json 全局配置、pages 页面注册、tabBar 底部导航栏配置，完成代码打包作业提交。通过本次案例，熟悉微信小程序完整目录，理解 app.json 全局配置作用，掌握页面注册、tabBar 底部导航配置，学会页面之间互相跳转。完成 5 个页面开发，掌握小程序基础开发流程，为后续组件开发打下基础。

2026-09-16 15:00:05 106

原创案例2.3盒模型

小程序单位尽量使用rpx，不要混用 px，适配不同手机屏幕。box‑sizing很容易忽略，修改 padding/border 后盒子尺寸变化，优先检查盒模型类型。margin 上下会发生外边距合并，布局时可以改用 padding 或者外层容器规避。新增卡片盒子，margin 控制盒子外部距离，padding 控制文字和边框之间距离，不要搞混。通过本次案例，直观理解两种盒模型的差异。border‑box在实际开发更实用，设置宽高之后，修改边框、内边距不会打乱整体布局。

2026-09-15 13:58:22 102

原创案例2.4 Flex弹性布局

本案例基于微信小程序原生开发，使用Flex 弹性布局完成页面元素排布。Flex 是小程序 WXSS 中最常用的布局方案，相比传统浮动布局，更加灵活，适配移动端屏幕。完成基础 Flex 弹性布局页面；修改第一行布局方向：将默认从左到右水平均匀排布，改为从右到左排布；打包小程序代码作为作业附件；撰写技术博客记录实现思路。开发环境：微信开发者工具，原生小程序框架flex 属性必须写在父容器上，写在子元素不会生效；仅仅改变元素排列顺序，不会改变均匀分布的特性；

2026-09-15 13:51:35 130

原创案例2.1《字体和文本样式设置》改写实践

本文是《微信小程序开发》课程案例 2.1 的改写练习。记录如何将 WXML 中的静态内联样式抽取为 WXSS 的 class，并补充内容使页面支持滚动显示。

2026-09-07 20:33:41 252

2601_96923004的博客