- 博客(32)
- 收藏
- 关注
RSS订阅原创 传感器实验报告
本案例使用小程序设备传感器 API，演示罗盘、加速度计、陀螺仪三种传感器，实现传感器的启动监听、数据实时展示、停止监听。作业扩展需求：新增 canvas 画布，绘制加速度 X、Y、Z 三轴实时波形；晃动手机波形动态变化，真机录屏作为作业附件提交。新建小程序项目，项目名称，选择不使用云服务，不使用模板。2.app.wxss3.pages/index/index.wxml4.pages/index/index.wxss5.pages/index/index.js6.pages/index/in
2026-11-10 13:49:10
163
原创 照相和摄像实验报告
本案例学习小程序媒体 API，掌握从相册选取、相机拍摄图片和视频，在页面渲染媒体资源。作业扩展掌握实现全屏预览，学会利用disabled实现按钮状态控制，根据有无数据动态切换按钮是否可用。理解临时媒体文件的生命周期，区分模拟器与真机能力差异。
2026-11-09 09:57:40
195
原创 数据缓存实验报告
本案例完整学习小程序本地存储的同步、异步两套缓存 API，掌握存、读、获取缓存信息、清空全部缓存。理解异步回调与同步try‑catch异常捕获的编码区别。作业扩展练习实现删除单条缓存，区分 “删除单个 key” 和 “清空全部缓存” 的差异。学会在调试器 Storage 面板观察本地缓存数据，加深对小程序持久化本地存储的理解。
2026-11-09 09:53:28
86
原创 文件操作实验报告
本案例基于小程序FileSystemManager实现本地文件操作，包含写入、复制、读取及获取文件信息功能。通过wx.env.USER_DATA_PATH自动适配路径，确保跨设备兼容性。扩展新增【删除文件】按钮，调用unlink接口删除hello_copy.txt，并反馈删除成功信息。界面美观，逻辑清晰，完整演示了文件管理全流程。
2026-11-04 14:47:05
215
原创 图形变换实验报告
本案例基于小程序Canvas 2D API，实现图形的平移、旋转、缩放与矩阵复合变换，并通过save()/restore()防止状态污染。扩展功能“矩形叠加椭圆”实现正方形与旋转椭圆的重叠绘制，直观展示坐标系变换对绘图的影响，强化对画布变换机制的理解。
2026-11-03 13:45:52
132
原创 案例 5.2 基本绘图实验报告
本案例基于小程序Canvas 2D API实现基础绘图功能，涵盖实心圆、轮廓圆、虚线、文字、渐变、阴影及透明度效果。通过9个按钮分别演示不同绘图特性，界面清晰，交互流畅。扩展功能新增“绘制图片”按钮，点击后加载并渲染图片，页面标题同步更新，完整实现了图形绘制与动态交互。
2026-11-03 13:33:44
94
原创 微信小程序 map 地图组件实战案例
本案例实现微信小程序地图功能，展示3个标记点并支持“选择位置”与“打开位置”操作。通过配置app.json权限及坐标系，调用wx.chooseLocation和wx.openLocation实现选点与导航，结合地图组件完成位置交互。需注意权限申请、图标路径、坐标系匹配及上线接口开通等关键点。
2026-10-30 09:55:39
175
原创 变脸游戏实验报告
本案例基于微信小程序实现变脸小游戏，通过wx.onAccelerometerChange监听手机摇晃，结合点击图片随机切换脸谱，并扩展累计变脸次数统计功能。页面使用防抖机制避免频繁触发，真机测试方可体验摇晃效果。项目涵盖设备传感器、数据绑定、生命周期管理与事件处理，强化了小程序开发中交互逻辑与资源优化的实践能力。
2026-10-28 14:05:57
114
原创 canvas 组件实验报告
本案例基于小程序canvas2D实现自由绘图功能，支持手指滑动绘制红色线条，并通过“改变画笔颜色”按钮在红、绿之间切换。页面包含清空画布功能，结合设备像素比处理与触摸事件监听，确保绘图清晰流畅。核心掌握canvas节点获取、2D上下文操作、路径管理及数据驱动样式切换，实现完整手绘交互体验。
2026-10-28 13:59:13
213
原创 微信小程序 scroll‑view 滚动组件完整实战案例
本文详解微信小程序scroll-view组件的使用，实现纵向与横向滚动效果。通过设置scroll-y、scroll-x及scroll-into-view实现页面初始化定位；绑定bindscrolltoupper、bindscrolltolower和bindscroll事件，实时监控滚动状态。重点解决横向滚动需加white-space:nowrap、id不能数字开头、高度必须设定等常见问题，并通过伪元素实现文字居中。最终完成“阳光灿烂”页面扩展，全面掌握滚动视图核心用法。
2026-10-27 08:11:13
160
原创 视频播放 + 自定义发送随机颜色弹幕
本项目基于微信小程序实现视频弹幕功能，使用video组件结合danmu-list预设弹幕与sendDanmu动态发送，支持随机颜色弹幕。通过wx.createSelectorQuery()获取视频上下文，实现弹幕实时发送。关键点：danmu-btn仅在低基础库（如2.32.3）显示，高版本（如3.17.4）失效，但弹幕功能仍可用。需确保视频地址为HTTPS网络链接，且enable-danmu必须开启。
2026-10-26 10:02:32
120
原创 使用 slider 滑动条调节 RGBA 颜色
本文通过实现一个动态颜色调节的小程序案例，演示了微信小程序中slider组件的综合应用。利用data-*自定义属性与bindchanging事件，结合JS动态属性名[color]，仅用一个函数即可同步控制红、绿、蓝、透明度四个滑块，实时更新rgba()颜色值，实现背景与文字颜色的联动变化。重点掌握setData动态键名、dataset数据获取及rgba颜色函数的使用，提升代码复用性与开发效率。
2026-10-25 08:18:06
193
原创 include 文件引用案例实战
本文介绍微信小程序中<include>文件引用的使用方法，通过将页面拆分为header.wxml、main.wxml、footer.wxml和expand.wxml四个独立文件，实现代码复用与模块化。主页面index.wxml通过<include>引入各模块，并结合wx:if与按钮事件控制扩展内容的显示隐藏。项目强调页面结构清晰、维护便捷，适用于复杂页面的组件化开发。
2026-10-23 09:57:15
146
原创 列表渲染实现九九乘法表
本实验通过微信小程序实现九九乘法表下三角渲染，运用wx:for嵌套循环与wx:if条件渲染，结合wx:for-index获取索引实现奇偶行不同背景色。通过动态class和flex布局完成整齐排版，页面配置横屏显示，并为每个乘法项添加边框。重点掌握列表渲染、条件判断与样式动态绑定，深入理解数据驱动视图机制。
2026-10-20 13:43:20
222
原创 条件渲染与 picker 组件
本实验通过微信小程序实现picker选择器与条件渲染功能，掌握wx:if、wx:elif、wx:else及<block>标签的使用差异，完成颜色选择与动态展示。扩展新增紫色选项，实现数据绑定与事件响应。重点学习app.json配置规范，避免中文符号导致解析错误，深刻理解小程序数据驱动视图的开发逻辑。
2026-10-20 13:34:10
123
原创 图片点击切换音频播放暂停
微信小程序对主包、分包体积有严格限制，主包 / 单个分包不能超过 2M。如果把图片、音频这类大资源直接放到项目本地，很容易造成包体积超限。解决方案就是：把图片、音频上传到微信云开发的云存储，小程序代码里直接引用云存储网络地址，资源不打进小程序安装包，有效压缩包体积。本篇就完整实现一个小案例：页面展示一张宝塔山图片，点击图片切换音频播放 / 暂停，同时完成作业扩展：修改播放速度，每次播放暂停打印播放位置、播放速率到控制台。image组件、事件绑定、页面生命周期onLoad音频上下文、云存储、数据绑定。
2026-10-14 13:13:33
120
原创 自动随机变化的颜色
标题颜色与第一行诗句颜色保持一致。页面加载后每 5 秒自动随机切换文字颜色；点击「改变颜色」按钮可以手动触发变色；控制台打印生成的 4 个十六进制颜色数组。知识点：JS 随机函数、定时器、WXML 动态内联样式、小程序数据绑定setData。这个案例练习了小程序数据绑定、内联动态样式、定时器和 JS 随机数。本次作业扩展点核心思路：复用同一个颜色数组下标，实现标题与首行诗句颜色联动，不管是自动定时还是点击触发，都能同步变化。
2026-10-13 13:55:54
234
原创 计时器实现
本次完成微信小程序计时器小案例，程序打开先显示空白页面，等待 2 秒后展示计时器界面。初始倒计时数值为 60，包含开始计时、停止计时、重新计时三个按钮，同时扩展 CSS 伪元素实现背景水印文字效果。这个小程序练习了小程序定时器相关 API，区分一次性定时器setTimeout和循环定时器。同时练习 CSS 伪元素、定位和层级控制。定时器用完一定要记得清除，避免内存问题。
2026-10-13 13:38:54
182
原创 14 种图片显示模式完整实战
本文详解微信小程序image组件14种mode模式，通过统一容器尺寸与列表渲染实现效果对比。重点区分缩放（如aspectFit、aspectFill）与裁剪模式（如top、bottom right），强调webview引擎对裁剪模式的必要性。实战中以数据驱动视图，提升代码可维护性，避免盲目使用CSS导致图片变形，为真实开发提供高效适配方案。
2026-09-22 13:24:34
355
原创 小程序 checkbox 与 radio 组件实战：动态控制文字样式
本项目实现文字样式动态编辑功能，通过checkbox-group控制加粗、斜体、下划线（多选），radio-group切换字体大小（30rpx~60rpx，含新增30rpx选项）。页面使用动态style绑定，结合bindchange事件实时更新样式。关键点：复选框返回数组，单选框返回字符串；必须包裹在对应组内才能触发事件。通过setData实现视图响应式更新，布局清晰，样式灵活，适用于小程序文本编辑场景。
2026-09-22 13:16:16
86
原创 微信小程序 form 组件案例学习
本案例实现三角形面积计算器，通过form表单组件收集三边长度，校验数据合法性及三角形存在条件，合法则用海伦公式计算面积并展示。支持计算与重置功能，重置后清空所有输入与结果。掌握表单数据获取、setData驱动视图更新、数据校验与状态复位等核心知识点，提升表单类交互开发能力。
2026-09-20 13:37:21
101
原创 swiper 与 switch 组件案例拓展
本实验以“中国精神”为主题，基于微信小程序实现swiper轮播与switch开关的联动控制。通过数据绑定，用四个switch分别控制指示点、自动播放、衔接滑动和竖向滑动，动态调整轮播效果。在原始三页基础上拓展新增“西柏坡精神”轮播项，背景设为紫色，利用wx:for循环自动渲染，无需修改结构。实践深化了对数据驱动视图、组件属性及循环渲染的理解，掌握了轮播组件在实际项目中的灵活应用。
2026-09-20 08:12:25
136
原创 微信小程序 WXML 模板 template 实战案例
本文实现微信小程序中模板的定义与应用：在根目录创建template文件夹，定义学生、老师及奥运冠军三类模板，并通过<import>引入。页面通过<template is="..." data="{{...}}"/>动态渲染3位学生、3位老师及3位奥运冠军信息，使用分割线分隔，标题红色居中。重点掌握template的独立作用域、data传参、is动态绑定及import与include区别，确保路径正确、数据展开无误，避免常见渲染问题。
2026-09-19 19:08:54
125
原创 require 模块引用案例
本案例通过小程序模块化设计，实现四种来源变量与函数的引用：全局模块（app.js）、不同目录模块（common/common.js）、同目录模块（my-index.js）及自身模块（index.js）。通过getApp()和require()分别获取数据，并在页面中渲染。结合CSS为四类内容设置不同背景色，清晰区分模块来源，强化模块化编程理解，提升代码可维护性。
2026-09-19 18:46:35
124
原创 小程序备案全流程教程：从零开始体验备案步骤
本文详细介绍了小程序备案的全流程：从准备身份证、管理员信息等材料，到登录微信公众平台进入备案入口，填写主体与小程序信息，上传材料并提交。审核周期为1-20个工作日，成功后需更新小程序版本。备案免费，信息可修改但需谨慎填写，常见问题如驳回原因已明确说明。全程操作清晰，助力开发者顺利合规上线。
2026-09-18 11:11:52
222
原创 数据和事件绑定
演示了使用{{ }}进行算术、对象、数组等多类型数据绑定，结合bind:tap事件触发modify函数，调用setData()更新数据并自动刷新页面。
2026-09-16 13:13:43
48
原创 吃透应用与页面生命周期函数
本文通过在小程序“创建标签”项目基础上添加生命周期函数日志，系统测试了应用与页面级别的生命周期执行顺序。重点发现：tabBar切换时页面不销毁，仅触发onShow和onHide，不会执行onLoad、onReady或onUnload；而onLaunch仅在冷启动时调用一次。实际开发中应根据场景合理使用各生命周期函数：onLoad用于初始化数据，onShow用于动态刷新，onUnload仅在页面关闭时触发。
2026-09-15 13:47:29
230
原创 使用 app.json 配置 TabBar 实现底部标签页
本项目基于微信小程序开发，通过app.json配置全局页面与自定义tabBar，实现5个标签页。
2026-09-15 13:41:49
194
原创 微信小程序盒模型实战）
<think>我们根据内容生成摘要，≤150字。摘要应该概括文章要点：微信小程序盒模型概念、两种盒模型区别、案例实现和知识总结。注意字数。</think>本文介绍微信小程序中的盒模型，说明所有WXML元素均为盒子，由内容、内边距、边框、外边距构成。重点区分标准盒模型（content-box）与border-box的宽度计算差异，并通过实际案例演示两种盒模型样式，帮助开发者掌握布局与尺寸控制技巧。
2026-09-08 14:17:04
169
原创 字体和文本样式
</think>本案例将微信小程序中内联style样式重构为WXSS类样式，实现样式与结构分离。通过规范kebab-case命名、统一管理样式、扩充滚动内容，提升代码可维护性与复用性，并展示了字体、颜色、对齐等多样式效果，适合实际项目开发。
2026-09-04 20:36:09
325
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人