小程序的直观表现只是多个相互关联的页面。我们的小程序Hello WXapplet也一样,它由2个相互关联的页面构成:首页(index)与信息页(logs)。点击首页的头像就切换到信息页,在信息页点击“返回”可以再返回到首页。
小程序的开发实际上就是实现这些页面的展示(视图),以及实现“页面上用户交互事件”、“页面间切换逻辑”、“数据存储及网络调用”等事务与逻辑处理的过程。 Hello WXapplet项目目录及文件构成,我们先从文件目录结构上来了解Hello WXapplet项目的构成。
点击开发者工具左侧导航的“编辑”,我们可以看到Hello WXapplet项目的目录结构及包含文件。目录结构显示:小程序项目在创建时的目录(示例的本地开发目录为:“D:\小程序巧应用”)之下,包含3个app开头的文件(app.js、app.json、app.wxss)以及pages目录与utils目录。其中pages目录存放2个页面(index与logs)的构成文件。从示例中,我们看到:每个页面都是一个目录,目录名就是唯一的页面名,其下再由以页面名为前缀的2~4个文件组成。
对小程序的目录文件结构,我们可以归纳一下:左侧3个app文件必须放在小程序根目录下,其他文件则由开发者自由控制。这3个文件说明如下:app.js是小程序的脚本代码,用来监听并处理小程序的生命周期函数、声明全局变量。
·app.json是对整个小程序的全局配置,配置小程序是由哪些页面组成,配置小程序的窗口背景色等。
·app.wxss是整个小程序的公共样式表。
其中app.js和app.json是必需的。
小程序页面是由同路径下同名但不同后缀的2~4个文件组成:
·.js后缀的文件是页面脚本文件,该文件实现页面逻辑与事件处理。
·.json后缀的文件是页面配置文件。
·.wxss后缀的是页面样式表文件。
·.wxml后缀的文件是页面结构文件,该文件与.wxss文件一起构建出页面。
其中.js与.wxml文件是必需的。