微信小程序--家庭记账本开发--02

代码文件的了解

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

微信小程序--家庭记账本开发--02

文件概述

一个微信小程序一般有有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": []
        }
    }
}

由上可得,一个微信小程序文件,由app.js来定义启动入口,app.json来定义每个页面以及windows基本配置,pages文件夹中每个页面文件夹下的.js文件包括一个page方法,定义布局信息,其他为配置文件、布局文件、样式文件。

微信小程序--家庭记账本开发--02

上一篇:域名在QQ微信被拦截怎么办 怎么样才能让被微信屏蔽的网址正常访问使用


下一篇:微信小程序开发工具预览蓝屏问题处理过程