夜光 带你走进微信小程序研发(五)

夜光序言:

 

理智的声音是柔和的,但它在让人听见之前决不会停歇

 

 

 

 

夜光 带你走进微信小程序研发(五)

正文:

页面文件

一个小程序页面由四个文件组成

夜光 带你走进微信小程序研发(五)

夜光 带你走进微信小程序研发(五)

1. js 文件

 

对于小程序中的每个页面,都需要在页面对应的 js 文件中调用 page 方法注册 页面示例,指定页面初始数据、生命周期回调、事件处理函数等。


2. wxml 文件

 

WXMLWeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。Wxml 文件主要具有数据绑定、列表渲染、条 件渲染、模板和引用的能力。具体的能力如何使用会在后面章节中涉及时做介绍。


 

3. json 文件

 

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配 置,页面中配置项会覆盖 app.json window 中相同的配置项。

 

新设置的选项只 会显示在当前页面上,不会影响其他页面。

 


4. wxss 文件

 

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

在页面文件中只要用于设置当前的样式效果,该文件中规定的样式会覆盖 app.wxss 全 局样式中产生冲突的规定,但不会影响其他页面。

 


其他文件

 

除了介绍的常用文件外,小程序还允许用户自定义路径和文件名,用于创建一些辅助文件,如本章新建的 Hello World 小程序中 utils 文件夹就是用来存放 公共 JS 文件

夜光 带你走进微信小程序研发(五)

全局调用自定义的 JS 文件前需要在被调用 JS 文件中使用 module.exports ={可被调用的函数}进行声明,如

夜光 带你走进微信小程序研发(五)

在调用时只需在文件中加入 const https = require('文件目录');即可调用

夜光 带你走进微信小程序研发(五)