- 博客(29)
- 收藏
- 关注
RSS订阅原创 微信小程序《案例 5.7 文件操作》
删除，文件已经消失，调用 readFile、getFileInfo 会触发 fail 回调，是正常业务逻辑。跳过写文件直接执行后面接口直接 fail。复制带入中文全角符号，全部替换英文半角符号。
2026-11-05 17:58:22
231
原创 微信小程序《案例 5.3 图形变换》
每一次变换前 save，绘图结束 restore，把变换状态隔离。，wxml 与 js 选择器必须一模一样；PPT 复制带来中文全角横线，全部替换英文半角。onReady 里面做 dpr 像素适配，canvas 的 id 为英文短横线。rotate 接收的是。
2026-11-03 13:27:25
15
原创 微信小程序案例 《5.2 基本绘图》
API作用绘制圆弧、圆形fill()填充图形；stroke()描边轮廓setLineDash([实长,间隔])设置虚线样式lineCap线条端点样式；lineJoin线条拐角交点样式绘制文字；rotate(弧度)旋转画布径向圆形渐变，增加渐变色标阴影偏移、模糊、阴影颜色全局透明度，0 完全透明～1 不透明创建图片实例；在画布绘制图片把项目包内静态图片转换为小程序可识别临时路径，新版基础库必须用此方式，直接写本地包路径会加载失败。
2026-11-03 10:40:36
156
原创 微信小程序案例 《4.10 canvas 画布组件》
新版 canvas；不带 type 属性的旧 canvas 组件官方已经废弃。忘记 dpr 像素适配；onReady 回调内部必须乘。仅控制后续新画的笔迹，旧笔迹不会变化，属于正常现象。每次绘图读取 data 里面保存的颜色。坐标是相对于 canvas 画布左上角。变量保存当前画笔颜色；canvas 绘制完成的像素是静态；，清空画布同时重置绘制路径。
2026-10-28 18:39:56
188
原创 微信小程序案例 《4.9 map 地图组件》
images 文件夹必须放在项目根目录，与 pages 同级；iconPath路径开头不能省略；文件名大小写错误，真机对大小写敏感；
2026-10-28 18:29:51
221
原创 微信小程序案例 《4.8 scroll‑view 滚动视图组件》
本案例依赖 webview 渲染引擎；skyline 对部分伪元素、换行符。复制 PPT 示例带入中文全角横线符号，全部替换为英文半角。，父 scroll‑view 添加。支持差，app.json 中。
2026-10-27 10:11:12
54
原创 微信小程序案例 《4.7 video 视频组件》
补充：这个视频时长很短，只有几秒，预置弹幕里 time=20 的弹幕视频播完了才会触发，这条弹幕看不见，属于正常现象。输入框失去焦点的时候，拿到输入的弹幕文字保存到变量；点击发送弹幕时读取变量发送。不能直接在 sendDanmu 里面直接调用，会报 undefined。地址是占位假链接，无法解析域名；16 进制每一位不足两位，函数内部做补。处理，保证输出 6 位标准色值。，必须全部改成英文半角短横线。，手动敲不容易带隐形特殊字符。，必须等 exec 回调完成，复制代码带入中文长横线。向视频发送一条弹幕。
2026-10-26 09:57:02
160
原创 微信小程序案例 《4.3 slider 滑动条组件》
表格属性说明max滑动条最大值，RGB 取值 0‑255value滑块当前数值，和页面 data 绑定滑块圆点颜色作业扩展点：滑块已经划过轨道的颜色滑块右侧实时显示数字step拖动最小步长，透明度需要实现 0‑1 精细调节拖动过程连续触发；bindchange是松手后才触发一次在标签上写，事件回调中通过拿到字符串"r"。好处：4 个滑块共用同一个事件函数，不用写 4 套处理函数。
2026-10-25 13:42:09
110
原创 微信小程序 《案例3.10文件引用》
在微信小程序开发中，页面代码如果全部写在一个 wxml 文件里，代码会非常臃肿，后期维护很难。小程序提供了include标签，可以把页面拆分成多个独立的 wxml 片段（头部、主体、底部、扩展模块），在主页面引入复用；同时搭配wx:if条件渲染，实现内容的显示与隐藏切换，是小程序基础阶段非常经典的组合知识点。本次案例实现效果：页面分为头部、主体、固定底部，点击按钮控制扩展模块的显示 / 隐藏。现象：控制台提示找不到 wxml 文件，报错路径和真实文件位置不一致。原因： ①../数量写错，层级对应不上；
2026-10-24 21:00:44
197
原创 微信小程序《案例 3.7 列表渲染和九九乘法表》
本案例基于微信小程序，使用嵌套wx:for列表渲染、wx:if条件渲染结合Flex布局实现九九乘法口诀表。同时完成作业扩展功能：奇数行、偶数行区分不同背景颜色，每个乘法算式单元格增加边框。页面设置横屏展示，还原课件PPT案例效果。技术点：1. wx:for 列表渲染，双层嵌套循环实现行与列2. wx:if 条件渲染，控制只渲染下三角乘法表3. Flex弹性布局，纵向排版表格行，横向排版每一行算式4. 动态class，实现奇偶行不同背景色5. 小程序页面横屏配置 pageOrientation。
2026-10-20 14:32:30
164
原创 微信小程序《案例3.6条件渲染和 picker 组件》
picker 选择器range="{{数组}}"：下拉选项数据源；：选中项改变触发事件；：拿到选中项数组下标，不是直接拿到字符串。条件渲染根据布尔值判断是否渲染该标签，为 false 时标签直接不会生成 DOM。<block>虚拟包裹标签input 组件：数字输入键盘，支持小数点；bind:blur：输入框失去焦点触发函数，不是每输入一个字符就触发。Number()字符串转数字；!isNaN()判断是不是有效数字。修改 data 数据驱动页面更新。
2026-10-20 13:47:07
209
原创 微信小程序《案例 3.5 计时器》
setTimeout(回调, 毫秒)：一次性延迟定时器，等待指定毫秒后执行一次函数。本案例用来实现 2 秒后显示界面。setInterval(回调, 毫秒)：周期性定时器，每隔固定毫秒重复执行函数；返回定时器 ID。：根据定时器编号，关闭周期性定时器，停止计时。hidden="{{布尔值}}"：wxml 条件隐藏元素；true 隐藏，false 显示。页面生命周期onLoad，页面加载完成触发。全局变量：在 Page 外面定义，保存计时数值、定时器 ID、状态标记。
2026-10-19 11:24:14
66
原创 微信小程序《案例2.10自动随机变化的颜色》
页面生命周期onLoad：页面加载完成触发，在这里开启定时器。定时器：周期性重复执行函数；单位毫秒，5000=5 秒。随机数返回[0,1)的浮点数。向下取整，把小数转为整数索引，取十六进制字符。：小程序核心，修改data中的数据，驱动 wxml 页面视图更新。动态内联样式style="color:{{变量}}"，实现样式动态绑定。#RRGGBB，# 后面 6 位，每两位代表红、绿、蓝通道，取值0‑9 A‑F。
2026-10-19 11:13:54
140
原创 微信小程序 《案例2.2图片与声音》
1. 音频、图片加载失败：复制云存储下载链接完整，不要截断；权限如果是仅创建者可读，链接过期要重新复制。2. 多次点击重复创建音频：音频上下文对象必须写在Page外部，只在onLoad创建一次。3. 生命周期混淆：onLoad只执行一次，适合资源初始化；不要把资源初始化放到点击事件中。4. 播放速率设置时机：在onLoad里面设置playbackRate，音频就会按照设置速度播放。这个案例综合练习小程序多媒体开发。学会使用云存储解决包体积问题；掌握数据绑定、事件绑定、页面生命周期；
2026-10-18 20:37:53
142
原创 微信小程序《案例4.6 image组件》
在循环内部，说明文字上方新增view，输出 显示模式编号：{{index+1}} ，增加少量css设置红色加粗字体。app.json需要设置 "renderer":"webview" ，skyline会导致部分mode失效。1. ❌忘记设置 "renderer":"webview" → top/bottom等裁剪模式完全失效；作业编号需要从1开始，写 {{index+1}}；- wx:for="{{imgArray}}" 循环数组， item 代表数组每一项对象；2. ❌图片路径写错，图片空白；
2026-10-07 19:11:10
188
原创 微信小程序《form组件案例》
1. ❌忘记写input的 name 属性：拿不到表单数据；2. ❌输入的值是字符串，没有parseFloat，计算结果NaN；3. ❌直接赋值 this.data.xxx=xxx 页面不刷新，一定要setData；4. ❌toast文字太长，没有设置 icon:"none" ，文字会被截断；5. type="digit" 数字键盘只在真机有效，模拟器看不到。
2026-10-03 20:56:28
164
原创 微信小程序《案例4.4 swiper和switch组件》
1. swiper 是轮播组件，子元素必须是 swiper‑item；wx:for 可以批量生成轮播项。2. switch 开关组件： checked 绑定布尔状态；bindchange 监听开关切换事件。3. 通过switch的事件函数，调用 setData 修改data，从而动态改变swiper组件属性，实现交互控制。4. indicator‑dots 显示指示点、 autoplay 自动播放、 circular 循环衔接、 vertical 垂直方向是swiper最常用4个属性。
2026-09-22 09:23:40
182
原创 微信小程序《案例3.9 模板》
结合案例3.9完整实战，从模板定义、文件引用机制、作用域、传参方案、import与include本质区别、动态模板、作业扩展奥运冠军模板几个维度，深入理解小程序模板系统；同时对比模板与组件的差异，厘清二者适用业务场景，帮助理解小程序视图层复用体系。1. <template name="模板名"> 用来定义模板，模板本身不会渲染，引用之后才显示。2. import 用来导入外部wxml文件中定义的template模板，它不会递归导入。include 是拷贝全部普通标签，不会读取template。
2026-09-22 08:13:40
168
原创 微信小程序案例《3.8 模块化》
1. 微信小程序中每一个 .js 文件都是独立模块，拥有独立作用域，内部变量外部不能直接访问，需要 module.exports 向外暴露接口。2. require('路径') 用于引入自定义JS模块，同目录直接写文件名；跨目录需要写相对路径。3. getApp() 可以获取小程序全局 app.js 的实例，访问全局定义的变量和函数。4. 模块化开发可以拆分代码到多个文件，实现代码复用，降低单文件代码量。
2026-09-20 13:40:18
111
原创 微信小程序《案例3.4 数据和事件绑定》
1. 掌握WXML中**Mustache双大括号 {{}} **数据绑定语法；2. 掌握普通变量、对象、数组的数据绑定写法；3. 掌握按钮 bind:tap 事件绑定；4. 掌握 this.setData() 修改页面数据，实现页面刷新；5. 拓展作业：给student对象新增 major 专业属性。1. this.setData() 是小程序专门用来更新视图数据的API；2. 将逻辑层数据传递到视图层，触发页面重新渲染；3. 最佳实践：只传入发生改变的字段，减少数据传输，提升性能；
2026-09-20 10:40:05
147
原创 微信小程序《3.3生命周期函数》
首页已经存在内存中，仅执行 onShow ，不再执行 onLoad 、 onReady ，全程不会触发 onUnload ，验证tabBar页面驻留内存的特性。小程序退至后台，当前朱培娟页面执行页面生命周期 onHide ，同时小程序应用执行 app.onHide。小程序回到前台，应用触发 app.onShow ，当前朱培娟页面触发 onShow。2. 场景2：首页点击tab切换到朱培娟页面，观察页面隐藏、加载、显示、渲染完成日志。3. 场景3：朱培娟点击tab切回首页，观察tab驻留内存特性。
2026-09-19 22:15:28
141
原创 微信小程序 《3.2创建标签》
注意：pages数组顺序代表页面注册顺序；tabBar的list数组配置每一个底部标签，需要准备对应图标素材放入images文件夹。不在window中写固定 navigationBarTitleText ，交给各个页面json单独配置标题。其余人物页面wxml只修改title标题和内部简介文本，结构完全一致，删除自定义navigation‑bar组件、删除scroll‑view标签，直接使用系统原生导航栏。
2026-09-19 20:26:19
68
原创 微信小程序《3.1 创建页面和导航》
小程序是多页面应用，一个项目可以包含多个页面，通过 app.json 注册页面，使用 组件实现页面跳转。本案例主题：中国航天领域重要成果。首页展示3个导航条目，点击分别跳转到载人航天、探月工程、卫星应用页面；课后作业：新增2个页面，总共5个跳转页面，修改icon type显示不同图标。注册新页面：只需要在 app.json 的 pages 数组添加页面路径，保存后开发者工具自动生成wxml/wxss/json/js四个页面文件，不用手动新建文件夹。数组第一个页面为小程序启动首页。
2026-09-14 10:43:44
136
原创 微信小程序《案例2.4Flex布局》
Flex（弹性布局）是小程序页面布局最常用的方案，能够轻松实现元素水平、垂直排列，等分空间、嵌套混合布局。本次案例实现三种布局效果：水平均匀布局、左右混合布局、上下混合布局；课后作业要求：把第一行水平布局修改为从从右到左反向排列。
2026-09-14 10:36:45
194
原创 个人微信小程序备案流程（2026实操版）
提交备案 → 微信初审（1‑6天）初审通过 → 工信部短信核验（24小时内完成）核验完成 → 省管局终审（1‑20天）终审通过 → 获取备案号 ✅。
2026-09-13 13:29:29
1029
原创 微信小程序《案例2.3 盒模型》
本案例通过微信小程序实现三位核物理学家简介展示，深入理解CSS盒模型。每个view元素均为盒子，由content、padding、border、margin四部分构成。通过设置宽高、背景色、边框及内外边距，对比content-box与border-box盒模型差异：前者width仅含内容区，后者width包含padding与border。实操中掌握padding（内边距）与margin（外边距）的区别，强化了对页面布局原理的理解，为小程序样式开发奠定基础。
2026-09-13 12:48:28
109
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人