页面是小程序开发过程中的基本单元,每个页面都以单独的文件夹存放在pages目录下,页面文件夹包含四个文件,分别是 .js文件、.json文件、.wxml文件和 .wxss文件。
新建页面
在app.json文件的pages数组下新增页面的存放路径,保存,小程序开发工具会帮我们自动创建对应的页面。比如我们要新建一个detail的页面,操作如下:
在pages数组下添加代码
"pages/detail/detail"
添加完之后的pages数组
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/detail/detail"
]
页面在pages中的位置代表实际加载的顺序,如果需要把新建页面当作小程序的首页,只需要把新建页面放到数组的第一位即可。
页面中的WXML
什么是WXML
WXML(WeiXin MarkUp Language)是小程序的标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
WXML和HTML的区别
- 标签名称不同
对应常用的标签,比如布局标签、文本标签、 图片标签和页面跳转标签,在HTML和WXML中分别对应如下:
- HTML(div、span、img、a)
- WXML(view、text、image、navigator)
- 属性节点不同
以页面跳转标签为例
- HTML <a href="#">超链接</a>
- WXML<navigator url="pages/index/index"></navigator>
- WXML提供了类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
页面中的WXSS
什么是WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的CSS。
WXSS和CSS的区别
- WXSS新增了 rpx 尺寸单位
- CSS 需要手动的像素单位换算,如 rem
- WXSS 在底层支持新的尺寸单位rpx,在不同尺寸的屏幕上小程序会自动进行换算
- WXSS提供了全局样式和局部样式
- 项目根目录下的 app.wxss 作用于所有小程序页面
- 每个页面文件夹下的 .wxss 仅对当前页面生效
- WXSS仅支持部分CSS选择器
- .class 和 #id
- element
- 并集选择器和后代选择器
- ::after 和 ::before 等伪类选择器
页面中的 .js 文件
什么是JS
JS (JavaScript的简称)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
小程序中的 .js 文件
在小程序中,我们通过 .js 文件来处理用户的操作,实现用户和界面之间交互。如用户的操作,获取用户位置等。小程序中的 .js 文件可以分为三类
- 全局的 app.js
- 是整个小程序项目的入口文件,通过调用 App() 函数来启动小程序
- 页面的 .js 文件
- 是页面的入口文件,通过调用 Page() 函数来创建并运行页面
- 普通的 .js 文件
- 是普通的功能模块文件,用来封装常用的公共函数或者属性,供页面使用
页面中的 .json 文件
什么是JSON
JSON是一种数据格式,实际开发中经常以配置文件的形式出现。
配置页面
小程序的每一个页面,都可以使用 .json 文件来配置本页面的窗口外观,当全局的配置和页面的配置冲突时,页面中的配置会覆盖 app.json 中的全局配置项。