一：简介
.json为配置文件
.wxml 为模板文件，相当于HTML模板
.wxss 为样式文件，相当于HTML的CSS样式表
.js 为JS 脚本逻辑文件，相当于HTML的js脚本
二：总结构
一个描述整体程序的 app
多个描述各自页面的 page
一个项目IDE配置文件project.config.json
一个共用程序逻辑库
1.一个小程序主体部分(名称为app)由三个文件组成，必须放在项目的根目录
文件 必填 作用
app.js 是 小程序逻辑
app.json 是 小程序公共配置
app.wxss 否 小程序公共样式表
2.多个描述各自页面的 pages(pages目录存储小程序的每个页面)
文件 必填 作用
页面名称.js 是 本页面逻辑
页面名称.wxml 是 页面结构
页面名称.wxss 否 页面样式表
页面名称.json 否 页面配置
注意：
1)为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
2)从上可看出可包含.json、.wxml、.wxss、.js4个类型的文件
.json配置文件，即是当前这个页面的配置文件，
默认创建项目时，每个页面底下没有.json配置文件，因为它不是必填必须有的文件
index和logs两个页面
3.根目录下的project.config.json
1).项目配置文件或称为项目IDE配置文件
在“微信开发者工具”上做的任何配置都会写入到这个文件。
2).应用场景：
通常在使用一个开发IDE工具的时候，都会针对各自喜好做一些个性化配置，
例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，
你还要重新配置。
3).解决办法：就是这个project.config.json项目IDE配置文件
当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，
开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，
其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项
4).引申
这么说，每个项目都可以定制了一套自己喜欢的IDE配置
项目根目录下
4.一个共用程序逻辑库(util目录)
这个目录可以自定义名称
公共的js函数文件，通过module.exports的方式暴露pages下的每个页面使用
不需要每个页面编写重复的Js代码。
module.exports暴露给页面使用
5.总结构图
总结构图
三：一个描述整体程序的 app 之app.js文件(注册小程序项目)
作用：调用了App()函数注册一个小程序，参数为一个{}对象
App()函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等
调用App(obj)函数
详情参考API文档"逻辑层/程序注册"
但要注意：
1.App() 必须在 app.js 中注册，且不能注册多个。
2.不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
3.不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
4.通过 getApp() 获取实例之后，不要私自调用生命周期函数。
例子：
API文档中Object对象有一个参数：
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
相当于ApplicationContext，在整个小程序上下文中都以使用，即服务整个小程序scope。
app.js程序主体逻辑层使用this访问，在页面.js逻辑层使用getApp().属性名称可以访问。
app.js的App({自定义Any属性})
页面.js逻辑层访问
//index.js
//获取应用实例
const app = getApp()
页面.js逻辑层访问
又例：
app.js的App({自定义Any属性})
页面.js逻辑层访问
视图使用
四:一个描述整体程序的 app 之app.json文件(配置小程序项目)
作用：对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
所有的选项配置pages、window、tabBar、networkTimeout、debug
app.json 配置项列表:
属性 类型 必填 描述
pages String Array 是 设置页面路径
window Object 否 设置默认页面的窗口表现
tabBar Object 否 设置底部 tab 的表现
networkTimeout Object 否 设置网络超时时间
debug Boolean 否 设置是否开启 debug 模式
pages属性说明：
类型是String Array(字符串数组)， 每一项都是字符串，来指定小程序由哪些页面组成。
每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要后缀，框架自动匹配pages 数组路径下 .json, .js, .wxml, .wxss 4文件进行整合。
pages字符串数组的第一个字符串页面路径【路径+文件名】为小程序显示的首页。
如开发目录为：
pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
则配如下(小程序中新增/减少页面，都需要对 pages 数组进行修改)
{
"pages": [
//这里的的第一个页面作为首页显示
"pages/index/index",
"pages/logs/logs"
]
}
其它详情参考API文档“配置”
五：页面的js逻辑层(注册页面)
js文件为小程序的逻辑文件
第三节：一个描述整体程序的 app 之app.js文件(注册小程序项目)，这是整个小程序的逻辑层
这里我们说到页面的逻辑层：
其主要功能就是“注册页面”
每个页面目录/页面名称.js
页面注册的使用：与app.js的注册小程序项目函数App(Object)类似使用
Page(Object)
Object参数对象{}表示，其指定页面的初始数据、生命周期函数、事件处理函数等。
具体详情参考API文档“逻辑层/注册页面”
页面逻辑层
object 参数内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销
六：页面的json配置(页面名称.json)
每一个页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。
总结：每个页面.json(页面配置)，其实就是对app.json的window配置项进行继承覆盖重写
应用：app.json中配置了启用上下拉刷新，但某些页面不需要，那么就可以在页面名.json中进行重写禁用了。又比如每个页的标题，也是需要重写的。
如：
{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"微信接口功能演示",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}
所有app.json中的window配置项在页面名.json中都是可以覆盖重写的，但页面名.json配置又有自己的特性是app.json小程序全局配置没有的
属性 类型 默认值 描述
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动；
只在 page.json 中有效，无法在 app.json 中设置该项
七：页的视图层
主要有两块：wxml和wxss
具体使用参考API文档"视图层/WXML"和API文档“视图层/WXS”
视图层
八：概念提升(模块化)
(一) 文件作用域：
一个描述整体程序的 app 之app.js文件(注册小程序项目)和页面的js逻辑层(注册页面)之关联。
1.在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
2.通过全局函数 getApp()可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。
// app.js
App({ globalData:1})
// a.js
var localValue ='a'
var app = getApp()
app.globalData++
// b.js
var localValue ='b'
console.log(getApp().globalData)
(二)模块化
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。
模块只有通过 module.exports 或者 exports 才能对外暴露接口。
作用：公共代码不冗余，提高复用性
典型的应用：第二第4.一个共用程序逻辑库(util目录)
// common.js(如utils/util.js)
function sayHello(name) {
console.log('Hello ${name} !')
}
function sayGoodbye(name) {
console.log('Goodbye ${name} !')
}
//暴露方式一
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
//暴露方式二
module.exports={
sayHello : sayHello ,
sayGoodbye : sayGoodbye
}
//页面逻辑js使用，如pages/index/index.js
//require引用模块js(不支持绝对路径，只能使用相对路径)
var comUtil = require("../../utils/util.js")
Page({
helloMINA:function(){
comUtil.sayHello('MINA')
},
goodbyeMINA:function(){
comUtil.sayGoodbye('MINA')
}
})
注意：
1.exports 是 module.exports 的一个引用，
因此在模块里边随意更改 exports 的指向会造成未知的错误。
所推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者关系
2.require 暂时不支持绝对路径，只能使用相对路径。
(三)框架图
架构图
：
网友评论