- 博客(31)
- 收藏
- 关注
RSS订阅原创 5.9传感器
本案例为小程序传感器综合实践，基于罗盘、加速度计、陀螺仪API实现硬件数据实时读取，结合Canvas绘制加速度波形，支持真机动态显示与视频录制。通过启停控制、数据缓存队列与坐标映射，实现三轴加速度曲线滚动可视化，强调资源释放与真机调试必要性，拓展性强，适用于物联网与交互设计教学。
2026-11-10 13:53:22
197
原创 5.6照相和摄像
本案例通过小程序API wx.chooseMedia 实现拍照、相册选图/视频功能，结合自定义导航栏与页面逻辑，完成图片预览、视频播放等交互。关键点包括：使用 disabled 控制按钮状态，动态更新 imagePath 与 videoPath，并通过 wx.previewImage 实现全屏预览。开发中需注意真机调试、临时路径有效期及权限声明。拓展可支持多选上传或云端存储。
2026-11-10 13:33:43
16
原创 文件与信息
本次学习掌握微信小程序本地文件系统基础操作，重点理解用户数据目录与静态资源目录的权限差异。通过同步接口实现文件读取、复制、删除，理清操作流程；针对复制接口的兼容性问题，采用“读取→写入”模拟方案提升稳定性。删除前需判断文件存在性并处理异常，保障程序健壮性。对比同步与异步接口，明确同步适合学习演示，异步更适用于正式项目开发。总结：遵循权限规范，强化状态判断与异常处理，是实现可靠文件操作的关键。
2026-11-05 17:57:46
207
原创 5.3图形变换
本项目基于微信小程序2D Canvas实现图形变换功能，通过save()/restore()隔离变换效果，支持平移、旋转、缩放、矩阵变换及还原操作，并拓展实现矩形叠加倾斜椭圆。利用wx.createSelectorQuery获取画布，处理设备像素比避免模糊，统一使用弧度制参数，确保图形精准绘制。页面布局清晰，按钮控制实时更新标题，直观展示各变换效果，完整呈现Canvas绘图核心逻辑与实践应用。
2026-11-03 14:01:17
110
原创 5.2 基本绘图
本实验学习微信小程序Canvas 2D画布的使用，掌握绘图API实现圆、折线、文字、渐变、阴影、透明度及图片渲染等效果。通过初始化画布、获取上下文、处理设备像素比，实现多类图形绘制。利用save/restore保存状态，避免样式干扰；图片需等待onload加载完成再绘制。实验中解决组件报错、画布初始化失败、图片路径错误等问题，掌握了Canvas核心开发流程，为海报生成、绘图应用奠定基础。
2026-11-03 13:48:49
200
原创 4.9map组件案例
本文通过微信小程序地图组件案例，实现地图展示、标记点添加及位置交互功能。基于腾讯地图底图，配置三个标记点（我的位置、黑龙江东方学院南门、第一学生公寓），并利用wx.chooseLocation、wx.getLocation、wx.openLocation实现选点、定位与导航。重点掌握map组件配置、markers数组使用、本地图片路径规范及app.json权限声明。解决接口调用失败、图标不显示、渲染器报错等问题，总结出地图开发需注意网络连接、坐标系统一（gcj02）与权限配置，提升小程序地图功能开发能力。
2026-10-30 09:57:13
216
原创 4.10 Canvas 组件实现自由绘图
本文介绍微信小程序中使用Canvas 2D实现自由绘图功能，支持触摸绘制、清空画布及四色画笔循环切换。通过createSelectorQuery获取画布上下文，结合dpr缩放解决模糊问题，利用touchstart、touchmove实现流畅绘图，配合beginPath、lineTo、stroke等API完成线条绘制。页面顶部显示标题，按钮触发颜色切换并提示，数据驱动更新画笔样式。案例涵盖核心渲染与事件处理，适用于学习小程序绘图与交互逻辑。
2026-10-29 11:09:41
135
原创 5.1变脸游戏开发实践
本项目为微信小程序变脸游戏，结合川剧文化设计，通过点击或摇晃手机实现脸谱切换，并实时统计变脸次数。基于加速计传感器API实现摇一摇功能，利用setData完成数据绑定与视图更新，掌握页面路由、事件处理、随机逻辑及传感器监听的开启与释放。开发中解决路径错误、模拟器不支持传感器、重复变脸等问题，最终实现流畅交互。项目兼顾技术学习与传统文化传播，具备良好扩展性。
2026-10-29 11:06:28
117
原创 4.8scroll‑view 滚动组件实战
本文详解微信小程序scroll-view组件实战，复现案例4.8并拓展新增“阳光灿烂”横向页面。通过设置webview渲染引擎，实现纵向与横向滚动功能。重点讲解scroll-view核心属性（如scroll-into-view、bindscroll等）及样式配置，强调容器高度、子元素行内块显示与禁止换行对横向滚动的关键作用。项目实现页面加载自动定位第二页，支持多页滑动切换，并在控制台实时输出滚动事件信息。开发中需注意id命名规范、渲染引擎选择及布局兼容性问题，确保滚动效果稳定可用。
2026-10-28 21:44:00
195
原创 4.7 video组件弹幕
本次作业实现微信小程序video组件的弹幕功能，重点解决云存储视频播放难题。因video组件不支持直接使用cloud://fileID，需通过getTempFileURL获取临时https链接才能播放。调试中还遇到npm依赖与组件渲染问题，最终移除weui导航栏以确保稳定。弹幕功能通过视频上下文发送，支持随机颜色与预设弹幕。总结：云存储视频需用临时链接，权限修改需等待缓存更新，真机调试为关键验证方式。
2026-10-28 13:28:07
268
原创 微信小程序实训博客：4.3slider滑动组件与RGB调色案例
本实训通过实现小程序调色器，掌握slider组件、rgba颜色函数及data-*自定义属性的使用。利用一个事件函数响应四条滑动条，动态更新RGB与透明度值，实时渲染背景与文字颜色。通过data-color标记滑块，结合动态属性名语法实现代码复用，并为红色滑动条添加轨道背景色。实验加深了对RGB色彩模型与数据绑定机制的理解，提升了组件化开发能力。
2026-10-27 09:55:16
249
原创 3.10 文件引用
本次实训通过微信小程序的include功能实现页面代码拆分与复用，将头部、正文、页脚及拓展阅读内容分别封装为独立wxml文件，主页面通过include引入并组合展示。结合bindtap事件与wx:if条件渲染，实现“显示/隐藏”拓展内容的交互功能。项目采用绝对路径引用文件，避免加载失败；使用rpx单位确保样式兼容性。实验掌握include仅复制标签内容、不传递模板与脚本的特性，提升了代码可维护性与复用性。
2026-10-26 10:01:32
150
原创 3.7微信小程序列表渲染实战——九九乘法表
本实训通过微信小程序实现九九乘法口诀表，运用wx:for双重循环渲染下三角表格，结合wx:if过滤多余单元格。通过动态绑定class实现奇偶行不同背景色，为每个单元格添加边框样式，并设置横屏布局，提升视觉效果。代码中重点掌握列表渲染、条件渲染与动态样式绑定，解决兼容性问题后，成功实现整洁美观的交互界面，深化了对小程序数据绑定与布局控制的理解。
2026-10-25 13:27:47
162
原创 3.6 渲染与 picker 组件
本文通过一个微信小程序案例，深入解析wx:if条件渲染与picker组件的协同应用。核心在于“适时呈现”——颜色选择触发动态色条变化，数字输入控制色带显隐，展现界面设计的本质：非堆砌功能，而是精准把握“何时做、何时不做”。通过block逻辑包裹、数据驱动视图、规范条件分支等实践，揭示了小程序开发中简洁与严谨的力量。最终指向一个深层理念：好程序是理解“显示与隐藏”之间分寸感的艺术。
2026-10-23 10:49:37
138
原创 2.2图片与音乐
本文分享微信小程序实现图片与音乐播放的实战案例：通过云存储管理大体积资源，避免包大小超限。利用image组件与InnerAudioContext实现点击切换播放/暂停，扩展0.5倍速播放及实时打印播放位置与速率。重点总结三大踩坑经验：云链接过期需重复制、倍速应延迟设置、项目目录层级勿选错。实践掌握数据绑定、事件处理、生命周期及云开发基础，强调动手调试的重要性。
2026-10-22 21:51:08
155
原创 2.10：自动随机变化的颜色
本案例通过微信小程序实现《望庐山瀑布》页面的自动随机变色效果：页面加载时初始化四行诗及标题的随机颜色，每5秒自动更新一次，点击“改变颜色”按钮即时变色，并在控制台输出颜色数组。利用Math.random()与Math.floor()生成十六进制颜色，结合setData实现数据驱动视图更新，掌握页面结构、事件绑定、生命周期与定时器等核心知识点。
2026-10-21 13:31:26
186
原创 3.5 计时器
本文通过实现微信小程序计时器，实战演练了三个核心定时器API：setTimeout（延迟执行）、setInterval（周期执行）和clearInterval（清除定时器）。项目包含开始、停止、重置功能，重点讲解了数据绑定需调用setData、防止重复启动的标志位控制、以及定时器ID的保存与清除。代码简洁，逻辑清晰，是掌握小程序定时器机制的绝佳入门案例。
2026-10-20 14:29:24
107
原创 4.6 image组件
本次实训通过展示青岛风景图的14种image组件mode模式，掌握小程序本地图片引入、循环渲染及webview引擎配置。将图片存于根目录images文件夹，通过wx:for循环实现编号从1开始的动态渲染，结合scroll-view实现滚动浏览。重点区分缩放与裁剪两类模式，理解各模式对图片显示的影响。解决因后缀不匹配导致的图片加载失败问题，总结出路径命名需严格一致，且裁剪模式必须启用webview引擎。最终完整实现14种模式的可视化对比，巩固了小程序基础开发技能。
2026-09-22 08:02:48
145
原创 4.2 checkbox和radio组件
本次实训通过制作诗词样式调整小程序，掌握微信小程序中checkbox与radio组件的使用。利用checkbox-group实现加粗、倾斜、下划线多选功能，radio-group控制字体大小，结合动态style绑定与setData方法实时更新样式。新增30rpx字号选项，仅需添加radio标签即可生效，体现组件灵活性。通过console.log调试事件对象，清晰理解数据结构，有效定位问题。项目功能完整，界面美观，成功实现预期目标。
2026-09-22 07:59:35
144
原创 4.1 form组件
本次实训通过制作三角形面积计算器，掌握小程序form表单组件、input输入框、button按钮及wx.showToast消息提示的使用。利用海伦公式计算面积，并实现三角形合法性校验。新增重置按钮，点击可清空输入与结果，提升用户体验。通过setData更新页面数据，强化了对表单数据获取、类型转换、错误处理及代码复用的理解，提升了小程序开发实践能力。
2026-09-21 18:18:21
180
原创 4.4 swiper和switch组件
本次实训学习微信小程序中swiper轮播与switch开关组件的使用。通过构建“中国精神”轮播页面，实现左右滑动切换四页内容（井冈山精神、长征精神、延安精神、西柏坡精神），并添加四个动态控制开关：指示点、自动播放、循环滑动、竖向滑动。利用setData动态更新数据，实现组件属性实时响应。项目结构清晰，代码规范，运行效果良好，掌握了数据绑定与组件联动的核心原理。
2026-09-21 17:49:41
211
原创 3.9 模板
本次实训学习小程序模板的定义与使用，通过创建学生、老师、书籍三类模板，实现页面样式复用。利用<template>标签定义模板，import引入并is调用，数据通过data传入。项目中通过循环渲染多组数据，结合wxss设置虚线分隔与红色标题，最终实现信息清晰展示。实训掌握了模板的高效复用优势，理解了import与include的区别，提升了代码维护性与开发效率。
2026-09-20 08:02:39
115
原创 3.8小程序模块化
本次微信小程序模块化实训旨在掌握JavaScript模块的导入导出机制，理解模块化编程思想。通过将变量与函数拆分至不同JS文件，实现代码复用。项目中区分全局模块（app.js）、跨目录模块（common.js）、同目录模块（my-index.js）及页面自身模块（index.js），运用require引入并结合相对路径加载，成功在页面中调用各模块数据与函数。页面通过data接收并渲染来自不同模块的内容，以不同背景色直观区分来源。实训加深了对模块化结构、路径管理及代码维护的理解，解决了组件残留引用等实际问题，
2026-09-20 07:58:44
168
原创 3.4 数据和事件绑定
本文通过实操案例解析小程序中数据绑定与事件绑定的核心机制。采用双大括号语法实现数据渲染，支持变量、对象、数组及简单运算；通过bind:tap绑定点击事件，触发逻辑层函数。强调单向数据流：视图层仅展示数据，需通过setData更新页面，且应避免频繁调用、合并更新、仅传变动字段以提升性能。掌握二者关系，可夯实交互开发基础，规避常见踩坑点。
2026-09-19 20:32:29
113
原创 3.3 生命周期函数
通过实操打印日志，深入理解微信小程序应用与页面生命周期函数的触发时机。应用生命周期（onLaunch、onShow、onHide）管理小程序整体状态，页面生命周期（onLoad、onReady、onShow、onHide、onUnload）控制单页行为。关键总结：onLaunch/onLoad/onReady仅执行一次，onShow/onHide可多次触发；Tab切换不触发onUnload，前后台切换同步触发应用与页面回调。掌握顺序有助于精准编写初始化与刷新逻辑，避免常见开发误区。
2026-09-19 20:06:29
219
原创 微信小程序ICP备案
本次实训系统学习微信小程序ICP备案全流程，掌握备案必要性及操作规范。通过准备实名信息、填报主体与服务类目、完成人脸核验与工信部短信验证，历经腾讯初审与通信管理局终审，理解了备案全周期流程。明确区分课程作业与正式上线的差异，强化合规意识，提升前端开发职业素养，为后续独立发布合规小程序奠定基础。
2026-09-18 10:10:49
304
原创 3.2创建标签
【微信小程序实践：打造“中国网事·感动2023”人物展示页】 本文记录了基于微信小程序创建五标签底部导航的完整学习过程。通过配置app.json中的tabBar，实现首页及四位人物页面（贾潮江、朱培娟、莫日发、汪萍）的切换，支持图标与文字状态动态变化。项目中统一使用透明PNG图标，路径配置需精准，避免缓存问题。页面采用滚动视图容器+卡片布局，内容结构一致，样式复用app.wxss。实践不仅掌握了全局配置技巧，更被平凡英雄的故事打动。
2026-09-15 19:37:02
59
原创 3.1创建页面和导航
本案例通过创建展示中国航天成果的小程序，学习微信小程序页面新建与导航跳转。在app.json中注册四个页面（首页及三个子页），使用navigator组件实现页面跳转。首页采用滚动视图，通过Flex布局实现图标、文字、箭头的横向排列，点击跳转至对应详情页。详情页统一使用导航栏和盒状结构，内容区通过app.wxss全局样式定义标题、正文样式，提升一致性。拓展要求新增两个页面并更换图标类型。总结：页面需注册、navigator跳转、Flex布局排版、全局样式复用、组件声明必要。
2026-09-14 19:20:30
42
原创 Flex布局
Flex布局规定了容器如何管理内部多个子元素的排列、对齐、顺序和空间分配。采用Flex布局的元素叫做Flex容器，容器内部的子元素称为Flex项目。容器拥有两根轴，主轴与交叉轴，可以通过修改主轴方向。
2026-09-14 18:44:10
69
原创 2.3盒模型
盒模型概念、案例效果、核心知识点、学习总结。要精炼。注意字数限制。</think>本文介绍了微信小程序盒模型四要素（content、padding、border、margin）及两种计算模式，并通过科学家介绍页面案例，演示了边框样式、内外边距设置及水平居中技巧，强调区分内边距与外边距是避免布局错位的关键。
2026-09-08 14:39:38
322
原创 微信小程序-案例2.1字体与文本样式属性设置
txt‑style类实现隶书字体、蓝色文字、字符间距、两端对齐、首行缩进、绿色下划线、行高等文本效果。- class类选择器：在wxss文件定义样式，标签通过class调用，用于静态样式，复用性好。- style行内样式：适合做动态样式，静态样式不建议使用，会影响渲染性能，不方便维护。2、增加文本内容，使页面内容超出一屏，借助scroll‑view组件实现纵向滚动效果。- index.wxss：页面局部样式，仅当前页面生效，页面样式优先级高于全局样式。- app.wxss：全局样式，作用于小程序所有页面。
2026-09-06 15:42:30
262
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人