微信小程序新手教程目录结构分析 _睿知

微信小程序新手教程目录结构分析，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧
目录结构分析
学习一个框架，首先应该了解一下他的目录结构，小程序的目录接口如下图：

文章插图
从demo中可以看到主要分为两部分
1、系统文件或者公用文件
文件必填作用app.js是小程序逻辑，app启动首先会执行该文件内的部分方法app.json是小程序公共设置，整个app的系统配置app.wxss否小程序公共样式表，可以理解为前端中的base.css2、页面文件(page文件夹)
文件类型必填作用js是页面逻辑，可以理解为 php或java的controller，主要来处理业务逻辑wxml是页面结构，可以理解为视图层 html wxss否页面样式表，可以理解为css文件json否页面配置，当前页面配置文件下面分别来学习每个文件的具体用法及作用
app.js
小程序启动先回执行此文件中的方法，此文件为空，程序也可以正常执行，但通常不会这么做，一般用于执行App方法返回app对象。
App({
onLaunch: function () {
console.log('onLaunch')
},
onShow: function () {
console.log('onShow')
},
onHide: function () {
console.log('onHide')
},
other:function(){
}
})
代码中的几个方法，非常类似原生app开发中的生存周期函数，详细解释如下：
属性类型描述触发时机onLaunchFunction生命周期函数－－监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）onShowFunction生命周期函数－－监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShowonHideFunction生命周期函数－－监听小程序隐藏当小程序从前台进入后台，会触发 onHide其他Any开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
当程序启动时，首先会执行onLauch函数，启动成功后会执行onShow,当程序退出活动窗口，会执行onHide函数，程序再次切换到活动窗口会执行onShow 。

文章插图
注意：
App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。
app.json
我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab等，简单的理解就是配置文件了。
配置项表：
属性类型必填描述pagesArray是设置页面路径windowObject否设置默认页面的窗口表现tabBarObject否设置底部 tab 的表现networkTimeoutObject否设置网络超时时间debugBoolean否设置是否开启 debug 模式pages属性
pages属性的第一个值为系统启动页面，如下图配置项，那么小程序启动后，会先运行 logs页面
{
"pages":[
"pages/logs/logs",
"pages/index/index"
]
}
window属性
windows属性用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/whitenavigationBarTitleTextString
导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉背景字体、loading 图的样式，仅支持 dark/lightenablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面相关事件处理函数。tabBar