- 博客(31)
- 收藏
- 关注
RSS订阅原创 传感器实现
本文实现微信小程序中加速度计、罗盘与陀螺仪传感器的实时数据采集与波形绘制。通过wx.startAccelerometer监听加速度数据，动态更新X、Y、Z轴波形，并利用Canvas实现60fps平滑滚动显示。结合requestAnimationFrame优化渲染性能，确保波形流畅。同时支持启动/停止传感器及视频录制功能，完整呈现多传感器协同应用效果。
2026-11-12 11:05:42
13
原创 数据的缓存
本文实现微信小程序中数据缓存的八大操作：异步/同步存储、获取、清空及删除指定key，通过全局变量管理输入内容，结合wx.setStorage、wx.getStorageSync等API完成数据持久化。代码涵盖错误处理与状态反馈，界面实时展示操作结果，完整验证了本地缓存功能的可用性与稳定性。
2026-11-10 17:21:53
193
原创 照相和摄影
本文通过微信小程序的wx.chooseMedia接口，实现了从相册或相机中选择图片和视频的功能。代码分别封装了chooseImage和chooseVideo方法，支持多图选择、拍摄与相册选取，并添加了预览功能。成功完成拍照、录像及本地文件路径获取，具备良好的用户体验与扩展性。
2026-11-10 14:01:46
184
原创 小程序文件操作
本文实现微信小程序中的文件操作功能，包括写入、复制、读取、获取文件信息及删除文件。通过wx.getFileSystemManager()调用API，结合用户输入与路径管理，完成文件的增删改查。代码逻辑清晰，具备错误处理机制，有效保障操作安全性与用户体验，成功验证了小程序本地文件管理能力。
2026-11-04 14:15:09
206
原创 小程序图形变化
本文通过微信小程序实现图形变换功能，包括平移、旋转、缩放、矩阵变换及还原操作。利用Canvas API结合ctx.save()与ctx.restore()保持坐标系状态，成功绘制并动态变换黄色矩形。扩展部分实现矩形叠加椭圆效果，通过ellipse()方法精确控制椭圆位置与旋转。代码修正了PPT中的ID错误，确保渲染正确。最终完成多种图形变换演示，验证了Canvas绘图的灵活性与实用性。
2026-11-03 13:44:12
144
原创 小程序基本绘图
本文实现微信小程序中基于Canvas的多种绘图功能，包括清空画布、绘制实心圆与轮廓圆、虚线、端点交点样式、文字渲染、圆形渐变、阴影矩形及半透明图形。通过wx.createSelectorQuery获取Canvas上下文，并处理像素比适配问题。代码修正了PPT中的笔误（如setLineDash、fillStyle等），并补充了绘制本地图片的逻辑，完整演示了2D Canvas的核心绘图能力，成功实现基本绘图功能。
2026-11-03 13:34:58
84
原创 变脸游戏的实现
本文实现了一个基于微信小程序的“变脸”小游戏。通过随机切换四张不同脸谱图片，结合摇一摇传感器触发，实现动态换脸效果。使用国内稳定CDN防止防盗链问题，配合CSS强制图片尺寸与边框样式，确保显示效果。通过onAccelerometerChange监听设备加速度，防抖处理避免误触，提升用户体验。最终成功实现点击或摇动均可换脸，并显示更换次数，功能完整、交互流畅。
2026-10-30 08:28:36
42
原创 canvas组件
本文实现了一个简易的微信小程序画板功能，通过Canvas 2D API完成触摸绘图，支持红、绿、蓝、黑四种颜色切换。代码中处理了高清屏适配问题，使用wx.createSelectorQuery获取画布上下文，并在paintStart和paintMove中实现路径绘制。新增changeColor方法实现颜色循环切换，配合clear清空画布，完整实现了基础绘图功能。
2026-10-29 19:27:46
68
原创 map组件
本文展示了微信小程序中地图组件（map）的实现方法，通过绑定经纬度、标记点及显示定位功能，结合按钮实现“选择位置”与“打开位置”交互。代码结构清晰，配合WXSS样式美化界面，成功实现地图可视化与用户操作联动，验证了map组件在实际应用中的可行性与便捷性。
2026-10-29 19:21:41
59
原创 video组件
本文实现了一个微信小程序视频弹幕功能，通过wx.createSelectorQuery()获取视频上下文，结合sendDanmu()方法发送随机颜色弹幕。利用getRandomColor()生成十六进制颜色值，确保弹幕色彩多样。页面布局采用flexbox，支持响应式显示，用户输入弹幕内容后可实时发送，提升互动体验。成功集成video组件并实现动态弹幕功能。
2026-10-28 14:34:41
141
原创 scroll-view组件
本文实现了微信小程序中滚动事件的监听功能，通过upper、lower、scroll_y和scroll_x四个事件分别响应滚动至顶部/底部、纵向及横向滚动。配合CSS样式设置容器边距、内边距、边框及标题样式，成功构建了具备交互反馈的滚动界面。整体实现简洁有效，满足基础滚动交互需求。
2026-10-27 11:07:44
127
原创 slider组件
本文通过WXML与WXSS实现颜色滑动调节功能，利用slider组件分别控制红、绿、蓝及透明度值，实时更新rgba颜色并显示在颜色块中。通过绑定bindchanging事件动态响应变化，结合样式设置实现文字与背景色的自适应对比。成功展示了slider组件在交互式颜色选择中的应用，代码简洁高效，界面美观实用。
2026-10-26 20:11:05
204
原创 文件引用实现
本文通过WXML的<include>标签实现页面模块化，将头部、主体、尾部及扩展内容分文件管理，结合wx:if条件渲染动态显示/隐藏扩展区域。通过绑定bindtap事件控制按钮交互，配合CSS样式美化布局与按钮外观，最终实现结构清晰、可维护性强的页面设计，成功完成文件引用与动态内容展示。
2026-10-25 13:13:26
200
原创 列表渲染和九九乘法表
本文通过WXML与WXSS实现九九乘法表的动态渲染，利用wx:for循环嵌套生成表格，结合奇偶行背景色区分（蓝/橙），并设置粉色边框容器与独立格子边框，优化布局与视觉效果。通过white-space: nowrap防止文字换行，确保排版整齐，最终在微信小程序中呈现美观、可滚动的九九乘法口诀表。
2026-10-23 08:06:51
83
原创 条件渲染与picker组件
本文实现了一个微信小程序页面，包含自定义导航栏、颜色选择器（Picker）和输入框。通过绑定数据动态控制颜色条显示，支持红、绿、蓝、紫四种颜色，并可手动输入数值调整颜色条数量。代码结构清晰，使用WXML与WXSS配合，实现了交互式颜色配置功能。
2026-10-20 17:45:11
157
原创 自动随机变化的颜色
本文实现了一个小程序页面，通过JavaScript随机生成四种十六进制颜色，并动态更新界面。页面初始化时自动触发一次颜色生成，随后每5秒自动切换颜色，用户也可点击按钮手动更改。结合WXML与WXSS，实现了美观的滚动布局与自定义导航栏。代码逻辑清晰，成功达成颜色随机变化的交互效果。
2026-10-18 19:04:07
67
原创 计时器实现
本文实现了一个功能完整的计时器小程序，通过WXML定义界面结构，WXSS实现自定义导航栏与美化样式，结合JavaScript逻辑控制计时开始、停止与重置。利用伪元素添加“逝者如斯夫”背景文字增强视觉效果，并通过相对定位与层叠顺序实现动态显示。整体布局合理，按钮颜色符合设计要求，成功完成计时器核心功能及界面优化。
2026-10-18 18:56:01
164
原创 image组件
本文通过WXML与WXSS结合，展示了<image>组件在微信小程序中不同mode属性的缩放与裁剪效果。代码定义了多种模式（如scaleToFill、aspectFit、aspectFill等），并配合样式实现清晰布局。每种模式均配有文字说明，直观呈现图片显示差异，有效演示了图像处理的灵活应用，成功实现了image组件的多样化使用。
2026-09-23 11:14:00
179
原创 swiper和switch组件
本文通过微信小程序实现swiper组件的动态控制，结合switch开关实现指示点、自动播放、衔接滑动及方向切换功能。配合自定义样式类与文本内容扩展（如“西柏坡精神”），完成界面交互与视觉美化。代码结构清晰，有效运用setData更新数据，实现组件灵活配置，成功融合swiper与switch组件，提升用户体验。
2026-09-23 11:11:21
176
原创 checkbox和radio组件
本文通过微信小程序实现字体样式动态设置：利用checkbox-group控制加粗、斜体、下划线，radio-group选择字号大小。通过事件监听与setData更新视图，结合WXML与WXSS完成样式实时渲染，成功实现交互式文本格式化功能。
2026-09-22 13:44:02
207
原创 form组件
本文展示了一个基于微信小程序的三角形面积计算功能，通过form组件获取用户输入的三边长度，利用海伦公式计算面积，并验证三角形有效性。代码中实现了输入校验、错误提示及结果动态显示，确保用户输入合法后才进行计算，提升了交互体验。
2026-09-22 13:19:29
126
原创 使用模板显示内容
本文通过微信小程序模板机制，分别定义student、teacher和olympic模板，实现学生、教师及奥运冠军信息的结构化展示。在index.js中配置数据，并在wxml中调用对应模板，有效复用代码，提升开发效率。成功实现多类型数据的清晰呈现，体现了模板在页面组件化中的优势。
2026-09-21 16:03:13
118
原创 模块化实现
本文通过小程序项目展示模块化开发效果，实现跨目录模块引用。通过require引入common.js、my-index.js及全局App实例，成功调用各模块的变量与函数，数据渲染至页面，验证了模块化设计的可行性与高效性。
2026-09-21 15:53:41
169
原创 生命周期函数
本文展示了微信小程序中页面与应用级别的生命周期函数调用顺序。通过在app.js和两个页面（index、zhupeijuan）中分别实现onLaunch、onShow、onHide、onUnload等回调函数，清晰呈现了小程序从启动、页面加载、渲染、显示、隐藏到卸载的完整生命周期流程，便于开发者理解各阶段的执行时机。
2026-09-18 19:38:50
155
原创 微信小程序备案流程实操记录
本文详细记录了个人微信小程序ICP备案的完整流程：需具备已注册的小程序账号、身份证及人脸核验能力，通过微信公众平台进入备案入口，填写主体与业务信息，完成人脸识别与承诺书确认后提交。备案经腾讯初审及通信管理局终审，审核通过后即可上线发布。强调测试号无法备案，备案为上线必经步骤。
2026-09-17 11:25:13
77
原创 数据和事件绑定
本文展示微信小程序中多种数据绑定效果，包括算术运算、对象及数组绑定，并通过按钮触发数据修改。代码实现简洁，利用WXML的双大括号语法动态渲染数据，配合CSS实现流畅滚动与样式美化，直观呈现数据绑定的灵活性与实用性。
2026-09-16 11:23:15
147
原创 创建页面和导航
本文展示了一个生活文集页面的实现效果，通过WXML与WXSS构建了包含“运动健身”“旅行随笔”“美食日记”“摄影集”四类内容的导航列表。页面采用简洁的卡片式设计，支持点击跳转至对应子页面，搭配图标与箭头增强交互体验。代码结构清晰，样式美观，实现了良好的页面布局与功能导航，成功完成页面开发与跳转逻辑。
2026-09-15 14:04:55
82
原创 flex弹性布局
本文通过WXML与WXSS代码展示Flex弹性盒模型的三种布局效果：水平均匀布局（反向排列）、左右混合布局及上下混合布局，结合flex-direction、flex-grow等属性实现灵活排布，直观演示了Flex在响应式设计中的强大功能。
2026-09-14 19:28:12
73
原创 微信小程序字体和文本样式属性实战
本次作业练习微信小程序文本样式，使用scroll-view,text-indent,font-family等属性完成页面排版。
2026-09-06 20:59:07
19
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人