- 博客(5)
- 收藏
- 关注
RSS订阅原创 技术博客：微信小程序 —— 数据绑定与事件绑定实践
小程序是数据驱动视图，修改数据必须用，视图自动更新。{{}}插值可以直接写简单表达式，支持四则运算、对象、数组读取。对象可以根据需求扩展属性，本次在学生对象中新增major（专业），只需要在 js 和 wxml 同时补充代码即可。事件绑定bind:tap可以给按钮绑定点击回调函数，实现交互逻辑。使用第三方 UI 组件前，要确认 npm 包是否安装，否则极易出现渲染崩溃问题。
2026-09-22 14:04:19
196
原创 微信小程序多页面创建与导航实战
在小程序开发当中，几乎不会只有单个页面。我们需要掌握新建页面、页面之间互相跳转导航的能力。本案例实现一个航天主题小程序，首页展示导航列表，点击条目跳转到不同详情页。课程作业要求在原有 3 个页面基础之上新增 2 个页面，一共实现 5 个可跳转页面，同时修改 icon 显示不同系统图标。前置基础：本案例复用之前学习的盒模型、Flex 弹性布局，使用 Flex 实现导航条目左图标‑中间文字‑右侧箭头的三栏布局。小程序页面全部在app.json的 pages 数组统一管理，新增页面只需要配置路径。
2026-09-16 18:55:50
213
原创 微信小程序盒模型
CSS 盒模型是前端布局的基石，不管是网页还是微信小程序，每一个 WXML 的 view 组件都可以看作一个盒子。盒模型规定了元素尺寸如何计算，由内容 content、内边距 padding、边框 border、外边距 margin 四部分共同组成。本文基于小程序案例 2.3，动手实现科学家信息展示卡片，并且完成课程作业：新增第三个核物理学家信息盒子，带完整可运行代码与原理讲解。盒模型是小程序布局的底层基础，所有 view 组件都遵循盒模型规则。设置内容区域大小；padding：内容与边框之间内部距离。
2026-09-15 21:03:47
187
原创 微信小程序实现 三种布局
在小程序开发中，页面布局是基础能力，Flex（弹性盒模型）是小程序最常用的布局方案，告别传统浮动定位，通过简单属性就可以实现元素均分、水平、垂直、嵌套混合布局。本次通过案例 2.4 实操，搭建小程序，实现水平均匀布局、左右混合布局、上下混合布局，并且完成作业拓展：将水平布局修改为从右向左排列，带完整代码与原理解析。Flex 全称 Flexible Box，弹性盒模型。设置的元素称为Flex 容器，容器直接子元素叫Flex 项目；容器拥有主轴、交叉轴，控制主轴方向，决定子元素排列方向。
2026-09-15 20:45:18
143
原创 【论小程序开发】
在微信小程序开发中，页面样式排版是基础能力。style内联属性、class引用 wxss 样式类。很多新手分不清什么时候用 style、什么时候用 class，也搞不懂全局样式和页面样式优先级。把静态 style 全部抽离为 class 样式，增加长文本实现页面滚动效果。开发规范：静态样式不要写在 wxml 的 style 属性，抽取到 wxss，使用 class 引用，提升渲染性能；class 命名推荐短横杠分隔。样式作用域：app.wxss 全局生效；
2026-09-07 15:52:17
526
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人