微信下程序开发框架配置-组成部分-生命周期-项目架构

本文链接：https://blog.csdn.net/leng_nuan/article/details/81387550

微信小程序开发框架由：底层实现、组成部分、生命周期、项目架构、路由

1. 底层实现：统一接口，不同实现
开发只需要考虑框架的语法和规则，不用关心底层如何实现。需要相应的功能，只需要调用相应的数据接口。
底层操作系统有不同的实现方法，同一功能，底层操作系统提供的调用方法、返回结构都不尽相同，微信须在不同的操作系统上实现该功能。

2. 小程序5个组成部分
a. APP:指小程序整个项目
b. window：用于设置小程序的状态、导航条、标题、窗口背景色
c. 页面：一个APP包含若干个页面。微信规定，同时打开的也页面最多不超过5个
d. 组件：框架维为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。这些组件是构成页面的基本元素。
e. 路由：不同页面之间的跳转称为路由。

3. 生命周期
a. App启动阶段：加载小程序window配置，注册程序和页面；
b. Page启动阶段：完成页面资源加载、页面渲染、页面挂载；
c.销毁阶段：完成页面隐藏、卸载和销毁。

4 .项目架构
用户点击左上角关闭或按设备Home按键离开微信时，小程序并没有直接销毁，而是进入了后台；当用户再次进入微信或再打开小程序时，小程序又从后台进入前台。
只有当小程序进入后台一定时间或系统资源占用过高时，小程序才会被真正销毁。
○ Pages ：目录存储小程序的框架页面，一个页面是一个目录
○ index： 首页，欢迎页

index.js 监听并处理页面的生命周期函数、获取小程序实例、声明并处理数据、响应页面交互事件等。
index.wxml veiw、image、text来搭建页面结构，绑定数据和交互处理函数

○ app.js ：监听并管理小程序的生命周期函数、声明全局变量、调用框架提供丰富的API。同样小程序的页面Pager也有自己的生命周期。
a. 在app.js文件里，用APP()函数注册一个程序。APP函数主要有4个监听函数：

 - onLaunch : 监听小程序初始化，当小程序初始化完成时触发onLaunch(全局只触发一次)



 - onShow： 监听小程序显示，当小程序启动或从后台进入前台显示时触发onShow



 - onHide:  监听小程序隐藏，小程序从前台进入后台时触发onHide onError:

App()函数用来注册一个小程序。接受一个object参数（指定小程序的生命周期函数）。App()必须在app.js中注册，且不能注册多个；
不要在地冠以App()内的函数中调用getApp(),使用this既可以拿到app实例；
不要在onLaunch的时候调用getCurrentPage( ){获得当前页面实例},此时page还没有生成；
通过getApp()获取实例之后，不要自己调用生命周期函数。

APP函数主要有4个监听函数，object参数说明：
§ onLaunch : 监听小程序初始化，当小程序初始化完成时触发onLaunch(全局只触发一次)
§ onShow：监听小程序显示，当小程序启动或从后台进入前台显示时触发onShow
§ onHide: 监听小程序隐藏，小程序从前台进入后台时触发onHide
§ onError: 错误监听函数，脚本错误或者API调用失败时触发onError，并带上错误信息

○ app.json ：全局配置，配置小程序是由哪些页面组成，配置项包括window、背景色、配置导航条样式、配置默认标题，注意：该文件不可添加任何注释。
小程序中每一个页面的【路径+页面名】都需要写在app.json的page中，且page中的第一个页面是微信小程序的首页。
App.json为标准的json文件，不能添加任何注释

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor":"#fff",
        "navigationBarTitleText":"WeChat",
        "navigationBarTextStyle":"black"
    }
}

配置页面文件路径：（”page“）
□ 接受一个数组，数组第一项代表小程序的初始页面。每一项对应页面的“路径+文件名”信息。
□ 小程序中新增/减少页面，都需要对pages数组进行修改
□文件名不需要写文件后缀，因为框架会自动寻找路径进行整合。
窗口表现效果：（“window”），非必填配置，没有配置时，将会使用系统默认配置。

"backgroundTextStyle":"light",   //下拉背景字体、loading图的样式，仅支持dark、light(string)形式
"navigationBarBackgroundColor": "#fff",    //导航栏背景颜色，十六进制类型
"navigationBarTitleText": "WeChat",    //导航栏标题内容
"navigationBarTextStyle":"black",       //导航栏标题颜色，仅支持black、white
"enablePullDownRefresh":false         //是否开启下拉刷新

设置网络超时时间（”networkTimeout”），所有单位均是（毫秒），如果不设置，默认使用系统设定值

            {
            "networkTimeout": {
                "request":20000,
                "connectSocket":2000,
                "uploadFile":2000,
                "downloadFile":20000
                }
            }

配置多页面切换
配置多页面切换（”tabBar”）：设置底部tab的表现。一般原生App底部都有工具栏，进行页面切换，对于小程序通过tabBar配置向指定tab栏的表现，以及tab切换时显示的对应页面，实现多个页面切换。tabBar内部是一个”list”数组，只能配置最少2个、最多5个tab,tab按数组的顺序排序。
如下是tabBar一些属性设置，以及list对象中的相关属性：

{
    "tabBar":{
        "color":"#fff",  //文字默认颜色
        "selectedColor":"#999999",  //文字选中时的颜色
        "backgroundColor":"#666",   
        "borderStyle":"black",      //上边框的颜色，仅支持black/white
        "position":"bottom",     //tabBar 位置，默认bottom,可选top
        "list":[                      //tabBar列表，最少2个，对多5个tab
            {
            "pagePath":"pages/index/index",   //页面路径，必须在pages中先定义
            "text":"首页",       //tab按钮上的文字
            "iconPath":"image/icon_1.png",    //tab上icon图片路径，icon大小限制为40KB
            "selectedIconPath":"images/icon_1H.png"   //选中tab时的图片路径，icon大小限制为40KB
                },
            {
            "pagePath":"pages/logs/logs",
            "text":"日志",
            "iconPath":"image/icon_2.png",
            "selectedIconPath":"images/icon_2H.png"
                }
                ]
                }
}

是否开启debug模式（boolean）,默认是false
开启debug模式，开发者工具的控制面板，调试信息已info的形式给出，其信息有page的注册，页面路由，数据更新，事件触发。

app.wxss ： 是小程序的公共样式，类似于CSS

.js 是脚本文件（必填） .jso**n是配置文件 .wxss**是样式表文件 .wxml是页面结构文件（必填）。JS页面中声明的变量和函数值再该文件中有效，不同文件可以声明相同名字的变量和函数，不相影响。

页面配置 .json（只能设置window相关的配置，来决定页面的窗口表现，所有无需再写window这个键）,如下：

{
    "navigationBarTitleText":"查看启动日志"
}