- 博客(27)
- 收藏
- 关注
RSS订阅原创 微信小程序案例5.7：文件操作——写入、复制、读取与获取文件信息
本案例演示微信小程序文件系统 API（）的使用方法，实现本地文件的写入、复制、读取和获取文件信息四个操作。功能扩展：增加一个"删除文件"按钮，点击后将复制的文件删除。在文本框输入内容，标题变为"正在输入文字…"；点击"写文件"：输入内容写入，消息区显示写入成功和文件路径；hello.txt复制为；点击"读文件"：读取的内容并显示在消息区；点击"文件信息"：显示复制文件的大小（size）和摘要（digest）；点击"删除文件"（扩展）：删除。
2026-11-09 10:04:20
153
原创 微信小程序案例5.3：图形变换——translate、rotate、scale 与矩阵变换
本案例演示微信小程序 Canvas 2D 的图形变换方法，包括平移translate、旋转rotate、缩放scale、矩阵变换transform，以及还原reset。画布上始终以一个黄色矩形为参照，点击不同按钮观察图形的变化。功能扩展：增加一个按钮"矩形叠加椭圆"，点击后在矩形上叠加绘制一个椭圆。进入页面，紫红色画布上显示一个黄色矩形；点击"平移"：矩形向右下方移动；点击"旋转"：矩形倾斜；点击"缩放"：矩形放大一倍；点击"矩阵变换"：矩形被拉伸、倾斜成平行四边形；
2026-11-06 13:14:18
198
原创 微信小程序案例5.2：基本绘图——Canvas 2D 九种绘制方式详解
本案例演示微信小程序 Canvas 2D 的基本绘图方法，一个页面集成了九种绘制效果：实心圆、轮廓圆、虚线、端点交点、文字、径向渐变、阴影矩形、半透明图形，以及清空画布。功能扩展：新增一个"绘制图片"按钮，点击后在画布上显示图片，标题随之改变。点击不同按钮，画布上绘制对应的图形，页面标题同步显示当前绘制的图形名称；点击"清空画布"，画布恢复空白；点击"绘制图片"，画布上显示一张图片，标题变为"绘制图片"。
2026-11-06 13:13:29
223
原创 微信小程序案例5.1：变脸游戏——加速度计监听与摇一摇换脸
本案例演示微信小程序加速度计 API的使用方法，实现"摇一摇换脸"的小游戏：点击图片或摇动手机，页面上的表情图片随机切换为另一张。功能扩展：在页面顶部实时显示"累计变脸次数"，每次换脸计数加 1。页面显示"wx.onAccelerometerChange示例"标题和一张卡通表情图片；点击图片，图片立即随机换成另一张表情；把手机摇一摇，图片同样随机切换，并弹出"摇一摇成功"的 Toast 提示；标题下方显示"累计变脸次数：N"，每次换脸 N 加 1。本案例的两个知识点：一是。
2026-10-30 10:19:27
195
原创 微信小程序案例4.10：canvas组件——自由绘图与画笔颜色切换
本案例演示微信小程序canvas组件（2D 类型）的使用方法，实现手指在画布上滑动自由绘图、点击按钮清空画布的功能。功能扩展：新增一个"改变画笔颜色"按钮，点击后画笔在下拉颜色列表中循环切换。页面显示一块浅蓝色背景的画布，手指在画布上按住并移动，即可画出连续的线条；点击"改变画笔颜色"按钮，画笔颜色依次在红、蓝、绿、品红、橙之间切换；点击"清空画布"，画布上的所有笔迹被清除。本案例的核心是 Canvas 2D 的初始化流程：先用取节点和尺寸，再按pixelRatio缩放，最后拿到ctx。
2026-10-29 11:52:15
182
原创 微信小程序案例4.9：map组件——地图标记、选择位置与打开位置详解
本案例演示微信小程序map组件的使用方法，同时结合三个位置接口，实现地图展示、位置选择与打开位置的功能。功能扩展：在原有 2 个标记点的基础上再增加 1 个标记点，共 3 个标记点。打开页面后，以指定经纬度为中心显示地图，地图上显示 3 个带文字标签的标记点，其中一个标签为"我的位置"，并显示当前定位点；点击"选择位置"按钮，进入微信内置地图选点页，选择地址后返回，地图中心和标记随之移动；点击"打开位置"按钮，先获取当前位置，再用微信内置地图打开该位置，可在其中直接导航或打车。
2026-10-29 11:51:47
118
原创 微信小程序案例4.8：scroll-view组件——纵向/横向滚动视图实现详解
纵向滚动通过scroll-into-view定位到第二页，并绑定了滚动到顶部、滚动到底部、滚动中三个事件；纵向滚动区域：scroll-y="true"允许纵向滚动，style="height: 300rpx"给scroll-view设置固定高度（纵向滚动必须设置高度）。横向滚动区域：scroll-x="true"允许横向滚动，scroll-left="50"设置初始横向滚动偏移量为50px。scroll-view组件：可滚动视图区域，scroll-y允许纵向滚动、scroll-x允许横向滚动。
2026-10-28 13:06:30
164
原创 微信小程序案例4.3：slider组件——滑动选择器与RGBA颜色联动实现详解
颜色区域使用rgba颜色值，背景色为rgba(r, g, b, a)，文字颜色为反色rgba(255-r, 255-g, 255-b, a)。颜色区域的style通过数据绑定动态生成rgba颜色：背景色为rgba(r, g, b, a)，文字颜色取反色rgba(255-r, 255-g, 255-b, a)，保证文字在任何背景下都清晰可见。background-color属性设置滑动条背景轨道的颜色，添加后红色滑动条的背景轨道显示为黄色，与滑块的红色形成鲜明对比，其他三个滑动条保持默认的浅灰色背景轨道。
2026-10-27 11:12:33
143
原创 微信小程序案例4.7：video组件——视频播放与弹幕发送实现详解
功能扩展：录制一段视频演示小程序基础库版本对弹幕按钮的影响——低版本基础库（如2.32.3）播放视频时显示弹幕按钮，高版本基础库（如3.17.4）播放视频时不显示弹幕按钮。sendDanmu调用this.videoCtx.sendDanmu()发送弹幕，弹幕文字为输入的内容，颜色由getRandomColor()随机生成，每条弹幕颜色都不相同。在微信开发者工具中打开项目，点击右上角"详情"→"本地设置"，将"调试基础库"切换为2.32.3（低版本），编译后播放视频，控制栏中可以看到弹幕按钮。
2026-10-26 10:03:12
105
原创 微信小程序案例3.6：条件渲染和picker组件——wx:if/wx:elif/wx:else与block+picker选择器实现详解
本案例演示了微信小程序中picker选择器组件的使用、wx:if/wx:elif/wx:else条件渲染、block组件配合条件渲染的用法。实现效果：页面上有两个区域，第一个区域通过picker选择颜色并实时改变颜色条；第二个区域通过input输入框，根据输入数值是否大于0来条件显示下方三个颜色条。功能扩展：picker组件中选择颜色从3种扩展为4种（增加紫色）。picker组件普通选择器，range绑定数组，绑定事件。：条件渲染，根据数据值决定显示哪个元素。block组件。
2026-10-21 11:59:49
93
原创 微信小程序案例3.5：计时器——setTimeout延迟显示与setInterval倒计时实现及流水背景文字效果
本案例实现一个计时器小程序。小程序运行后首页显示空白界面，2秒后显示计时界面。计时界面包含计时数字和三个按钮：开始计时、停止计时、重新计时。初始值为60，点击"开始计时"开始倒计时，点击"停止计时"停止，点击"重新计时"从60重新开始。功能扩展：在时间显示界面上增加了形容时间如流水的背景文字效果。setTimeout：设定一个定时器，在指定的延迟时间后执行一次回调函数。本案例中延迟2秒显示计时界面。：设定一个周期性定时器，按照指定间隔（毫秒）重复执行回调函数。本案例中每1秒倒计时一次。：取消由。
2026-10-16 10:45:35
95
原创 微信小程序案例2.10：自动随机变化的颜色——setInterval定时器与Math.random随机色实现
本案例在页面上展示一首诗（包括标题、作者、正文），小程序启动后每隔5秒钟自动改变一次每行诗的颜色，颜色是随机生成的。点击"改变颜色"按钮也可以手动触发颜色变化。在控制台打印出每行诗的颜色数组。功能扩展：标题的颜色也定时随机改变，并且跟第一行诗的正文颜色相同；点击"改变颜色"按钮时，标题颜色也随之改变。：周期性定时器，按照指定的间隔（毫秒）重复执行回调函数。返回定时器ID，可用取消。：生成[0,1)之间的随机浮点数，配合乘数和可生成指定范围的随机整数。：向下取整函数，将浮点数转为整数。
2026-10-15 14:06:14
56
原创 微信小程序案例2.2：图片与声音——InnerAudioContext音频播放与变速控制详解
本案例演示了微信小程序中image组件的使用方法、InnerAudioContext音频上下文的创建与控制、数据绑定和事件绑定、onLoad生命周期函数等功能。实现效果：页面上显示一幅图片，点击图片时播放音乐，再次点击暂停播放，依次交替。功能扩展：增加了播放速度控制（慢速/正常/快速），并在每次播放和暂停时在控制台打印当前音频的播放位置和播放速率。image组件：通过src属性指定图片路径，支持数据绑定。事件绑定bind:tap绑定点击事件，点击后调用对应的处理函数。
2026-10-15 14:05:41
96
原创 微信小程序模板（template）详解：复用UI结构
在微信小程序开发中，当多个页面或同一页面内有重复的UI结构时，可以使用模板（template）来提高代码复用性。本文通过一个案例，演示模板的定义和使用方法。使用template标签定义模板name属性指定模板名称一个文件中可以定义多个模板使用数据绑定的方式指定模板中的动态数据定义模板：使用template标签和name属性引入模板：使用import引入模板文件使用模板：通过is属性指定模板名，data属性传入数据数据展开：使用{{...对象名}}展开对象数据模板作用域。
2026-09-29 18:30:59
169
原创 微信小程序swiper和switch组件详解：滑动视图与开关控制
swiper和switch是微信小程序中常用的两个组件。swiper用于实现滑动视图容器，switch用于实现开关选择器。本文通过一个案例，演示swiper和switch组件的功能和使用方法。swiper组件用于实现滑动视图，只能包含swiper-itemswitch组件用于实现开关选择，通过bindchange绑定事件数据绑定：switch的值通过setData更新swiper的属性wx:for循环：可以动态生成多个swiper-item。
2026-09-29 18:30:50
173
原创 微信小程序form组件详解：表单提交与重置
在小程序开发中，表单是最常见的交互形式之一。微信小程序提供了form组件，用于将内部的表单控件（如input、checkbox、radio等）的值进行收集和提交。form组件的核心作用是：当用户点击提交按钮时，form会自动收集内部所有带name属性的表单控件的值，组成一个对象传递给submit事件的回调函数。form组件是小程序表单开发的基础，通过bindsubmit和bindreset两个事件，配合button的form-type属性，可以轻松实现表单的提交和重置功能。
2026-09-27 17:14:40
198
原创 微信小程序checkbox和radio组件详解：多选与单选
在小程序表单开发中，checkbox和radio是两个非常常用的选择组件。checkbox用于多选场景，用户可以同时选中多个选项；radio用于单选场景，用户只能在一组选项中选择一个。这两个组件通常需要配合checkbox-group和radio-group使用，由外层的group组件来统一管理选中状态和触发change事件。checkbox和radio是表单开发中非常基础的组件，分别对应多选和单选场景。
2026-09-27 17:14:26
230
原创 微信小程序image组件详解：14种显示模式全解析
image组件是小程序中用来显示图片的组件，功能非常强大。它支持多种图片显示模式（mode属性），可以适应不同的布局需求。与HTML中的img标签不同，小程序的image组件有默认宽度300px、默认高度225px，并且支持13种不同的显示模式。image组件虽然只是一个基础组件，但mode属性提供了非常丰富的显示模式，覆盖了绝大多数图片展示场景。最常用的是aspectFill（填满容器，保持比例）和widthFix（宽度固定，高度自适应）两种。
2026-09-26 19:52:00
200
原创 微信小程序备案全流程实战指南
小程序备案是微信小程序正式发布上线前必须完成的一个步骤。根据工信部的要求，所有在中国大陆提供服务的互联网信息服务都需要进行备案，微信小程序也不例外。简单来说，就是向主管部门登记你的小程序信息，确保合法合规。如果不完成备案，小程序将无法发布上线，用户也无法搜索和使用。小程序备案是发布上线前的必经步骤，整个过程不算复杂，关键是信息填写要准确、材料准备要齐全。按照步骤一步步操作，耐心等待审核结果即可。备案通过后拿到备案号，小程序就具备了正式上线的资格。
2026-09-26 19:51:39
344
原创 #微信小程序模块化开发详解：require与module.exports的实践
用于导出模块的变量和函数require()：用于引入模块，返回模块通过module.exports暴露的接口getApp()：获取小程序全局唯一的App实例，可以访问全局变量和函数路径规则./表示当前目录，../表示上级目录通过不同背景色可以直观区分来自不同模块的输出信息有问题可以在评论区交流。
2026-09-22 08:11:50
135
原创 #微信小程序数据和事件绑定详解：从基础到实践
数据绑定和事件绑定是微信小程序开发中最核心的概念。数据绑定让页面内容与数据同步，事件绑定让用户交互能够触发逻辑处理。本文通过一个案例，演示这两种绑定的功能和实现方法。数据绑定使用Mustache语法（双大括号），支持普通变量、对象属性和数组下标事件绑定使用bind:tap绑定点击事件处理函数setData是更新页面数据的唯一方式，建议只传变化的数据数据绑定是单向的，从js到wxml对象属性修改推荐使用数据路径形式，如'student.stuMajor': '新值'有问题可以在评论区交流。
2026-09-22 08:11:12
164
原创 微信小程序生命周期函数详解：App与Page的执行顺序
在微信小程序中，生命周期函数是非常重要的概念。它们在小程序的不同阶段自动触发，开发者可以在这些函数中添加自定义逻辑。本文通过一个案例，演示小程序的生命周期函数的功能和使用方法。应用生命周期只有3个函数：onLaunch、onShow、onHide页面生命周期有5个函数：onLoad、onShow、onReady、onHide、onUnloadtab切换时，原页面触发onHide，新页面触发onLoad→onShow→onReady（首次）或仅onShow（非首次）
2026-09-20 16:50:46
145
原创 微信小程序创建标签（tabBar）实战：从3个到5个标签页
tabBar配置：在app.json中通过tabBar字段配置底部标签栏标签数量：最少2个，最多5个标签属性：pagePath指定页面路径，text指定标签文字，iconPath和selectedIconPath指定图标颜色配置：color为未选中文字颜色，selectedColor为选中文字颜色图标素材：可通过阿里巴巴矢量图标库免费获取页面创建：在pages数组中注册页面路径，系统自动生成页面文件有问题可以在评论区交流。
2026-09-20 16:41:52
54
原创 微信小程序多页面创建与导航实战：TabBar与navigator详解
在小程序开发中，一个完整的应用通常包含多个页面。如何创建多个页面、如何在页面之间进行导航跳转，是小程序开发的基础技能。本文通过一个包含5个页面的案例，详细讲解微信小程序中的页面创建和导航机制。页面注册：所有页面在app.json的pages数组中注册TabBar：在app.json中配置，最少2个最多5个标签navigator组件：设置url和open-type，跳转TabBar页必须用switchTabJS API公共样式：在app.wxss中定义.box和.title，各页面共用。
2026-09-12 16:20:29
199
原创 微信小程序Flex弹性布局实战教程：三种布局方式详解
在页面开发中，布局一直是个让人头疼的问题。传统的布局方式依赖float、position等属性，写起来比较复杂。Flex弹性布局的出现，让很多布局问题变得简单直观。本文通过一个微信小程序案例，讲解Flex布局的三种常见用法。给一个view设置，它就变成了Flex容器，子元素会按照Flex规则排列。水平均匀布局（修改为从右到左）左右混合布局上下混合布局Flex布局是前端开发中非常重要的布局工具，掌握好它可以轻松实现各种页面布局。开启Flex布局，子元素自动成为Flex项目。
2026-09-12 16:09:49
150
原创 微信小程序盒模型详解：从基础概念到实战案例
在网页和小程序开发中，盒模型（Box Model）是最基础的布局概念之一。所有的页面元素都可以看作是一个个矩形盒子，理解盒模型对于掌握页面布局至关重要。本文通过一个微信小程序案例，详细讲解盒模型的各个组成部分及其实际应用。盒模型是 CSS 布局的核心概念。每一个 wxml 元素都可以看作一个矩形盒子。content（内容区）：盒子最里面的部分，用来显示文字、图片等内容padding（内边距）：内容区和边框之间的空白区域border（边框）：围绕在内边距外面的线margin（外边距）
2026-09-11 17:09:09
127
原创 微信小程序字体与文本样式属性完全指南（附实战案例）
在微信小程序开发中，字体和文本样式属性是构建用户界面的基础。无论是标题、正文还是按钮文字，都离不开对字体样式的精细控制。本文将从案例出发，详细讲解微信小程序中常用的字体和文本样式属性，并通过实战演示帮助大家快速掌握。本文基于微信小程序的 WXSS 样式体系，所有示例代码均可直接运行。字体属性font-size文本属性colortext-align最佳实践：优先使用 class 而非内联 style，遵循合理的命名规范掌握这些基础属性后，再结合rpx。
2026-09-03 12:01:49
361
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人