小程序基础 —— 08 文件和目录结构

文件和目录结构

一个完整的小程序项目由两部分组成：主体文件、页面文件：

• 主体文件：全局文件，能够作用于整个小程序，影响小程序的每个页面，主体文件必须放到项目的根目录下；

  • 主体文件由三部分组成：
    • app.js：小程序入口文件；
    • app.json：小程序的全局配置文件；
    • app.wxss：小程序的全局样式；

  在上一节创建项目的时候，我们已经可以看到对应的这三个文件：

  

  注意事项：主体文件的名字必须是 app，app.js 和 app.json 文件是必须的！

• 页面文件：页面文件是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，一个页面一个文件夹；
  
  上图中的 pages 中有一个 index 页面，index 页面是一个单独的文件夹，每个页面由四个文件组成，这四个文件只对当前页面生效，这四个文件分别为：

  • .js：页面逻辑
  • .wxml：页面结构
  • .wxss：页面样式
  • .json：小页面配置

  注意事项：.js 文件和 .wxml 文件是必须的；

在说完主体文件和页面文件后，我们可以打开上一节创建的小项目新文件进行分析。

在打开这个新项目之后，先看一个注意事项，如下图：

小程序目前有两种渲染模式，一种是 Skyline 渲染模式，另一种是 WebView 渲染模式。SkyLine 是最新的渲染模式，目前还不是很成熟，因此需要将这个项目的渲染模式从 SkyLine 修改为 WebView 渲染模式。

我们可以在项目文件中直接进行修改，点击项目文件中的 app.json 文件，找到以下三个属性：

• renderer
• rendererOptions
• componentFramework

在 app.json 中将这三个配置项去掉，然后保存，重新刷新即可将渲染模式调整为 WebView 模式；

在调整渲染模式之后，接下来看一下整个项目的目录结构：

• 在分目录下有三个以 app 开头的文件，这三个文件是项目的主体文件，也是全局文件；
• 在项目的根目录下有一个 pages 文件夹，pages 中存放的是小程序的页面，目前仅有一个 index 页面，一个页面由四个文件组成；
• 在项目的根目录下还有一个 components 文件夹，它是用来存放每个页面的公共组件的；
• 在根目录下还有三个 .json 文件，以 .json 结尾的都是配置文件；

参考视频：尚硅谷微信小程序开发教程