小程序的目录结构

目录结构
目录描述
1.pages
2.utils
3.app.js
4.app.json

一、目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：在这里插入图片描述

一个小程序页面由四个文件组成，分别是：在这里插入图片描述

引用自微信小程序文档：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

一个小程序项目主体结构大致是：

├── components (公共组件目录)
│   ├── @anima (动画组件)
│   └── ...
├── images（公共图片）
│   └── icon
│      ├── [email protected]
│      └── [email protected]
├── pages（主包目录）
│   └── home (app.json 设置的入口页)
│       ├── home.wxml
│       ├── home.js
│       ├── home.json
│       └── home.wxss
├── style（公用样式目录）
├── subpackages（分包目录）
│   │── news
|   └── store
├── utils（公共模块，工具类）
│   ├── config.js（项目配置）
│   └── local.config.js (本地配置，git忽略)
├── .editorconfig
├── .gitignore
├── app.js
├── app.json
├── app.wxss
├── project.config.json
└── README.md

二、目录描述

1.pages

项目开发目录 相当于vue脚手架中的src目录

一个完整的小程序页面包括4部分：
1. xxx.wxml :模板页面（也称视图，类似于html）
	
	常用标签：
		view:相当于div
		button:按钮
		image:嵌入图像  类似于img
		text:添加文本 相当于span
		block:标签一个组织区域，最终不会渲染到页面上，相当于vue中的template
		
2. xxx.wxss:页面样式 相当于css

   注意：用rpx代表响应式单位 类似于rem
   
3.xxx.js: 写页面逻辑的 

4.xxx.json:页面的配置

2.utils

存放封装的工具函数的目录

3.app.js

	是小程序的入口js文件 相当于vue中的main.js
	通过App({
    
    })构造器实现

4.app.json

程序的全局配置

例如：
{
    
    
//小程序管理的所有页面路径
  "pages":[  
    "pages/index/index",
    "pages/logs/logs"
  ],
  
  //小程序的窗口表现
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "1909A",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}