本篇前端学习笔记主要聚焦于微信小程序的开发,深入讲解了小程序页面的构建、配置文件的作用以及代码构成。首先,我们了解到小程序页面由JSON配置文件来定义,如app.json、project.config.json和sitemap.json,它们分别负责管理全局配置、项目配置和站点地图等。
1. **JSON配置文件**:
- app.json是项目的全局配置文件,用于设置小程序的基本信息、网络请求权限等。
- project.config.json用于项目级别的配置,如项目名称、版本等。
- sitemap.json定义了小程序的页面结构和跳转关系。
2. **WXML与HTML、WXSS与CSS的区别**:
- WXML是微信小程序的标记语言,类似于HTML,用来描述页面结构。
- WXSS则是小程序的样式表语言,类似CSS,但有其特定的语法和特性,如rpx单位用于响应式设计。
3. **JS逻辑交互**:
- JS文件在小程序中扮演核心角色,分为页面级和应用级。
- 小程序宿主环境提供了基础的通信模型,包括通信主体(小程序和服务器/其他应用)和通信方式(如API调用)。
- 页面渲染过程涉及生命周期方法,启动过程和组件的加载与使用,如view、scroll-view、swiper、button、image等组件的基本用法和API分类。
4. **组件与宿主环境**:
- 小程序支持组件化开发,有多种类型的视图容器和基础内容组件。
- 宿主环境还包括组件的分类,如常用的视图容器、滚动和滑动组件,以及文本和富文本展示。
5. **数据绑定与事件处理**:
- 数据绑定是通过`wx:bindtap`和`wx:bindinput`等指令实现,允许在事件处理函数中操作data中的数据,并注意事件传参的特殊性。
- 条件渲染使用`wx:if`和`wx:for`指令,其中`wx:key`确保列表渲染的唯一性。
6. **全局样式与配置**:
- WXSS与CSS在语法上有所不同,`@import`用于引入外部样式。
- 全局样式可以设置窗口的标题、背景色、导航栏样式等,如`window`节点的配置项。
- tabBar是另一个重要的配置项,用于设置底部导航栏的行为和样式。
总结起来,本篇笔记为初学者提供了微信小程序开发的核心知识点,包括页面结构的定义、样式处理、逻辑交互的实现,以及关键配置的使用,对于理解和开发微信小程序具有很高的参考价值。