微信小程序的目录结构

当咱们打开一个微信小程序项目后，点击进入“编辑”菜单，咱们能够看到有如下5个文件/文件夹）：pages文件夹，utils文件夹，全局文件app.js文件，全局文件app.json文件，图片编辑文件工具app.wxss文件。

小程序目录结构的总体结构以下：

小程序包含一个描述总体程序的APP和多个描述各自页面的page。

文件	必填	做用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型    必填    做用

js　　　　　　是     页面逻辑

wxml　　　　  是      页面结构

wxss                 否      页面样式表

json　　　　　 否      页面配置

1.pages目录介绍

pages:主要存放小程序的页面文件，其中每一个文件夹为一个页面，每一个页面包含四个文件：

注意：

1.小程序每一个页面必须有.wxml和.js文件，其余两种类型的文件能够不须要

2.文件名称必须与页面的文件夹名称相同，如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')
复制代码 

而后就能够调用该方法。

举例：咱们直接定义一个utils函数，以下图所示：

1 function util(){
2   console.log("模块被调用了！！") 3 } 4 module.exports.util = util
复制代码

而后在index.js文件中调用这个util函数，以下所示：

 var common = require('../../utils/util.js')
复制代码

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

app.js : 系统的方法处理全局文件，也就是说文件中规定的函数和数据，在整个小程序中，每个框架页面和文件均可以使用this获取。每一个小程序都会有一个app.js文件，有且只有一个，位于项目的根目录！app.js的做用就是告诉小程序，注册一个小程序实例使用app（object）的形式注册，实现小程序在不一样阶段的须要实现的事件功能，如onLoad，onshow等，全局的on事件只有以下三个，要比页面的on事件要少。主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等.app.js 里面包含一个app() 方法，里面提供对应事件定义，以下

 1 App({
 2   onLaunch: function () { 3 console.log('App Launch') 4  }, 5 onShow: function () { 6 console.log('App Show') 7  }, 8 onHide: function () { 9 console.log('App Hide') 10  } 11 }) 12 复制代码

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

app.json : 系统全局配置文件，是必须包含的。包含设置页面路径，设置底部，网络，调试模式，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改，任何一个页面都须要在app.json中注册，若是不在json中添加，页面是没法打开的。

1  "pages":[
2     "pages/index/index", 3 "pages/logs/logs" 4  ], 5 复制代码

（框架中的json优先级高于全局的json优先级。）

app.wxss : 全局的界面美化代码，并非必须的。其优先级一样没有框架中的wxss的优先级高。

举例：在index.wxss中有头像的外边距设置

1 .usermotto {
2   margin-top: 200px; 3 } 4 复制代码

在app.wxss中也定义一个全局的头像外边距设置400px，咱们看看到底哪个被执行了。

在执行重启的过程当中，咱们能够看到全局的参数被index.wxss里面的覆盖了。

微信小程序的图片添加和处理微信小程序中添加图片是很是麻烦的，只能经过打开项目文件夹，把图片放到目录下便可。在代码中引用图片的相对路径或者绝对路径就能够了。目前小程序开发中仅支持png和jpg格式，其余格式的图片没法打开。