- 博客(29)
- 收藏
- 关注
RSS订阅原创 用 wx.chooseMedia 做照相和摄像（附预览图片扩展）
配 .scrollarea { flex: 1 }，是为了让内容超出屏幕时能在 scroll-view 内部滚动，而不是整页拖动。current 是打开预览时默认显示的那张，urls 是数组。一个 scroll-view 包一个 .box，里面五个组件，顺序是：标题 → 获取图片按钮 → 预览图片按钮（作业新增）→ image → 获取视频按钮 → video。关键点：sourceType 里同时写 album 和 camera，点击按钮时微信才会从底部弹出"拍摄 / 从相册选择 / 取消"。
2026-11-10 11:13:21
189
原创 文件复制与删除功能实现
通过本次代码实现，我们直观看到高层文件操作的系统调用封装。操作系统屏蔽了磁盘扇区、文件分配表等底层细节，给应用程序提供简单易用的 API。文件复制本质是数据的读取 + 写入；文件删除只是解除文件名和磁盘数据块的映射，并不是立刻抹除数据。
2026-11-10 10:42:20
130
原创 Canvas 2D 图形变换
整个工程一共 9 个文件，真正有逻辑的只有 pages/index/index.js 里那六个方法：drawing、clear、translate、rotate、scale、transform、reset、rectEllipse。wxml 和 wxss 负责排版，画布部分只有三行样式。
2026-11-09 10:42:30
93
原创 微信小程序 Canvas 2D 绘图实战：从圆、虚线到图片绘制
真正容易翻车的不是绘图 API，而是四个细节：节点获取方式、设备像素比、绘图状态残留、图片的异步加载。把这几处处理好，案例里剩下的 9 个按钮本质上只是调用不同的 CanvasRenderingContext2D 方法。
2026-11-09 10:18:10
103
原创 Canvas 实现自由绘图｜附扩展切换画笔颜色完整实战
手机有设备像素比 dpr，如果不做缩放处理，画出来的线条会模糊，所以要把画布宽高乘以 dpr，再调用。本案例完整实现课程作业：基础自由绘图 + 扩展切换画笔颜色，复制全部代码即可直接运行体验小程序画板。初始画布为蓝色背景，默认画笔红色；点击切换按钮后画笔变为绿色，可继续涂鸦书写文字图案。不是 dom 对象，必须通过。本案例基于微信小程序。
2026-11-06 21:50:28
153
原创 变脸游戏5.1
原题基础要求只有点击 + 摇晃变脸，我额外增加了： ✅ 累计变脸次数动态统计（本题 20 分扩展项） ✅ 去重逻辑：不会随机到和当前一样的脸谱 ✅ 页面销毁关闭传感器，优化性能 ✅ 友好文字提示。注意：图片需要自己准备 5 张脸谱放到 images 文件夹，文件名对应代码里的路径。作业要求：基础变脸 + 累计变脸次数统计，代码打包提交 + 发布技术博客。
2026-11-05 18:03:11
144
原创 扩展三个 marker 标记点，微信小程序地图开发
本次项目为 uni-app 前端开发课程教材案例 4.9 地图组件实战作业。原教材案例仅实现基础地图展示与少量标记点功能，功能较为单一。根据课程作业扩展要求，我在原有案例基础上自主扩展实现 3 个独立 Marker 标记点位，完善点位标注、点击交互、弹窗提示、地图渲染等全套功能。本项目基于开发，通过微信小程序模拟器运行调试，无需复杂后端接口，纯前端即可完成地图渲染与点位交互，非常适合新手入门小程序地图开发。保留官方基础地图组件所有原生功能成功扩展至 3 个 Marker 标记点位，完全满足作业扩展要求。
2026-11-04 22:39:37
97
原创 scroll‑view 组件案例实验
scroll‑view 是小程序实现局部滚动的组件，区别页面整体滚动。纵向必须设置高度；横向要处理禁止换行和行内块布局。scroll‑into‑view 可以实现页面加载自动滚动到指定模块。bindscroll 事件会高频触发，业务中不要在里面写过重逻辑。作业拓展：在横向滚动中增加新的 view，配合 css 伪类完成新增页面，实现多页面横向滑动效果。
2026-11-02 10:14:36
179
原创 slider 滑动选择器组件（RGBA 调色）
本次学习微信小程序原生 slider 滑动组件，完成调色小程序作业。程序一共包含 4 条滑动条，分别控制红色、绿色、蓝色以及透明度，拖动滑块可以实时改变下方文本区域的背景色和文字颜色。按照作业额外要求，对第一条红色滑动条设置黄色轨道背景，用来做视觉区分。通过这个案例可以掌握滑动组件使用、data‑* 自定义属性、事件传参、WXML 动态样式绑定等基础知识点。slider 是小程序提供的表单类滑动选择组件，用户可以拖动圆点来改变数值。value：保存滑块当前的数值；max：规定滑块可以调节的最大数值；
2026-10-27 13:54:43
43
原创 文件引用 include 实现内容显示隐藏
在微信小程序开发过程中，如果把所有页面内容全部写在同一个 wxml 文件中，代码会十分冗长杂乱，后期修改维护非常麻烦。小程序提供了include文件引用功能，可以将页面拆分成多个独立的片段文件，在主页面按需引入，实现代码复用。本次为课程作业案例，除基础文件引用之外，增加按钮控制拓展内容的显示与隐藏。include 文件引用是小程序模块化开发的基础手段，把页面拆分成多个小文件，代码结构更加清晰，方便后期复用与修改。
2026-10-26 10:14:20
203
原创 微信小程序｜图片与音频播放案例，实现倍速播放、播放位置日志打印
一是支持音频切换慢速、快速播放；二是点击播放、暂停时，在控制台自动打印音频当前播放位置和播放速率，用来观察音频想关接口。本次是小程序媒体基础案例，原本功能是展示图片、实现音频播放暂停。按照作业要求做了两处功能拓展；
2026-10-23 20:18:50
158
原创 使用 wx:for 嵌套列表渲染实现九九乘法表
本次基于微信小程序原生开发，利用wx:for 列表渲染嵌套循环、wx:if 条件渲染实现九九乘法口诀表。在基础案例之上完成作业扩展：实现奇数、偶数行区分不同背景色，并且每个乘法算式单元格增加边框效果，页面设置横屏展示，使用 Flex 弹性布局完成排版。实验环境：微信开发者工具，不使用云服务，不使用模板，渲染引擎设置为webview。wx:for 列表渲染：支持嵌套循环，可以循环数字数组模拟行列；指定循环变量名，拿到循环索引。wx:if 条件渲染：按需渲染节点，本案例j<=i。
2026-10-20 14:19:21
196
原创 条件渲染与 picker 选择器组件
掌握小程序picker选择器组件的基本使用，理解选择事件。掌握条件渲染以及<block>虚拟节点的用法。掌握input输入框bind:blur失去焦点事件，实现数字条件显示隐藏元素。完成功能扩展：在原有红、绿、蓝三色基础上增加紫色选择项。实验环境：微信开发者工具，新建项目，不使用云服务，不使用模板，渲染器设置 webview。WXSS 样式代码，必须使用英文半角，中文全角短横线会报编译错误。navigation‑bar 不属于小程序原生组件，课件中是自定义组件，直接删除，否则会报错。
2026-10-20 14:02:45
77
原创 标题与首行文字同步变色
这个小案例主要用来熟悉小程序定时器 API，区分一次性定时器setTimeout和循环定时器。定时器使用完毕记得清除，防止内存泄漏；不要单纯依靠定时器开关控制业务，搭配状态变量做逻辑拦截；复制粘贴代码带来的隐形特殊字符，是小程序开发高频报错来源；CSSposition定位配合z‑index可以轻松实现图层叠加，水印、背景文字都可以用这套思路。
2026-10-19 10:47:22
159
原创 计时器案例（定时器 setInterval/setTimeout 综合应用）
本次实现微信小程序计时器小案例，主要练习小程序定时器setTimeoutAPI 使用。业务需求：小程序启动先展示空白页面，2 秒之后渲染计时器界面；初始倒计时数值 60；具备开始计时、停止计时、重新计时三个按钮；倒计时到 0 之后，点击开始、停止按钮不会继续变化；点击重新计时恢复到 60。作业扩展要求在计时数字框内增加背景文字，模拟时光流逝效果。开发环境：微信开发者工具，新建项目选择不使用云服务、不使用模板，渲染器配置为 webview。这个案例主要熟悉小程序定时器 API，区分一次性定时器。
2026-10-19 10:25:03
195
原创 image 组件 14 种图片显示模式
每个对象包含两个属性，`mode`存放 image 的显示模式字符串，`text`存放该模式的中文解释文字。5. **作业新增编号逻辑**：wx:for 自带`index`下标，下标从 0 开始，所以使用`index+1`，实现编号从 1 到 14 依次展示。配置`wx:key`消除开发工具循环警告。6. 绑定文本说明`item.text`，image 标签动态绑定`src`图片地址和`mode`显示模式。`wx:for`用于循环渲染数组，循环内部自带变量`index`代表数组下标，下标从 0 开始。
2026-10-08 15:27:46
110
原创 微信小程序 checkbox 和 radio 组件案例学习
1. **checkbox-group + checkbox 复选框组**`checkbox-group` 作为复选框的容器，通过 `bindchange` 绑定切换事件。当勾选或者取消勾选复选框时，触发绑定的事件函数，`e.detail.value` 返回一个数组，数组里面存放所有被选中复选框的`value`值。2. **radio-group + radio 单选框组**`radio-group` 是单选框容器，同样使用`bindchange`监听选择变化。2. **点击复选框、单选框没有任何效果**
2026-09-23 20:42:41
122
原创 微信小程序 form 组件实战｜三角形面积计算器
完成课后作业新增重置按钮，完整可运行源码。点击`form‑type="submit"`按钮，form 组件收集内部所有带`name`属性组件的值，通过`bindsubmit`触发事件，数据放在`e.detail.value`对象。<input type="digit" placeholder="请输入三角形第一条边长" name="a" focus="true" value="{{sideA}}"/>> 文章标签：`微信小程序` `form组件` `input` `button` `海伦公式`
2026-09-23 20:35:01
139
原创 微信小程序 swiper 与 switch 组件实战
这个案例演示小程序组件数据双向绑定，通过开关组件动态控制轮播组件属性。switch开关触发事件 → setData 更新 data 数据 → wxml 插值表达式把数据绑定到 swiper 组件属性，页面实时刷新。本作业在原有基础上扩展为 4 个轮播条目，加深对 wx:for 列表渲染的理解。
2026-09-22 14:26:02
234
原创 生命周期函数实战，看懂 App 与 Page 生命周期执行顺序
App 生命周期表格函数执行次数触发时机onLaunch仅 1 次小程序冷启动初始化onShow多次小程序显示（启动、后台恢复）onHide多次小程序退到后台Page 页面生命周期表格函数执行次数触发时机onLoad页面仅 1 次页面加载，可以获取 options 参数onReady页面仅 1 次DOM 渲染完成，可操作视图onShow可多次页面变为可见（Tab 切换、后台恢复）onHide可多次页面被隐藏onUnload页面销毁才执行关闭页面销毁；
2026-09-22 13:57:10
198
原创 微信小程序备案完整流程
访问 [https://mp.weixin.qq.com](https://mp.weixin.qq.com)，使用小程序管理员微信扫码登录，进入小程序后台。2. ❌ **备案驳回**：后台会写明驳回原因（信息填写错误、材料不清、服务描述不符类目等），根据提示修改信息、重新上传材料，再次提交。在后台菜单栏，选择【设置】-【基础设置】，找到**小程序备案**板块，点击【立即备案】，进入备案系统。1. ✅ **备案审核通过**：备案状态更新为已备案，小程序满足发布备案要求，可以提交代码审核、上线；
2026-09-21 15:39:25
298
原创 模板实验：学生、教师与奥运冠军信息复用
template 模板适合重复 UI 片段复用，减少大量重复 wxml 代码；import 负责引入外部模板，区分好 import 和 include 两者使用场景；模板有独立作用域，所有数据必须通过 template 标签上的 data 传递；展开运算符...可以快速把对象属性注入模板；is 属性支持变量绑定，可以做到运行时动态选择渲染哪一套模板；写小程序代码修改完文件一定要保存再编译，否则经常出现文件更新不生效的诡异警告。
2026-09-20 14:37:21
179
原创 微信小程序模块化案例：不同 JS 文件变量与函数引用
微信小程序中每一个.js文件都属于独立模块，各个模块拥有自己的作用域，默认情况下模块之间变量、函数互相不可见。如果想要跨文件调用其他模块的变量与函数，需要依靠导出和导入require()完成；小程序全局的数据，则可以通过getApp()获取 app.js 实例来访问。本次案例为课程案例 3.8 模块化，实验目标：在 index 页面中，分别获取全局模块、不同目录模块、相同目录模块、自身模块的变量和函数，页面展示输出内容，并且为不同来源模块的文本设置区分度不同的背景颜色，直观看到模块调用结果。
2026-09-20 14:02:49
53
原创 数据绑定与事件绑定完整
注意：如果直接写`this.data.xxx = 新值`修改数据，页面界面**不会刷新**，这是初学者高频错误，必须使用 setData 才会触发视图更新。2. **对象绑定**：采用`对象.属性名`的方式读取对象内部字段，本案例读取学生的学号、姓名、生日，作业额外增加专业属性。WXML 使用**Mustache 双大括号语法`{{}}`**完成数据绑定，把逻辑层定义的数据渲染到页面上。本案例是微信小程序入门核心实验，主要学习小程序**数据绑定**和**事件绑定**两大基础能力。
2026-09-18 10:22:32
174
原创 TabBar 底部标签页创建
tabBar 是小程序全局功能，只能配置在 app.json，最多支持 5 个标签，本实验作业正好扩展到上限。pages数组是小程序页面注册表，新增页面必须在此声明，保存后工具自动生成页面文件。开启自定义导航，必须注册对应的导航组件，否则页面顶部空白。JSON 语法严格，复制内容容易带入不可见特殊字符，关键配置建议手动输入，全部符号使用英文半角。tabBar 图标路径必须以根目录斜杠开头，否则图片资源加载失败。
2026-09-15 14:36:46
136
原创 微信小程序 Flex弹性布局实验
本实验基于微信小程序原生开发，掌握Flex弹性布局核心概念，重点实现flex-direction: row-reverse反向水平排列及多层混合布局。通过设置flex-grow控制子元素空间分配，完成等分与比例布局。实践过程中解决未开启display:flex、主轴方向混淆、flex-grow理解偏差等问题，加深对弹性布局适配移动端的理解，为小程序页面开发奠定基础。
2026-09-14 15:44:45
114
原创 微信小程序盒模型实验
页面中每一个元素都相当于一个盒子，盒子由内容content、内边距padding、边框border、外边距margin四部分组成。本次借助微信小程序完成案例，通过三个展示科学家简介的盒子，直观区分内边距与外边距，掌握边框、背景样式的编写。2. padding 内边距：盒子内部，内容与边框之间的距离；3. border 边框：盒子的边线，可设置粗细、颜色、线型（solid实线，dashed虚线）；设置四周内边距、四周外边距；4. margin 外边距：盒子外部，当前盒子和旁边其他盒子之间的空白距离。
2026-09-08 14:37:13
125
原创 # 小程序：字体和文本样式‑将行内style改写为class样式
高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。中国式现代化，是中国共产党领导的社会主义现代化，既有各国现代化的共同特征，更有基于自己国情的中国特色。将wxml标签内部style行内样式提取，放到wxss文件中定义class，通过class引用样式。一处定义，多个标签都能够引用，实现样式复用，结构与样式相分离。样式直接写在标签里面，仅仅作用于当前标签。
2026-09-07 17:31:26
340
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人