- 博客(29)
- 收藏
- 关注
RSS订阅原创 5.7 文件操作
本次实验基于微信小程序原生框架，不使用云开发，利用文件管理器，完成本地文件的写入、复制、读取、获取文件信息、删除文件整套操作，熟悉小程序沙盒文件系统的特点与文件相关 API。小程序的本地文件存在独立沙盒目录，每个小程序、每个用户相互隔离，不能随意访问手机其他目录，保障数据安全。通过本次实验，我熟悉了微信小程序沙盒文件系统的隔离机制，学会使用 FileSystemManager 完成基础本地文件管理。小程序本地文件适合存放小型缓存文本，但是有严格目录限制，不能随意访问设备本地全部文件。
2026-11-08 18:09:14
102
原创 5.3 图形变换
本次实验基于微信小程序 Skyline 渲染引擎，使用新版type="2d"Canvas 2D API，实现画布图形的平移、旋转、缩放、矩阵复合变换矩形叠加椭圆绘制。理解 Canvas 坐标系变换原理，掌握save()与restore()绘图状态栈，熟悉ellipse()椭圆绘制接口。开发环境：微信开发者工具 渲染模式：Skyline（必须，新版 type="2d" canvas 依赖此渲染引擎）"pages": [],"navigationBarTitleText": "图形变换",},},
2026-11-06 11:07:53
177
原创 5.2 基本绘图
本次实验基于微信小程序，采用 Skyline 渲染模式，使用新版 Canvas 2D 接口完成基础图形绘制。实现功能包含：清空画布、绘制实心圆、轮廓圆、虚线、端点与交点样式、文字绘制、径向渐变图形、阴影矩形、半透明图形，并且额外扩展drawImage实现图片绘制，熟悉小程序 Canvas 绘图上下文、绘图状态保存、坐标与图形 API。开发环境：微信开发者工具 Stable 1.06.2504010 渲染模式：Skyline（必须，新版 type="2d" canvas 依赖该渲染引擎）
2026-11-06 10:54:53
158
原创 4.9 map 地图组件
本次实验练习微信小程序map：获取当前设备地理位置：唤起地图选择位置：唤起微信内置地图，实现导航、打车功能选择位置打开位置。点击选择位置可以手动挑选地理位置，地图中心点跟随切换；点击打开位置调用微信地图导航能力。开发环境：微信开发者工具，小程序基础库版本 3.x❌错误：写电脑桌面绝对路径、使用反斜杠、缺少开头。✅解决：图片放在小程序项目文件夹内，路径使用，清缓存重新编译。
2026-11-04 23:59:11
125
原创 5.1 变脸游戏
本次实验使用微信小程序加速计 API，实现变脸小游戏。实现两种切换脸谱方式：点击图片切换、摇晃手机切换脸谱；扩展功能：统计并展示累计变脸总次数。开发环境：微信开发者工具，基础库 3.7.5。
2026-11-02 09:51:16
161
原创 4.10 canvas组件
本次实验学习微信小程序新版画布组件，掌握 Canvas 2D 绘图上下文的创建、触摸事件处理，实现手指自由手绘绘图；完成作业扩展功能：增加按钮切换画笔线条颜色，同时实现清空画布功能。开发环境：微信开发者工具，webview 渲染模式。
2026-10-30 10:37:36
228
原创 4.8 scroll‑view 组件
本次实验学习小程序滚动视图组件，掌握纵向、横向滚动的配置方式，熟悉滚动相关回调事件。学会使用实现页面初始化定位，设置横向初始偏移。练习 CSS 伪元素::before，不用增加 DOM 节点就可以插入文本；掌握经典居中布局。同时了解 webview 与 Skyline 渲染引擎的语法差异。作业扩展在横向列表增加新页面，巩固横向滚动布局写法。
2026-10-27 13:10:34
55
原创 4.7 video 组件
本次实验学习小程序video媒体视频组件，掌握预设弹幕与实时发送弹幕的开发流程。学会使用获取组件上下文，调用组件实例方法。实现随机十六进制颜色生成函数，完成弹幕随机变色效果。同时认识小程序基础库版本差异性，部分组件属性会随版本迭代废弃。掌握视频资源的限制规则，理解真机与模拟器行为差异，开发视频小程序时必须使用网络视频资源，不能直接引用本地 mp4 文件。
2026-10-26 00:19:53
102
原创 4.3 slider 组件
在标签上书写data‑xxx="值"，触发事件时，可以通过获取自定义属性。，事件函数通过拿到r/g/b/a标识，区分是哪一个滑块触发。本次实验学习小程序slider滑动条表单组件，熟悉滑块各项配置。通过data‑*自定义属性传递标识，结合 JS 动态计算属性名，实现单函数处理多组件，体会代码复用。利用rgba()颜色函数配合内联样式，实现页面动态色彩效果。作业扩展练习属性修改滑动条轨道样式。同时巩固小程序事件机制、setData数据驱动视图更新的基础思想。
2026-10-25 23:30:07
191
原创 3.10 文件引用
本次实验学习了小程序include文件引用机制，include可以引入 wxml 片段，复用页面结构，实现代码分离。使用wx:if条件渲染控制拓展阅读的显示隐藏，绑定按钮 tap 事件修改 data 数据驱动页面更新。同时熟悉小程序全局配置 app.json、全局样式 app.wxss，掌握导航栏、页面布局、边框样式的编写。通过拆分多个 wxml 文件，代码结构更清晰，便于后期维护修改，体会到小程序代码复用的优势。
2026-10-23 11:01:24
213
原创 3.7 列表渲染实现九九乘法表
原因：flex 布局默认子元素会收缩压缩，单元格被挤没。解决：给.row.item设置禁止压缩；外层容器设置，容器跟随内容自动撑开。本次实验主要练习小程序嵌套列表渲染 wx:for和条件渲染wx:if，实现九九乘法表。通过双层wx:for循环模拟双层 for 循环，实现下三角效果。借助拿到循环下标，三元表达式动态 class 完成奇偶行不同背景色。学习双层嵌套方案，解决 webview 引擎下同时横纵向滚动的难题。理解 flex 布局的收缩特性，解决表格单元格被压缩消失的 bug。
2026-10-20 13:55:35
170
原创 3.6 条件渲染与 picker 选择器组件
本次实验熟悉了小程序 picker 选择器组件，掌握wx:if条件渲染与<block>标签用法，理解小程序数据驱动思想。页面数据不能直接赋值，需要借助setData驱动视图更新。picker 组件通过数组下标获取选中项，结合内联样式动态修改背景色，实现颜色切换效果。通过作业扩展新增紫色选项，进一步加深对数组、下标、条件分支渲染的理解。同时认识 input 的 blur 事件，实现输入完成（失去焦点）之后再做条件判断，而不是输入每一个字符就执行逻辑。
2026-10-20 13:31:56
180
原创 2.2 图片与声音
本次实验为微信小程序课堂案例 2.2《图片与声音》，主要练习image图片组件、音频上下文、事件绑定、页面生命周期onLoad，同时学习云存储存放音视频资源，避免小程序主包体积超出 2MB 限制。实现效果：页面展示宝塔山图片，点击图片切换播放 / 暂停《重回延安抒怀》音频；作业扩展需求：设置音频播放速率，每次点击后在控制台打印音频播放位置、播放速率。踩坑提醒：云开发控制台偶尔打不开，需要关闭小程序开发工具，完全重启开发者工具。表格属性 / API功能说明创建音频上下文实例，用于控制音频播放暂停。
2026-10-18 11:18:24
77
原创 2.10 自动随机变化的颜色
是周期性定时器，可以每隔固定时间重复执行一段代码，适合自动轮播、自动变色这类场景。小程序想要修改页面上展示的数据，必须使用 setData，直接修改 js 里的变量不会更新界面。WXML 的 style 内联样式可以绑定动态数据，用来实现颜色、宽高这类样式动态变化。十六进制颜色一共 6 位，每一位取值范围是 0~F，一共 16 种可能性，利用随机数就可以生成任意颜色。
2026-10-13 14:10:41
122
原创 3.5 微信小程序计时器
setTimeout只执行一次，适合做延迟显示；循环执行，适合倒计时、轮播。定时器一定要保存 id，使用手动清除，否则定时器会在后台持续运行造成内存问题。小程序修改页面显示数据，必须调用setData()，直接修改 js 变量不会更新视图。定位布局：父容器，子元素，子元素相对于父盒子进行定位；z-index 控制元素上下层级。开发小程序，要留意 WXSS 和普通 CSS 差异，部分 CSS 特性不能直接使用，需要用标签布局替代。
2026-10-13 14:07:02
218
原创 4.2 checkbox 和 radio 组件
本次实验学习了小程序多选与单选组件。多选返回数组，可以同时选中多个；单选返回单个字符串，只能选一项。通过 wxml 行内style动态绑定 data 变量，调用setData()驱动页面样式实时更新。开发中要注意渲染引擎兼容性，部分 css 属性在 skyline 引擎会失效；wxml 特殊符号需要使用转义字符；选择组件必须放在对应的 group 容器内，事件绑定写在 group 上。通过 console 打印事件对象，可以快速查看接口返回数据，辅助调试。
2026-10-06 23:15:13
177
原创 4.6 image 图片组件
本次实验学习小程序image图片组件，通过数组 +wx:for循环一次性展示 14 种 mode 显示效果。缩放模式会改变图片大小，裁剪模式不缩放只截取部分画面。开发过程中遇到很多格式问题，复制课件代码容易混入全角符号；Windows 图片后缀隐藏，很容易出现图片加载失败。调试可以先用网络图片快速验证代码逻辑，再替换成本地图片，减少排错时间。不同渲染引擎对组件属性支持不一样，做实验要留意官方兼容性说明。
2026-10-06 23:12:31
166
原创 4.1 三角形面积计算器
本次实验完成三角形面积计算器，熟悉小程序表单组件工作流程。form 组件依靠 submit 事件收集表单组件数据，使用 setData 完成数据更新驱动页面渲染。程序需要做好输入合法性校验，对不满足业务逻辑的数据给用户 toast 提示。重置功能使用 bindtap 点击事件，把 data 全部恢复初始状态。通过本次实验，理解小程序视图层和逻辑层分离的开发思想。
2026-09-22 08:14:17
29
原创 微信小程序 swiper 与 switch 组件作业
中定义 swiper 全部状态变量，定义 4 个轮播背景类与文字；编写 4 个开关的事件处理函数，利用。新建微信小程序项目，不使用云服务，模板选择 “不使用模板”。更新数据，页面会自动跟随数据改变，这就是数据绑定的思想。小程序是数据驱动界面，不能直接修改界面，需要修改。有非常多属性，可以控制指示点、自动播放、循环、滑动方向；下方放置 4 组 switch 开关，每一个开关绑定。循环渲染，简化重复的 swiper-item 编写。设置导航栏为白色，消除黑色导航栏。对布尔值取反，修改页面数据。
2026-09-22 08:13:14
113
原创 微信小程序案例 3.8：模块化实验博客
require 导入模块报错找不到文件：一般是相对路径写错。跨目录需要写足够的../返回上层目录；同目录直接写文件名，不要加./也可以。无法读取 app.js 全局数据：忘记调用，必须先拿到 App 实例，才能访问全局成员。拿不到外部模块变量函数：忘记写导出，没有导出的变量函数外部无法访问。拓展作业背景色不生效：class 类名写错，wxml 中的 class 名称要和 wxss 选择器完全一致。navigation‑bar 警告：属于 Skyline 渲染模式组件警告，不影响程序功能运行。
2026-09-21 22:38:56
147
原创 微信小程序案例 3.9：模板实验博客
模板内容不显示import src路径写错，注意开头代表项目根目录。模板拿不到数据：忘记写data属性传参；模板有独立作用域，不能直接访问页面 data。...展开语法报错：必须写data="{{...对象名}}"，外层双大括号不能省略。is属性的变量名要和 js 的 data 字段完全一致，区分大小写。import 不会递归导入：A 文件 import B，B 文件 import C，A 拿不到 C 内部的 template。
2026-09-21 22:38:06
30
原创 微信小程序案例 3.3 生命周期函数
本次作业复用上一次 tab 标签项目，不用重新写页面布局，只添加生命周期回调函数。特别注意 tabBar 页面的特性：标签切换页面不会被销毁，只会隐藏和显示，不会调用。拓展：普通跳转页面和 tabBar 页面生命周期行为不一样，写业务代码的时候，需要区分两者差异。以 index.js 为例，其余 4 个页面 js 参照同样格式，修改打印日志里的页面名称。通过控制台打印日志，可以直观看到代码执行先后顺序，帮助我们调试小程序程序逻辑。知识点：tabBar 页面常驻内存，页面只是隐藏，并不会销毁卸载；
2026-09-20 08:06:18
143
原创 微信小程序作业 —— 创建标签页：中国网事・感动 2023
表格问题原因解决方案报组件找不到、wxml 编译报错残留自定义组件标签与引用删除组件引用，删除页面 wxml 的导航标签页面空白，提示找不到 wxss 文件页面 wxss 文件丢失全部删除页面独立 wxss，使用全局 app.wxss卡片一直被右上角胶囊遮挡使用 rpx 设置上边距，胶囊是 px 单位会缩放错位margin‑top 使用 px 单位，设置 96pxscroll‑view 无法垂直居中scroll‑view 滚动容器不支持 flex 垂直居中。
2026-09-20 08:04:13
116
原创 微信小程序备案
小程序备案是工信部要求的互联网信息服务备案，属于 ICP 备案的一种，每个小程序 AppID 都需要独立备案，网站域名备案不能替代小程序备案。没有备案：只能在开发者工具、真机调试预览，不能提交版本审核、不能对外发布给普通用户访问。备案完成后，会获得小程序备案号，小程序需要展示备案编号。法律依据：《反电信网络诈骗法》，设立小程序 APP 必须办理备案手续微信开放社...。开发调试：不需要备案，我们写航天案例代码，在开发者工具预览调试完全不受影响。发布上线：必须完成备案。开发调试 ≠ 上线发布。
2026-09-19 17:05:48
192
原创 微信小程序案例 3.4：数据和事件绑定实验
JSON、WXML、JS 报错：绝大多数是中文逗号、中文引号，全部替换英文符号即可。修改数据页面没有变化：没有使用直接修改this.data，页面不会自动刷新。小程序不允许直接赋值修改 data，必须调用 setData。数据不显示：对象属性名写错，例如大小写错误，和是不同属性。拓展作业要求：在 student 对象新增major专业字段，wxml 增加一行渲染，同时在 modify 事件函数中更新专业的值，完成作业拓展。
2026-09-19 16:59:46
175
原创 微信小程序 —— 创建页面和导航实践博客
本次小程序实践作业，实现多页面创建与页面导航功能。以中国航天领域重要成果为主题，首页展示 5 个航天主题列表项，每个列表项带有图标、文字和右侧跳转箭头，点击条目可以跳转到对应的详情子页面，子页面支持左上角返回回到首页，完成页面之间的互相跳转。通过本次小程序作业，我掌握了小程序多页面创建、页面注册、navigator 导航跳转的基础知识点。小程序所有页面必须在app.json中注册；组件用来实现页面跳转，url 填写相对路径；flex 布局是小程序页面排版的核心，实现横向、纵向元素对齐；
2026-09-09 14:32:36
95
原创 微信小程序 Flex布局实战｜row-reverse反向排列+混合布局详解
Flex弹性布局是微信小程序开发中最常用的布局方案，相比传统浮动布局，Flex布局代码更简洁、适配性更强，能够轻松实现水平排列、垂直排列、元素均分、反向排序等各类页面布局效果。水平均匀反向布局、左右混合布局、上下混合布局，重点掌握反向排列核心用法，适合小程序新手入门学习。属性作用将容器开启弹性布局模式，子元素自动适配Flex规则默认值，子元素从左向右水平排列本次核心，子元素从右向左水平反向排列子元素从上向下垂直排列子元素从下向上垂直反向排列flex-grow: 数值。
2026-09-09 13:29:16
160
原创 微信小程序案例 2.3 CSS 盒模型实验
1.margin 控制盒子外部距离，padding 控制盒子内容距离边框的内部距离，二者不要混淆。2.border 可以设置粗细、颜色、solid 实线 /dashed 虚线多种样式。3.rpx 是小程序自适应单位，可以在不同尺寸手机自动适配。4. 本次作业在课件原有两个盒模型基础上，增加第三个盒子，加深对盒模型各个属性的理解。5. 写代码要注意全部使用英文半角符号，中文标点会直接造成样式报错失效。
2026-09-08 14:15:14
181
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人