- 博客(17)
- 收藏
- 关注
RSS订阅原创 微信小程序：条件渲染与 Picker 组件实战详解
1. 适配刘海屏与胶囊按钮js?})通过获取右上角胶囊按钮的位置，计算右侧留白，保证标题不被胶囊遮挡；再结合处理状态栏高度。这是自定义导航栏的标准做法。2. 多插槽支持组件在options中开启，对外暴露leftcenterright三个具名插槽，当backhomeButton为 false 且未传title时，插槽内容会渲染出来，灵活性很高。3. 显示/隐藏动画show属性通过observer监听，用 opacity 过渡实现淡入淡出，同时保留高度占位，避免页面布局跳动。条件渲染链式判断，
2026-10-27 13:40:55
181
原创 微信小程序计时器开发实战
在attached里获取胶囊按钮位置，动态计算左右留白，适配 iOS/Android 和刘海屏：javascriptios:!isAndroid,?: ``})这个 Demo 覆盖了：自定义导航栏封装与安全区适配、多插槽组件、倒计时的守卫逻辑、伪元素水印、的 flex 铺满布局，以及新版 API 的兼容写法。建议自己跑一遍代码再调调样式，理解会更深刻。
2026-10-23 10:57:21
176
原创 自动随机变化的颜色实践
app.json中开启自定义导航栏：json页面引入导航栏组件：jsonWXML 中一行标签即可使用：xml<navigation-bar title="自动随机变化的颜色" back="{{false}}" color="black" background="#FFF"></navigation-bar>隐藏返回键，因为这是根页面。随机数生成颜色字符串 → 存进data→ WXML 内联style绑定。真正需要注意的不是算法，而是定时器的生命周期管理——启动容易，忘记清理就会埋下隐患。
2026-10-17 20:01:44
167
原创 微信小程序实战：随机颜色文字与定时刷新
知识点说明数据绑定动态样式定时器自动刷新箭头函数保证this指向 Page 实例随机数生成十六进制颜色setData触发视图更新处理超长内容滚动。
2026-10-13 15:51:21
153
原创 微信小程序实战：图片点击播放音频功能开发
项目用了一个组件，支持多 slot、返回按钮、首页按钮、加载状态等。核心是通过获取胶囊按钮位置，动态计算导航栏的 padding，适配不同机型。javascript复制下载ios:!isAndroid,})},替代了替代了获取窗口信息这些新 API 在小程序基础库 2.20.1 之后推荐使用，性能更好。这个 demo 虽然简单，但涵盖了不少小程序开发的知识点：页面生命周期与数据绑定音频 API 的使用自定义组件的开发（多 slot、生命周期、属性 observer）响应式单位。
2026-10-13 15:40:32
129
原创 微信小程序 swiper 和 switch 组件实战：中国精神轮播展示
swiper适合轮播展示，记得设置高度switch开关组件返回布尔值，配合setData实时控制轮播属性通过wx:for遍历数组，动态生成轮播项数据驱动视图，开关切换 → 数据更新 → 视图刷新。
2026-10-09 09:21:04
136
原创 微信小程序 checkbox 和 radio 组件实战：诗词排版小工具
适合多选场景，返回数组适合单选场景，返回字符串通过setData+ 内联 style 绑定，轻松实现样式动态切换。
2026-10-09 09:16:01
129
原创 微信小程序模板（Template）详解
姓名：{{name}}</view><view>年龄：{{age}}</view><view>所学专业：{{major}}</view><view>姓名：{{name}}</view><view>年龄：{{age}}
2026-10-08 22:02:48
102
原创 微信小程序模块化开发：四种模块引用方式
模块类型引用方式适用场景全局模块getApp()跨页面共享数据不同目录模块require('相对路径')公共工具函数相同目录模块require('文件名')页面专属逻辑拆分本模块直接定义简单临时变量。
2026-10-08 21:55:49
154
原创 微信小程序 ICP 备案实操（公众平台直备）
现在微信小程序可直接在公众平台提交 ICP 备案（直备），无需云服务商。ICP 备案是工信部要求，免费；注意区分：微信主体认证（300 元 / 年）≠ ICP 备案。备案号前缀黑ICP备代表黑龙江管局。主体认证 → 填报信息 → 人脸核验 → 腾讯预审 → 管局审核 → 获取备案号。整个周期大概 1～4 周，尽早备案，避免接口受限、小程序被拦截。
2026-09-22 13:43:47
192
原创 微信小程序实践：数据绑定与事件绑定
项目引入了组件，通过属性配置标题、颜色和是否显示返回按钮：wxml<navigation-bar title="数据和事件绑定" back="{{false}}" color="black" background="#FFF"></navigation-bar>该组件在attached生命周期中获取胶囊按钮位置和窗口信息，动态计算左右内边距和安全区高度，适配不同机型。数据绑定使用{{}}，支持运算、对象、数组事件绑定使用bindtap，通过setData更新数据。
2026-09-20 13:45:59
86
原创 微信小程序生命周期函数实践
onLaunchonShowonHideonLoadonShowonReadyonHide理解生命周期有助于在合适时机执行逻辑，提升用户体验。配合自定义组件和统一样式，能构建结构清晰的小程序。
2026-09-20 13:36:49
180
原创 微信小程序实战：感动人物展示（TabBar 导航）
一个展示"中国网事·感动2023"年度网络人物的小程序，含 3 个 TabBar 页面：首页、贾潮江、朱培娟。核心知识点是TabBar 配置与图标切换，适合入门练手。技术栈：微信小程序原生开发 + Skyline 渲染引擎项目虽小，覆盖了小程序核心知识点：全局配置、TabBar 导航、图标选中态切换、数据绑定、WXSS 布局。相比 navigator 跳转方案，TabBar 更适合做平级主功能切换，是大多数小程序必备的基础能力。
2026-09-16 21:18:49
97
原创 微信小程序实战：中国航天成果展示
一个展示中国航天成果的小程序，含首页导航 + 四个详情页（载人航天、探月工程、卫星应用、深空探测）。适合入门练手，核心是页面创建与导航。核心是适配刘海屏与胶囊按钮：javascript})项目虽小，覆盖了小程序核心知识点：全局/页面配置、路由导航、数据绑定、WXSS 布局、自定义组件、安全区域适配。适合作为入门练手项目。
2026-09-16 21:10:00
89
原创 微信小程序实战：用 Flex 弹性盒模型打造自适应导航栏与混合布局
是一个功能完整的自定义导航栏组件，支持返回按钮、首页按钮、标题、加载状态、多插槽等能力。核心逻辑在于attached生命周期中，根据设备信息动态计算安全区域和左右宽度：jsios:!isAndroid,})},胶囊按钮避让：通过获取右上角胶囊按钮的位置，计算出右侧需要预留的宽度，确保标题不被遮挡。安全区域适配：通过获取刘海屏/状态栏高度，在 Android 和开发者工具中动态增加顶部内边距。场景关键技术自定义导航栏flex: 1水平均匀布局左右混合布局嵌套 Flex、
2026-09-15 14:11:18
148
原创 微信小程序实战：CSS 盒模型可视化教学
CSS 盒模型由四部分组成：text│ margin（外边距） ││ │ border（边框） │ ││ │ │ padding（内边距）│ │ │因，需自行实现导航栏。组件通过获取胶囊按钮位置，动态适配不同机型：jsios:!isAndroid,?: ``})支持backhomeButtontitleloadingshow等属性。本项目涵盖微信小程序开发的多个要点：✅ Skyline 渲染引擎启用。
2026-09-15 13:38:31
57
原创 微信小程序字体与文本样式设计作业
通过本次实践，我熟练掌握了微信小程序中文本相关 CSS 属性的用法，并结合自定义导航栏与滚动视图，构建了一个简洁且风格明确的文本展示页面。后续可以继续扩展动画、背景渐变等，让页面更生动。
2026-09-07 15:27:23
266
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人