分享微信小程序之文件结构目录解析

分享微信小程序之文件结构目录解析
在微信开发者工具中添加项目并勾选创建默认小程序，系统给我们自动创建的小实例是第一个页面显示我们的头像、昵称还有hello world的文本，点击头像跳转到另外一个页面显示启动日志，效果如下：

在微信开发者工具中添加项目并勾选创建默认小程序，系统给我们自动创建的小实例是第一个页面显示我们的头像、昵称还有hello world的文本，点击头像跳转到另外一个页面显示启动日志，效果如下：进入【编辑】选项，你会看到如下目录结构：

在图中的目录可以看到几种文件格式：.wxml、.js、.json、.wxss、其中：.wxml—页面结构文件；.js—脚本文件，包含页面/程序的声明周期函数，一些wxml页面的监听函数的实现也是在这个文件里面编写的；.json—配置文件；.wxss—样式表；从大的方向来看，根目录下包含pages,utils目录和app.js app.json,app.wxss等内容。1.pages目录      1.1新增页面并进行配置pages—包含页面文件，如要在项目中添加页面，要在pages目录先，新建一个子目录如上图的index目录，目录中要包含.wxml .js 这两个是必须的，还有.json .wxss是可选的。             而且这几个文件的文件名是一致的，后缀名不相同。新建新的页面文件之后，还需要在app.json文件中配置页面路径，否则程序是找不到这个页面的相关文件的，如我要新建一个叫做myNewPage的页面，页面中包含一个图片，我要这样做：新建之后我要在app.json文件中的pages数组下配置页面：

{ "pages":[ "pages/newPage/myNewPage", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }