- 博客(28)
- 收藏
- 关注
RSS订阅原创 # 微信小程序 Canvas 2D 图形变换实战：从平移旋转缩放到矩阵叠加（案例5.3 完整实现 + 扩展）
的六个变换 API，把「一个黄色矩形」玩出平移、旋转、缩放、矩阵变换四种效果，并在原案例基础上新增了「矩形叠加椭圆」的扩展功能。会同时放大坐标和线宽，所以矩形从 100×100 变成 200×200、线宽也变粗，右下角溢出画布——这正是案例截图里的效果。// 参数1：水平缩放 1.25，参数2：水平倾斜 30°，参数3：垂直倾斜 0，参数4：垂直缩放 0.5。| 矩形叠加椭圆（扩展） | 矩形与斜置椭圆交叉叠加，两条路径互不影响 |，让椭圆斜置穿过矩形四边，得到截图中的「交叉叠加」感；
2026-11-06 10:18:29
228
原创 # 微信小程序 Canvas 基本绘图与扩展「绘制图片」功能实现（案例 5.2）
画实心圆</button><button type="primary" size="mini" bind:tap="clear">清空画布
2026-11-06 10:16:17
176
原创 # 微信小程序开发实战：案例 5.1 变脸游戏（含“累计变脸次数“功能扩展）
小程序运行后显示一张京剧脸谱，点击脸谱会随机切换成另一张脸谱；：在基本功能的基础上，动态显示累计变脸次数——每变脸一次（无论是点击还是摇晃触发），页面上显示的次数就自动加 1。// 产生[0,n)之间的随机数，其中 Math.random() 产生[0,1)之间的随机数。：摇晃手机，弹出"摇一摇成功"提示框，同时脸谱随机切换，累计次数也自动加 1。时，显示一个消息框，同时画面也随机切换成另一张脸谱，从而实现"变脸"效果。// 当前显示的脸谱在 faces 数组中的下标，初始为 0（第一张脸谱）
2026-11-03 13:28:17
224
原创 微信小程序 canvas 组件实战：从自由绘图到手写换色画笔
/ 返回的是 CanvasRenderingContext2D 对象，参考 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D。// 返回的类型为 Canvas，该实例的接口可以参考 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html。的完整实现，并对每一行代码给出解析，解析均置于对应代码行的正上方。
2026-11-03 13:25:50
221
原创 微信小程序 map 地图组件实战：定位、选点、打开位置完整案例
map 组件：小程序原生地图组件，markers 实现标点标记，label 给标记增加文字说明。每个 marker 的id必须唯一，图标路径必须以开头写绝对路径。：打开微信地图选点界面，用户选择地址完成后返回经度、纬度、地址名称。：获取当前设备地理位置，微信地图统一使用 GCJ‑02 火星坐标系，不要用 wgs84。
2026-11-02 10:39:43
211
原创 微信小程序实战：Video 组件应用与弹幕功能开发（附高低版本差异踩坑）
注意 danmu-btn 属性： 低版本基础库（如 2.32.3）会显示“弹”字按钮 高版本基础库（如 3.17.4 及以上）不显示按钮 -->最重要的是，通过测试不同基础库版本，我们对微信小程序的兼容性和版本迭代有了更直观的认识。随着微信小程序官方的迭代，高版本基础库为了提供更统一、简洁的 UI 体验，逐渐废弃了一些原生的内部 UI 组件。在微信小程序的开发中，视频播放和互动功能是非常常见的业务场景。（高版本消失，低版本显示），并附带录屏验证的思路。
2026-10-30 09:57:14
179
原创 微信小程序实战：Scroll-view 组件实现双向滚动与功能扩展
* ================= 页面通用色块及文字样式 ================= */组件，它不仅支持基础的纵向滚动，还支持横向滚动，并且提供了丰富的属性和事件来满足复杂的交互需求。：在横向滚动时，必须给内部容器设置该 CSS 属性，强制内容不换行，这样横向滚动才能生效。在小程序开发中，当页面内容超出屏幕可视区域时，我们通常会用到滚动视图。组件的使用方法，并在此基础上完成功能扩展：在横向滚动区域增加第四项内容。：在横向滚动视图部分再增加一项（由3项变为4项），显示“阳光灿烂”。
2026-10-26 10:01:56
193
原创 微信小程序实战：Slider 组件与动态颜色控制（附功能扩展）[特殊字符] 前言
通过这个案例，我们不仅掌握了slider组件的基本用法和data-*自定义属性的传参机制，还学会了如何利用 JavaScript 的计算属性和 WXML 的数据绑定，实现复杂的动态 UI 效果。希望这篇博客能对正在学习微信小程序开发的你有所帮助！
2026-10-25 13:30:34
143
原创 微信小程序实战：文件引用(include)与渲染引擎避坑指南
标签的模块化开发技巧，实现了代码的复用。同时，也深刻认识到在小程序开发中，基础配置（如渲染引擎、导航栏样式）对页面呈现的巨大影响。实现内容的动态显隐，并分享一个关于渲染引擎（Skyline 与 WebView）配置的“避坑”经验。在微信小程序的开发中，为了提高代码复用性和可维护性，我们通常会将页面拆分成多个独立的模块，然后通过。，可能会导致自定义导航栏遮挡内容，或者控制台报出一堆底层的版本兼容警告。的问题，并且控制台出现了大量的黄色警告。，强制使用传统的 WebView 渲染引擎，并恢复默认导航栏。
2026-10-23 10:09:48
31
原创 微信小程序实战：列表渲染与九九乘法表（含扩展功能）
在微信小程序开发中，列表渲染 (wx:for是处理动态数据列表最常用的手段，而Flex 布局则是构建灵活界面布局的利器。本文将通过一个经典案例——《九九乘法表》，详细解析嵌套循环的使用方法，并在此基础上完成“奇偶行变色”与“单元格边框”的功能扩展。索引的使用：在计算乘法结果时，不要忘记wx:for的索引是从0开始的，所以参与计算的数字应为index + 1。边框重叠问题：当多个带有边框的盒子相邻时，相邻的边框会变粗（1px + 1px = 2px）。可以使用 CSS 的来解决，或者像本例中一样使用。
2026-10-20 13:58:51
179
原创 微信小程序实战：条件渲染与Picker组件详解（含紫色扩展）
在微信小程序的开发中，条件渲染和表单组件是构建动态交互界面的基石。本文将通过一个具体的实战案例——《条件渲染和picker组件》，详细解析wx:if系列指令的使用方法，以及如何利用picker选择器和input输入框实现数据的双向联动。同时，本文在原基础案例上进行了功能扩展，增加了“紫色”选项。初始状态：页面显示红色的色条。选择紫色：点击 Picker 弹出选项，选择purple，上方的色条背景变为紫色，文字显示“紫色”。这得益于的动态数据绑定。数字联动：输入5并点击空白处，下方显示红绿蓝三色条。重新输入。
2026-10-20 13:34:26
154
原创 图片与音频交互（InnerAudioContext 实现播放暂停 + 变速）
页面展示一张图片，点击图片交替实现音频播放 / 暂停；增加按钮控制音频播放速率，支持慢速 0.5 倍、快速 2 倍切换；在音频播放、暂停事件触发时，控制台打印音频（播放位置）、（播放速率）；了解小程序云存储使用背景：小程序主包大小限制 2M，音视频大图建议放云存储，避免包体积超限。image组件、bind:tap事件绑定、页面生命周期onLoad音频上下文、数据绑定。wxml、css 符号使用中文全角符号，直接编译报错，全部改为英文半角；
2026-10-13 13:44:51
51
原创 image 组件实战｜14 种图片显示模式演示
也就是说，可以完整地将图片显示出来'text: 'bottom right：裁剪模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持'text: 'top right：裁剪模式，不缩放图片，只显示图片的右上边区域。text: 'bottom：裁剪模式，不缩放图片，只显示图片的底部区域。text: 'right：裁剪模式，不缩放图片，只显示图片的右边区域。text: 'left：裁剪模式，不缩放图片，只显示图片的左边区域。text: 'top：裁剪模式，不缩放图片，只显示图片的顶部区域。
2026-09-24 10:09:09
115
原创 swiper 与 switch 组件实战｜中国精神轮播案例
自动播放</text><text class="my-left">衔接滑动</text><text class="my-left">指示点</text><text class="my-left">竖向
2026-09-24 10:06:24
186
原创 WXML template 模板实践
姓名: {{name}}</view><view>年龄: {{age}}</view><view>所学专业: {{major}}</view>--教师模板--><view>姓名: {{name}}</view><view>年龄: {{age}}</view><view>讲授课程: {{course}}
2026-09-22 11:29:59
177
原创 require 模块引入 + 多模块区分
JS 模块导出语法，只有导出的内容，外部 require 后才能访问。require ("相对路径")：小程序引入外部 JS 模块，路径是坑点../向上一级文件夹；../../向上两级同目录直接写文件名全局 App 模块特殊：不能 require，必须getApp()获取模块分类全局模块：app.js，整个小程序共享跨目录模块：common/common.js，多个页面复用公共逻辑同目录模块：同页面文件夹拆分 js当前页面模块：index.js 内部定义，仅当前页面可用。
2026-09-22 11:20:04
76
原创 数据和事件绑定
小程序的数据绑定属于单向绑定，JS 逻辑层的数据变化驱动 WXML 视图层更新；视图层不能自动修改逻辑层数据。修改页面渲染数据必须使用，直接修改this.data不会更新界面。对象可以自定义新增属性，WXML 使用对象.新增属性名即可完成渲染。通过bind:tap实现点击事件，完成页面交互；点击按钮触发事件函数，调用 setData 实现页面动态变化。使用 setData 时尽量只更新变化的字段，减少逻辑层向视图层的数据传输，优化小程序运行性能。
2026-09-20 13:54:05
190
原创 生命周期函数实战
onLaunch：小程序初始化完成触发，全局仅执行 1 次，小程序启动时执行。onShow：小程序由后台切换到前台显示时触发，可多次执行。onHide：小程序从前台切换到后台隐藏时触发，可多次执行。onLoad：页面加载完成触发，单个页面仅执行 1 次，可接收页面跳转参数。onReady：页面初次渲染完成，单个页面仅执行 1 次，此时页面视图已经构建完成。onShow：页面显示时触发，Tab 切换、小程序切回前台都会触发，可多次执行。onHide。
2026-09-20 13:39:21
192
原创 微信小程序底部 TabBar 案例：实现多标签人物介绍页面
本案例基于微信原生小程序，使用app.json配置tabBar底部标签栏，实现 3 个页面切换：首页（感动人物总览）、贾潮江介绍页、朱培娟介绍页。页面使用实现内容滚动，搭配基础样式排版，完成人物事迹展示。开发过程踩坑较多，记录关键问题与解决方案。not found图片文件夹不在项目根目录；Windows 隐藏文件后缀，真实文件名是；文件名复制带来看不见的空白字符；代码路径拼写错误（imaees写成images解决方案：暂时删除iconPath，先用纯文字 tab 保证项目跑通；
2026-09-16 08:52:50
75
原创 创建页面与导航，实现 5 页面跳转
在微信小程序开发中，页面创建与页面间跳转是最基础的能力。本文基于课程作业案例，从零搭建项目，完成原有 3 个航天主题页面，额外新增 2 个页面，实现一共 5 个页面互相跳转，使用navigator标签完成页面路由，搭配icon组件展示不同图标，完整记录开发过程以及踩坑排错。适合小程序初学者直接复制代码运行。完成基础案例 3 个页面：载人航天、探月工程、卫星应用新增 2 个页面，项目合计 5 个可跳转页面使用不同icon类型，区分导航条目使用标签实现页面跳转使用箭头图片作为导航右侧指示图标。
2026-09-09 08:08:51
177
原创 微信小程序 ICP 备案完整实战流程
现在微信小程序强制要求完成 ICP 备案，未备案的小程序无法正式发布，会被拦截甚至下架微信开放社...。很多开发者开发完业务代码后，卡在备案环节延误上线。本文完整记录小程序备案前置条件、操作步骤、状态查看、踩坑经验，适合后端、小程序开发者、运维阅读。微信认证 ≠ ICP 备案微信认证：微信平台付费资质认证，解锁支付、高级类目ICP 备案：工信部合规要求，免费，不完成不能上线发布优快云博...证件照片模糊、反光、边角缺失填报地址、姓名与证件不一致。
2026-09-09 08:03:24
399
原创 Flex 弹性盒模型实战：3 种混合布局 + 水平倒序改造
在微信小程序开发中，float浮动布局兼容性有限，Flex 弹性盒模型是小程序页面布局的首选方案博客园。Flex 可以轻松实现元素等分、水平 / 垂直排列、嵌套混合布局，只需要简单修改属性，就能改变整体排布顺序。本文基于教材案例，从零搭建小程序，实现水平均匀布局、左右混合布局、上下混合布局，并且完成作业改造：把水平均匀布局改为从右向左倒序排列，附带全部可运行源码。Skyline 新渲染引擎会对部分 flex 属性产生异常，案例中需要关闭 skyline；flex‑grow写在子元素上，不要写在父容器；
2026-09-08 20:14:35
159
原创 初探 CSS 盒模型：用盒子讲述大国科学家风采
在微信小程序的世界里，页面上几乎所有元素，都可以被抽象成一个个「盒子」。CSS 盒模型，就是规定盒子如何计算自身尺寸的一套规则：由内容 content、内边距 padding、边框 border、外边距 margin四部分共同构成，我们调整这四项属性，便能改变元素的大小、间距、边框与背景样式，实现丰富多彩的页面排版。本次实战案例，我们将搭建一个小程序页面，以盒模型为载体，展示王淦昌、于敏、钱三强三位核物理先辈的生平简介，在敲写代码的同时，回望那些为祖国国防事业默默耕耘的巨匠。
2026-09-08 16:13:30
212
原创 微信小程序：字体和文本样式设置案例
本案例完成小程序字体与文本样式开发，把 wxml 标签上的style行内静态样式提取，改为 class 类，统一写在 wxss 样式文件，遵循小程序开发规范，class 采用短横线命名，不使用驼峰命名。增加文本内容，使用组件实现页面垂直滚动。
2026-09-03 16:29:30
303
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人