- 博客(17)
- 收藏
- 关注
RSS订阅原创 微信小程序slider滑动组件案例实战
控制的是未滑动部分背景是已经滑过的高亮颜色，不要搞混。slider组件宽度默认自适应，外层view控制边距即可。如果想要拖动过程实时响应，把bindchange替换成。打包提交：整个项目文件夹压缩zip，作为作业附件上传。
2026-11-01 19:53:22
194
原创 微信小程序案例2.10 自动随机变化的颜色开发博客
本案例学习了微信小程序原生页面结构、数据绑定、事件绑定和动态样式控制。通过生成随机颜色，结合setData实现标题文字颜色的自动与点击变化，加深了对小程序响应式数据更新的理解。直接复制全文到博客平台发布即可。
2026-10-18 10:02:51
129
原创 微信小程序案例3.5 计时器开发博客
本案例学习小程序定时器，掌握时间格式化、页面生命周期资源清理；扩展练习CSS绝对定位、图层z-index，实现背景文字叠加效果。熟悉小程序事件绑定，理解异步定时器的使用风险与规避方法。直接复制粘贴发布博客即可。要不要我继续写下一个案例博客？
2026-10-17 11:40:50
98
原创 微信小程序案例 2.2 图片与声音开发笔记
本案例学习了小程序本地图片渲染、音频 API 使用，掌握音频播放控制、倍速调节，学会在交互事件中打印调试信息。通过扩展功能加深了对小程序媒体 API 的理解，熟悉事件绑定、生命周期与资源释放。
2026-10-17 11:38:35
189
原创 案例 4.4 微信小程序 swiper 和 switch 组件（swiper 共 4 个滑动项）
本次案例《4.4 swiper 和 switch 组件》，学习小程序轮播swiper轮播组件与开关switch组件。在基础功能上，给 swiper 新增一项，一共 4 个滑动页面，实现轮播切换，使用 switch 控制轮播自动播放。swiper：轮播容器，代表每一个滑动项，常用于首页 banner。autoplay：是否自动轮播interval：自动切换间隔时间bindchange：轮播切换触发事件switch：开关组件，bindchange监听开关状态，布尔值 true 打开，false 关闭。
2026-10-01 15:05:04
197
原创 案例 4.2 微信小程序 checkbox 和 radio 组件（新增 30rpx 字体选项）
本次案例《4.2 checkbox 和 radio 组件》，学习小程序复选框checkbox与单选框radio。在原有基础上新增一个 radio 选项：选中该选项时页面文字字体变为 30rpx，掌握单选、多选组件的数据绑定与动态样式控制。radio 单选框：同一内只能选中一项，绑定bindchange监听选中变化。checkbox 复选框：同一可以多选，绑定bindchange获取选中数组。扩展需求：新增一个 radio 选项，选中后动态修改文字字体大小为 30rpx。动态样式：使用。
2026-09-27 09:36:50
205
原创 案例 4.6 微信小程序 image 图片组件（增加显示模式编号）
本次案例《4.6 image 组件》，学习小程序 image 图片组件，掌握mode图片显示模式。按照作业要求，在每种图片显示模式的文字说明上方，增加图片显示模式的编号，直观区分不同 mode 效果。image 组件：小程序图片标签，src指定图片地址，mode控制图片缩放、裁剪展示方式。常用 mode：scaleToFill：拉伸填满容器，不保持比例aspectFit：保持比例，完整显示图片aspectFill：保持比例，铺满容器，超出部分裁剪。
2026-09-27 09:36:20
207
原创 案例 4.1 微信小程序 form 表单组件（新增重置清空按钮）
本次案例《4.1 form 组件》，学习微信小程序 form 表单组件，实现表单提交功能。在基础表单功能之上，新增重置按钮，点击重置按钮可以清空所有输入框内容。form 组件：表单容器，绑定bindsubmit事件，点击按钮收集表单内所有控件数据。form-type 属性submit：提交表单，触发 bindsubmit 事件reset：重置表单，清空表单全部输入内容需求扩展：增加重置按钮，点击清空输入框数值。form 内部控件必须设置name属性，否则提交时无法获取该控件的值。
2026-09-25 13:55:57
167
原创 案例 3.4 微信小程序数据和事件绑定（新增学生专业属性）
本次案例《3.4 数据和事件绑定》，练习微信小程序数据绑定与事件绑定，在原有学生对象结构基础上，新增专业属性，实现页面展示学生信息，通过按钮事件修改数据。{{变量名}}单向数据绑定，读取 data 数据渲染页面。bindtap用来绑定点击事件。修改 data 必须使用，直接赋值不会刷新页面。可以单独修改对象里面的字段。
2026-09-25 13:55:29
160
原创 微信小程序案例 3.9 模板使用
本次案例学习微信小程序模板 template 的定义与引用。template 可以封装一段 wxml 结构，实现页面复用。作业拓展要求：在原有模板基础上，新增一个模板，展示中国奥运冠军以及对应的比赛项目。小程序 template 模板可以封装重复页面结构，减少重复代码。本次案例在基础模板之上新增奥运冠军模板，循环展示冠军信息。模板适合页面多处重复 UI 的场景，提升代码复用性，是小程序页面开发的基础知识点。
2026-09-22 07:57:43
189
原创 微信小程序案例 3.8 模块化开发
本次案例为微信小程序模块化开发练习。小程序支持将代码拆分到独立 JS 文件，通过require()导入模块、导出内容，实现代码复用。给不同模块输出的信息设置不同背景颜色，区分全局模块、不同目录模块、同目录模块、当前页面模块四块内容。模块化可以把功能代码拆分到多个 JS 文件，减少单文件代码量，提高复用性，便于后期维护。本案例通过不同目录模块演示导入导出，再通过不同背景色区分模块来源，直观理解小程序模块化机制，是小程序开发重要基础知识点。
2026-09-22 07:56:46
86
原创 微信小程序案例 3.3 页面生命周期函数学习
本次案例实现微信小程序页面生命周期函数演示，学习小程序页面从创建、加载、显示、隐藏到卸载的完整生命周期，理解onLoadonShowonReadyonHideonUnload的执行时机。通过案例 3.3 掌握小程序页面生命周期，分清各个回调函数的调用时机。开发时根据业务逻辑，把数据请求写在 onLoad，页面每次显示都要刷新的逻辑写在 onShow。理解生命周期是小程序页面开发的基础。
2026-09-20 15:03:07
82
原创 微信小程序课程设计｜感动人物展示小程序
本项目实现基础多页面小程序开发，掌握app.json页面注册、tabBar 配置，学会处理开发工具的文件缺失警告，完成课程设计要求。微信小程序课程设计前端。
2026-09-20 14:13:52
187
原创 多页面导航与路由跳转实现
在微信小程序开发中，页面管理是核心基础。小程序的所有页面路径都需要在app.json中进行注册，而页面之间的跳转则主要依赖于navigator组件和路由 API。本次作业基于《案例3.1 创建页面和导航》，在完成基础功能之上，我进一步拓展了项目结构，实现了包含首页在内的共 5 个页面的自由跳转，并对比了不同跳转方式的区别。通过本次实战，我熟练掌握了微信小程序的路由系统。navigator组件适合静态链接跳转，代码简洁；而 JS API 适合需要在跳转前进行数据校验或逻辑判断的场景。
2026-09-14 19:46:18
107
原创 微信小程序实战：盒模型案例升级——打造“中国杰出科学家”展示页面
一、 前言 在微信小程序的开发中，视图容器（view）是页面的基础构件，而通过 CSS 的盒模型（Box Model）对其进行样式控制，则是实现精美页面布局的核心。4. 背景色（background-color）：为不同的卡片赋予不同的底色，增加页面的视觉层次感。三、 核心代码展示 在页面样式（WXSS）中，我为三个不同的科学家盒子设置了专属的样式类： /* 1. 王淦昌专属样式（黄色背景 + 红色虚线边框） */ .wang-box { background-color: #ffff00;
2026-09-12 15:21:22
162
原创 使用 Flex 布局实现“中华民族”文字排版及从右到左排列
首先构建 WXML 结构，创建三个主要的容器分别对应“水平均匀布局”、“左右混合布局”和“上下混合布局”。在 WXSS 中，通过设置容器的宽高和背景色，配合 Flex 属性完成基础的排版。对于第二、三部分的混合布局，采用了 Flex 嵌套的方式。外部容器控制整体流向，内部子容器再4次启用 Flex 布局来处理具体的文字块堆叠，从而实现了复杂的图文排版效果。属性，我掌握了如何灵活控制元素的排列顺序，这比传统的浮动布局更加高效和直观。在未来的开发中，我将更多地使用 Flex 布局来解决复杂的页面适配问题。
2026-09-12 15:05:06
144
原创 # 微信小程序字体和文本样式设置——style 与 class 的正确使用
<think>我们根据内容生成≤150字的摘要。注意摘要要简洁，涵盖关键点：静态样式用class，动态用style，性能；样式作用域；class命名规范；滚动。控制在150字内。</think>微信小程序中，静态样式应使用class定义于wxss文件以提高性能，动态样式才用style属性；页面wxss优先级高于app.wxss全局样式；class命名需用横杠连接，避免驼峰；通过scroll-view可实现内容滚动。
2026-09-05 15:33:28
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人