微信小程序——页面结构

页面是小程序开发过程中的基本单元,每个页面都以单独的文件夹存放在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的区别
  1. 标签名称不同
    对应常用的标签,比如布局标签、文本标签、 图片标签和页面跳转标签,在HTML和WXML中分别对应如下:
  • HTML(div、span、img、a)
  • WXML(view、text、image、navigator)
  1. 属性节点不同
    以页面跳转标签为例
  • HTML <a href="#">超链接</a>
  • WXML<navigator url="pages/index/index"></navigator>
  1. WXML提供了类似于Vue中的模板语法
  • 数据绑定
  • 列表渲染
  • 条件渲染

页面中的WXSS

什么是WXSS

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的CSS。

WXSS和CSS的区别
  1. WXSS新增了 rpx 尺寸单位
  • CSS 需要手动的像素单位换算,如 rem
  • WXSS 在底层支持新的尺寸单位rpx,在不同尺寸的屏幕上小程序会自动进行换算
  1. WXSS提供了全局样式和局部样式
  • 项目根目录下的 app.wxss 作用于所有小程序页面
  • 每个页面文件夹下的 .wxss 仅对当前页面生效
  1. WXSS仅支持部分CSS选择器
  • .class 和 #id
  • element
  • 并集选择器和后代选择器
  • ::after 和 ::before 等伪类选择器

页面中的 .js 文件

什么是JS

JS (JavaScript的简称)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

小程序中的 .js 文件

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

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

页面中的 .json 文件

什么是JSON

JSON是一种数据格式,实际开发中经常以配置文件的形式出现。

配置页面

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容