微信小程序入门与实战--小程序结构初探

上篇介绍了小程序环境的搭建与开发工具的使用,本篇将介绍一下小程序的基本结构。

创建种子项目

首先,我们使用建立普通快速启动模板创建一个名为ReaderAndMovie的小程序项目

项目结构

该种子项目有两个页面indexlogs页面,index页面如上所示。点击该页面头像,可以看到如下所示的logs页面

logs页面

分析项目结构

从上节的第一种图右侧可以看到

  • 根目录下的app.jsapp.jsonapp.wxss是小程序的入口文件,代表了小程序的全局配置文件;project.config.json则代表了该项目的配置文件,定义了项目的基本信息
  • Pasges文件夹下存在两个文件夹,这两个文件夹里的文件构成了indexlogs页面所需要的相关信息,注意对于这两个文件夹下的文件其文件名必须相同,下面以logs页面为例
    • logs.json代表了页面的相关配置
    • logs.js代表了页面所使用到的js脚本
    • logs.wxss代表了页面所使用的css代码
    • logs.wxml则为页面提供了基本骨架,相当于传统web开发中的html
  • Utils文件夹下的文件定义了小程序所使用到的公共方法
  • 若有需要,还可以创建其它文件夹,用于存放公共资源

总结

小程序项目包括多个app应用程序入口文件,同时还包括多个页面,每个页面都会包含多个文件,这些文件是构成一个页面的重要元素。注意,这多个文件名称必须保持一致

  • *.wxss对应web页面中的css
  • *.wxml对应web页面中的html
  • *.json则说明了web页面中的相关配置信息
  • *.js对应web页面中的js