微信小程序页面布局与结构详解

小程序页面的基本结构

　　在小程序中，页面是最基本的单元。每个页面都以单独的文件夹形式存放在项目目录下。每个页面文件夹通常包含四个文件：.wxml、.wxss、.js 和 .json。这些文件分别负责页面的结构、样式、逻辑和配置。

如何新建页面

　　在 .json 文件的 pages 数组下新增页面的存放路径，保存后，小程序工具会自动创建对应的页面。比如，我们要新建一个名为 index 的页面，操作如下：

1. 在 pages 数组下添加代码："pages/index/index"。
2. 保存后，工具会自动生成 index 页面的文件夹和文件。

　　页面在 pages 数组中的位置决定了实际加载的顺序。如果你希望新建的页面成为小程序的首页，只需将其放在 pages 数组的第一位即可。

页面中的 WXML

什么是 WXML？

　　WXML（WeiXin Markup Language）是小程序的标签语言，用于构建小程序页面的结构，类似于网页中的 HTML。

WXML 和 HTML 的区别

1. 标签名称不同：WXML 中的标签与 HTML 中的标签有所不同。例如，布局标签、文本标签、图片标签和页面跳转标签在 WXML 和 HTML 中分别对应如下：

   • WXML：<view>、<text>、<image>、<navigator>
   • HTML：<div>、<span>、<img>、<a>

2. 属性节点不同：以页面跳转标签为例，WXML 中的 <navigator> 标签与 HTML 中的 <a> 标签在属性上有所不同。

3. 模板语法：WXML 提供了类似于 HTML 的模板语法，支持数据绑定、列表渲染和条件渲染等功能。

页面中的 WXSS

什么是 WXSS？

　　WXSS（WeiXin Style Sheets）是一套样式语言，用于描述 WXML 组件的样式，类似于网页中的 CSS。

WXSS 和 CSS 的区别

1. 新增了 rpx 尺寸单位：WXSS 引入了 rpx 单位，小程序会自动在不同尺寸的屏幕上进行换算，而 CSS 需要手动进行像素单位换算。

2. 全局样式和局部样式：WXSS 支持全局样式和局部样式。项目根目录下的 app.wxss 作用于所有小程序页面，而每个页面文件夹下的 .wxss 文件仅对当前页面生效。

3. 选择器支持：WXSS 仅支持部分 CSS 选择器，如 .class 和 #id，并集选择器和后代选择器，以及 ::before 和 ::after 等伪类选择器。

页面中的 JS 文件

什么是 JS？

　　JS（JavaScript）是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。

小程序中的 JS 文件

　　在小程序中，我们通过 .js 文件来处理用户的操作，实现用户和界面之间的交互。例如，处理用户的点击操作、获取用户位置等。小程序中的 .js 文件可以分为三类：

1. 全局的 JS：app.js 是整个小程序项目的入口文件，通过调用 App() 函数来启动小程序。
2. 页面的 JS 文件：页面的 .js 文件是页面的入口文件，通过调用 Page() 函数来创建并运行页面。
3. 普通的 JS 文件：普通的 .js 文件是功能模块文件，用于封装常用的公共函数或属性，供页面使用。

页面中的 JSON 文件

什么是 JSON？

　　JSON（JavaScript Object Notation）是一种数据格式，实际中经常以配置文件的形式出现。

配置页面

　　小程序的每一个页面都可以使用 .json 文件来配置本页面的窗口外观。当全局配置和页面配置冲突时，页面中的配置会覆盖 app.json 中的全局配置项。