一、项目文件结构
微信小程序架构包含了一个描述整个程序的文件组以及多个描述各自页面文件的组成的page部分。
- 框架程序主体描述文件：app.js(必须)、app.json(必须)、app.wxss
| 文件 | 必须 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑文件，用来注册一个小程序实例 |
| app.json | 是 | 对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab |
| app.wxss | 否 | 小程序公共的样式表 |
- 各个页面的组成文件：
| 文件类型 | 必须 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑文件，用来注册一个小程序实例 |
| wxml | 是 | 页面结构，用来注册一个小程序实例 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式表 |
二、小程序逻辑文件app.js
1、调用App()来注册一个小程序，类似于angular中定义模块，但是不能注册多个。接受一个 object 参数，其指定小程序的生命周期函数等；
2、小程序的生命周期函数：
- onLaunch：小程序初始化完成的时候触发执行
- onShow：小程序从后台到前台的时候显示
- onHide：小程序从前台到后台的时候显示
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。
只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
- App() 必须在 app.js 中注册，且不能注册多个。
- 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
- 不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
- 通过 getApp() 获取实例之后，不要私自调用生命周期函数
下面是一个逻辑文件app.js的实例代码：
//app.js
/*此处定义了一个全局变量App应用实例，在其他页面的js中可以通过var app = getApp()来获取这个实例
但是在App()函数内部不能够使用getApp方法获取实例，可以参考 getUserInfo中的用法哦
*/
App({
/*监听小程序初始化完成：小程序初始化完成时触发执行，全局只执行一次哦 */
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
onShow:function(){
console.log("小程序显示时触发");
},
onHide:function(){
console.log("小程序隐藏后台执行时触发");
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
},
myFunc:function(){
console.log("我的自定义函数哦哦，可以通过app实例调用哦");
}
})三、小程序配置文件app.json
app.json是小程序的公共配置文件，包含了页面的header、content的字体样式和背景样式、路由设置、网络请求设置。
注意：该文件中不能有注释哦，可以去官查看全部的参数配置项。
| 属性 | 类型 | 必须 | 作用 |
|---|---|---|---|
| pages | Array | 是 | 设置页面路径，每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面 |
| window | Object | 否 | 设置小程序的状态栏、导航条、标题、窗口背景色 |
| tabBar | Object | 否 | 设置底部 tab 页签，最少设置一个，最多设置5个 |
| networkTimeout | Object | 否 | 设置网络超时时间 |
| debug | Boolean | 否 | 设置是否开启 debug 模式 |
下面是一个简单的app.json代码示例：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "red",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"#fff"
},
"tabBar":{
"color":"blue",
"selectedColor":"red",
"borderStyle":"white",
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"images/home.png",
"selectedIconPath":"images/home_sel.png"
},{
"pagePath":"pages/logs/logs",
"text":"日志",
"iconPath":"images/log.png",
"selectedIconPath":"images/log_sel.png"
}]
},
"networkTimeout":{
"request":10000,
"downloadFile":10000
},
"debug":true
}
注意：
navigationBarTextStyle标题字体颜色，仅支持 black/white
borderStyle页脚的tab上边框颜色，仅支持 black/white上面介绍了微信小程序中的文件情况，已经app.js、app.json的参数配置，后续将介绍页面的创建部分。欢迎大家吐槽。
建议：关于app.js、app.json文件中的参数项可以到官网去查看详细的介绍哦。本文只是简单的介绍了一些常识的参数，并结合实际demo进行了练习。关于图标可以到http://www.iconfont.cn/中去查找所需哦。
小程序框架介绍：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html?t=1476197492875