小程序 | 1-小程序文件结构和创建新页面

基于《 itlike 2019小程序教程》 整理

点击下载：小程序开发工具

---

1 小程序的文件结构

app.json 是程序的入口，程序的页面需要在其中的 pages 节点中注册，排第一位的将作为程序首屏。

app.json 示例：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs", 
    "pages/temp/temp"   
  ]
}  

2 新建文件(夹)

2.1 新建文件夹

方式1：

方式2：

2.2 新建页面文件

方式1：

按照上图中这种 新建 Page 的方式会同时创建一个页面所需的四个文件，并且会自动将该页面注册到 app.json 的 pages 中 。

方式2（推荐方式）：

直接在 app.json 的 pages 节点中声明我们将要注册和编辑的页面，然后使用 Ctrl+S （MAC 下为 CMD+S）保存。小程序的 IDE 就会自动创建我们注册的这个目录和其中的四个页面。示例如下：

假设当前项目的 app.json 内 pages 节点中仅有如下两个页面，

{
  "pages": [
    "pages/logs/logs", 
    "pages/temp/temp"   
  ]
}  

我们想新增一个 index 界面，就可以直接在  pages 节点中新增一行 "pages/index/index", 如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs", 
    "pages/temp/temp"   
  ]
}  

然后通过 Ctrl + S （MAC 下为 Cmd + S），此时小程序编辑器就会自动创建 index 目录及内部的四个文件。