- 博客(19)
- 收藏
- 关注
RSS订阅原创 5.3图形变换
本案例演示如何在小程序中使用 Canvas 画布 API 实现图形变换功能。小程序运行后，可以实现对图形的平移、旋转、缩放和矩阵变换等操作，并支持还原。在基本功能的基础上进行扩展：增加一个"矩形叠加椭圆"按钮，点击后在画布上同时绘制矩形和椭圆，实现两个图形叠加的效果。
2026-11-03 13:46:49
81
原创 5.2基本绘图
本案例演示如何在小程序中使用 Canvas 画布 API 实现基本绘图功能。主要绘制内容有：实心圆、轮廓圆、虚线、文字等；设置的绘图样式包括：端点样式、交点样式、圆形渐变、阴影、透明度等。案例完成后，在基本功能的基础上进行扩展：增加"绘制图片"按钮，点击后在画布上显示图片，标题随之改变。
2026-11-03 13:29:46
174
原创 案例5.1_变脸游戏
本案例演示加速度计 API的使用方法。点击脸谱，画面随机切换成另一张脸谱；摇晃手机，显示一个消息框（Toast），同时画面也随机切换成另一张脸谱；扩展功能：页面底部实时显示"累计变脸总次数"，每变一次脸数字加 1。image组件通过绑定图片数组；用生成随机下标，实现随机切换；监听加速度数据，实现"摇一摇"；显示消息提示框；用data中的count记录变脸次数，setData动态更新页面。
2026-10-29 19:05:23
43
原创 scroll-view组件
属性/事件说明允许纵向（上下）滚动允许横向（左右）滚动滚动到指定子元素位置，值必须是子元素的 id（id 不能以数字开头）scroll-top纵向滚动条初始位置（px）横向滚动条初始位置（px）滚动到顶部/左边时触发滚动到底部/右边时触发bindscroll滚动过程中持续触发滚动容器必须设置，禁止子元素换行；子元素必须设置，才能在一行内横向排列；只有子项总宽度超过容器宽度时，横向滚动才会生效。scroll-view 是微信小程序最常用的滚动容器组件，掌握scroll-xscroll-y。
2026-10-27 10:07:58
128
原创 案例4.3-slider组件
组件上可以写data-*形式的自定义属性，事件触发时会随事件对象一起传给处理函数：// 在事件对象中取出自定义属性的值const color = e.currentTarget.dataset.color // 得到 "r"通过slider组件的事件实现拖动过程中的实时交互；通过data-*自定义属性让多个组件共用一个事件处理函数；通过计算属性名实现动态赋值；通过rgba()函数把数据和样式绑定起来，实现颜色实时变化。
2026-10-25 13:32:40
41
原创 案例3.7列表渲染和九九乘法表
列表渲染：wx:for 的基本用法、指定循环变量、嵌套 wx:for 实现双重循环（外层行、内层列）；条件渲染：wx:if 在列表循环中控制具体项的显示；flex 布局：纵向（column）+ 横向（row）组合布局实现乘法表的整体结构；页面横屏配置；动态 class 绑定：利用三元表达式根据数据给元素添加不同样式，实现奇偶行不同背景色。在基本功能之上完成扩展，加深了对嵌套列表渲染、动态样式绑定和 flex 布局的理解。
2026-10-20 13:49:06
133
原创 案例3.6条件渲染和picker组件
picker 组件：mode=“selector” 普通选择器、range 数据绑定、bind:change 事件处理；条件渲染：wx:if / wx:elif / wx:else 的用法，以及 block 标签只作包裹、不生成真实节点的特点；input 组件：type=“digit” 数字键盘、bind:blur 失去焦点事件；setData 数据驱动视图更新：修改数据后页面自动刷新。
2026-10-20 13:29:48
187
原创 案例2.2-图片与声音
image组件的使用与src数据绑定；创建音频上下文，play()pause()控制播放与暂停；的（播放速率）、（播放位置）属性；bind:tap事件绑定与onLoad生命周期函数；数据绑定{{ }}与驱动页面更新；图片、音频等大文件放到云存储，减小小程序包体积。整体思路是：用image组件显示图片并绑定点击事件，点击时通过音频上下文控制音乐的播放与暂停，再利用实现变速播放，用获取播放位置。掌握了 InnerAudioContext，就能做出各种音乐播放类的小程序了。
2026-10-13 14:10:16
133
原创 案例2.10-自动随机变化的颜色
data数据绑定与驱动页面更新；与生成随机颜色；周期函数实现定时变化；事件绑定bindtap实现按钮点击响应；在控制台输出调试信息。整体思路并不复杂：把颜色存到data里，通过setData修改，页面上的style就会跟着变。掌握了数据绑定，就能做出各种动态变化的小程序效果了。
2026-10-13 13:46:34
146
原创 案例4.6-image组件-技术博客
image是微信小程序中用于显示图片的基础组件，支持 JPG、PNG、SVG、WEBP、GIF 等格式。属性类型说明srcString图片资源地址modeString图片裁剪、缩放的模式lazy-loadBoolean图片懒加载其中mode编号mode 取值类型效果说明1缩放不保持纵横比缩放，宽高完全拉伸填满 image 元素2aspectFit缩放保持纵横比缩放，长边完整显示，图片完整显示出来3aspectFill缩放。
2026-09-22 13:28:32
184
原创 案例4.1-form组件-技术博客
表单是用户与小程序交互的重要方式，注册、登录、信息填写都离不开表单。微信小程序提供了<form>组件统一管理表单内的输入组件，配合<input><button>组件和消息提示框 API，可以实现完整的表单交互。本文基于《微信小程序开发》教材案例4.1，实现一个"输入三角形三条边长、计算三角形面积"的小程序：点击"计算"按钮后用计算面积；输入不合法时弹出提示并清空输入框。并在基础案例之上，点击后输入框数值被清空。
2026-09-21 20:14:06
201
原创 案例3.9-模板-技术博客
在微信小程序开发中，我们经常会遇到结构相同、内容不同的重复页面结构，比如商品卡片、新闻条目、评论列表等。如果每处都复制粘贴相同的 WXML 代码，不仅代码冗余，后期修改样式时更是苦不堪言。微信小程序提供了 模板组件来解决这个问题：把重复的结构定义一次，在需要的地方多次引用。本文基于《微信小程序开发》教材案例3.9，完成一个演示模板定义和使用方法的小程序——展示学生和教师的信息；并在基础案例之上新增一个模板，展示中国奥运冠军及其所属项目。3.2 定义模板（template/template.wxml）在
2026-09-21 20:12:44
190
原创 案例3.8模块化技术博客
/ app.jsApp({// 定义全局变量appMsg: '来自全局模块的变量',// 定义全局函数return '来自全局模块的函数'})App()是小程序的入口，其中的数据在整个小程序中唯一。其他任何 JS 文件都可以通过getApp()拿到这个实例，从而读取appMsg、调用appFunc()。全局模块：通过App()定义，通过getApp()获取；其他模块：通过导出，通过require()引入；路径规则：不同目录用相对路径（../../），相同目录直接写文件名；模块复用。
2026-09-20 14:22:36
214
原创 案例3.4-数据和事件绑定-博客
Page({// 页面的初始数据data: {a: 10,b: 20,c: 30,student: {name: '张三',// 作业扩展：在学生结构中增加"专业"属性major: '软件工程'},},// 修改绑定数据modify() {a: 300,b: 100,c: 200,'student.name': '李四','student.major': '大数据',})})注意：修改对象中的某个属性时，setData 的 key 写成带引号的路径形式。
2026-09-18 16:51:38
212
原创 微信小程序备案
•个人主体：仅需填写本人真实实名信息，保证手机号、身份证信息与人脸核验信息完全一致，如实填写小程序功能用途。•已上架存量小程序：后台依次点击【设置】-【基本设置】-【小程序备案】，或点击首页吸顶备案提示进入。重要提示：存量小程序备案存在每日动态配额，当日额度耗尽无法提交，次日早10点自动刷新，建议错峰提交。4.准备好管理员实名信息，提前备好纯白背景、无遮挡的人脸核验环境，确保可顺利完成人脸核身。•未上架新小程序：登录小程序后台，首页直接点击【去备案】，一键进入备案流程；第二步：选择主体，填报备案核心信息。
2026-09-13 14:31:32
90
原创 技术博客-案例2.3盒模型
在 WXSS（小程序样式语言，与 CSS 高度相似）中，所有 WXML 元素都可以看作一个盒子。│ margin 外边距（盒外间距） ││ │ border 边框 │ ││ │ │ padding 内边距 │ │ ││ │ │ │ 内容区 │ │ │ │content：内容区，宽高由widthheight决定；padding：内边距，内容与边框之间的距离；border：边框；margin：外边距，盒子与其他元素之间的距离。全局样式文件中定义两个通用类——.box是盒子内部白色卡片，
2026-09-13 14:04:46
183
原创 博客-字体和文本样式属性案例改写
color: red;抽取到index.wxsscolor: red;WXML 中改为通过class引用：< view class = " section-title " > 中共二十大会议主题 </ view >< view class = " section-title " > 中共二十大会议主题 </ view >< view class = " section-title " > 中共二十大会议主题 </ view ></
2026-09-05 20:59:11
362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人