1.微信小程序目录结构

微信小程序默认的目录结构，下面一一介绍：

1.1 小程序的文件格式介绍

在项目中我们可以看到四种文件类型：

.js后缀的文件是脚本文件，页面的交互等代码在这里实现；

.json后缀的文件是配置文件，主要是json数据格式存放，用于设置程序的配置效果；

.wxss后缀的是样式表文件，类似于前端中的css,用于对界面进行美化；

.wxml后缀的文件是页面结构文件，用于构建页面，在页面上增加控件。

1.1 pages目录介绍

1pages:主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml文件是界面文件，.js是事件交互文件，用于处理界面的点击事件等功能；.wxss为界面美化文件，让界面显示的更加美观；.json为配置文件，用于修改导航栏显示样式等，小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要。

注意：文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.

1.2 utils

该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。

1. module.exports = {
2. formatTime: formatTime
3. }

对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用一下代码引入

1. var util = require('../../utils/util.js')

然后就可以调用该方法。

 

1.3 app.js、app.json、app.wxss

app.js : 系统的方法处理文件，主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等

app.json : 系统全局配置文件，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改；

app.wxss : 全局的界面美化代码

 

第二部分：开发工具菜单介绍

1.开发工具界面

2.菜单区介绍

2.1 编辑

默认为编辑状态显示，下面的编译为手动编译功能，通常情况下修改文件后保存会刷新界面显示，如果修改的是.js文件，保存时会自动进行编译和刷新界面显示

2.2 调试

通过界面我们可以看出编辑状态的菜单栏与chrome浏览器的调试界面几乎相同，包括控制台、源码、网络等，并且支持断电调试，功能几乎与前端开发调试类似，不再介绍，

调试的时候，菜单栏下面会多出一个后台和缓存按钮：

后台 ： 是模拟程序运行到后台（按Home键回到主页面，不是退出程序）时的执行情况，进入后台时再次点击会进入前台执行。

缓存 ： 数据的本地缓存，可以在这里进行清除缓存等操作。

2.3 项目菜单

3.界面显示栏

界面显示栏包括上下两部分，上面设置运行环境，下面显示运行效果，各部分介绍：

1 选择运行的环境，上面的手机型号不具体指该手机，单指相同的分辨率，例如iphone6 指375 * 667分辨率的所有机型

2 模拟网络运行环境，包括wifi、4G、3G、2G，默认为wifi运行环境

3 界面效果展示区，主要显示程序的运行效果

注意：切换运行的手机分辨率时记得要手动编译以下，否则界面显示不正确

4.目录结构栏和编辑栏

目录结构已经介绍过了，不在多做介绍；

编辑区显示当前正在编辑的文件，如果是正在编辑的文件，名字显示为淡绿色，并且未保存的文件，文件名后面会有一个绿色的点，注意如果修改过文件后没有保存，程序不能正确运行