Web前端培训-高端面授Web前端培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

微信小程序的页面由哪几部分组成?

  • 发布时间:
    2023-06-15
  • 版权所有:
    云和教育
  • 分享:

一个微信小程序是由一个或多个页面组成的,这些页面被存放在pages目录中。下面以pages目录下的index页面为例展示其组成部分,index页面的组成部分如下图所示。

微信小程序index页面

由上图可知,index页面由4个文件组成,分别是index.js、index.json、index.wxml和index.wxss。

微信小程序页面的index.js、index.json、index.wxml和index.wxss文件分别使用JS、JSON、WXML和WXSS语言编写,关于这4种语言的你了解多少呢?

JS:类似网页制作中的JavaScript语言,用于实现页面逻辑和交互,文件扩展名为.js。需要注意的是,微信小程序中的JS不含DOM和BOM,但它提供了丰富的API,可以实现许多特殊的功能,例如微信登录、音频播放、文件上传等。

JSON(JavaScript Object Notation,JavaScript对象符号):用于利用JSON语法对页面进行配置,文件扩展名为.json。

WXML(WeiXin Markup Language,微信标记语言):类似于网页制作中的HTML语言,用于构建页面结构,文件扩展名为.wxml。

WXSS(WeiXin Style Sheets,微信样式表):类似于网页制作中的CSS语言,用于设置页面样式,文件扩展名为.wxss。

微信客户端在加载微信小程序页面时的步骤。

1.读取并解析页面中JSON文件的配置。

2.加载页面的WXML文件、WXSS文件和JS文件,实现页面渲染。

其中,页面中WXSS文件的样式会覆盖项目根目录下的app.wxss文件中相同的全局样式;页面中JS文件的Page()函数会被调用,用于创建页面实例。