2

代码文件的了解

对于一个程序的开发，代码的了解的必须的，不同的后缀名文件有着不同的作用，通过学习，对于微信小程序开发中的文件有了自己的理解。

文件概述

一个微信小程序一般有有pages文件夹，utils文件夹，以及app.js、app.json、project.config.json文件，他们分别的作用如下：

1.pages文件夹：如该文件夹的名称所示，page的复数，多个页面，所以，在该文件夹下主要用于存放小程序的页面文件，其中在该文件夹下的子文件夹每个为一个不同的页面，每个页面包括四个文件，功能如下：

XX.js：逻辑文件，也称事件交互文件和脚本文件，用于处理界面的点击事件等功能，像设置初始数据，定义事件，数据的交互，逻辑的运算，变量的声明，数组，对象，函数，注释的方式等，其语法与javascript相同。文件中必须要有。

XX.json：配置文件，主要是json数据格式存放，用于设置程序的配置效果。值得注意，【app.json可以用来配置整个微信小程序，但是不同页面文件夹下的.jso.文件只能配置该页面的显示效果】。

XX.wxml：界面文件，是页面结构文件，用于构建页面，在页面上增加控件。全称是weixin markup lanuage的缩写，微信标记语言。跟其他一般标记语言一样，标签成对， 标签名小写。可以通过引用class来控制外观，也可以通过绑定事件来进行逻辑的处理，通过渲染来完成我们需要的列表等。是连接用户操作和后端逻辑的纽带桥梁。文件中必须要有。

XX.wxss：样式表文件，类似于前端中的css，是为.wxml文件和page文件进行美化的文件，让界面显示的更加美观。

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

3.app.js：系统的方法处理全局文件，也就是说文件中规定的函数和数据，在整个小程序中，每一个框架页面和文件都可以使用this获取。每个小程序都会有一个app.js文件，有且只有一个，位于项目的根目录！app.js的作用就是告诉小程序，注册一个小程序实例使用app（object）的形式注册，实现小程序在不同阶段的需要实现的事件功能。

App({

....

})

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

{

"pages": [

"pages/index/index",

"pages/logs/logs"

],

 

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

}

}

5.project.config.json:在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

{
    "description": "项目配置文件",
    "packOptions": {
        "ignore": []
    },
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true,
        "autoAudits": false
    },
    "compileType": "miniprogram",
    "libVersion": "2.5.2",
    "appid": "wxd2db7907499a539e",
    "projectname": "test02",
    "debugOptions": {
        "hidedInDevtools": []
    },
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}