微信小程序：2.全局开发

app实例

简介

app.js中注册小程序实例的方法App拥有生命周期回调函数、错误监听函数、页面不存在监听函数等

生命周期回调函数

onLaunch(options) {//监听小程序初始化
console.log("监听小程序初始化",options);
},
onShow (options) {//监听小程序启动或切前台
console.log("监听小程序启动",options);
},
onHide () {//监听小程序切后台
console.log("监听小程序切后台");
},

错误监听函数

onError (msg) {//错误监听函数，小程序发生脚本错误或API调用报错时触发
console.log("错误监听函数",msg)
},

页面不存在监听函数

onPageNotFound(res){console.log("页面不存在监听函数");},

监听系统主题变化

onThemeChange(){console.log("系统切换主题时触发");}

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

1.页面注册

注意

1.默认pages第一项为首页，也可以用entryPagePath进行指定

2.文件名不需要写文件后缀，框架会自动对应后缀

示例

"entryPagePath": "pages/index/index",
    "pages": [
    "pages/index/index",
    "pages/type/type",
    "pages/cart/cart",
    "pages/center/center"
],

2.tabBar

tabBar配置项

position：位置【默认bottom / top】

color ：tab上的文字默认颜色

selectedColor：tab 上的文字选中时的颜色

backgroundColor：tab 的背景色

borderStyle：tab上边框的颜色【默认blak，仅支持 black / white】

list：列表【2-5个】

list配置项

pagePath：页面路径，必须在pages中注册过

text：描述文本

iconPath【可选】：图片路径，最大40kb，建议尺寸81px*81px，不支持网络图片，当position为top时不显示

selectedIconPath【可选】：选中时的图片路径

示例

"tabBar": {
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "./icon/首页2.1.png",
            "selectedIconPath": "./icon/首页2.2.png"
        },
        {
            "pagePath": "pages/type/type",
            "text": "分类",
            "iconPath": "./icon/分类1-1.png",
            "selectedIconPath": "./icon/分类1-2.png"
        },
        {
            "pagePath": "pages/cart/cart",
            "text": "购物车",
            "iconPath": "./icon/购物车1.1.png",
            "selectedIconPath": "./icon/购物车1.2.png"
        },
        {
            "pagePath": "pages/center/center",
            "text": "我的",
            "iconPath": "./icon/我的1.1.png",
            "selectedIconPath": "./icon/我的1.2.png"
        }
    ]
},

3.窗口表现

window配置项

navigationBarBackgroundColor： 导航栏背景颜色【默认#000000】

navigationBarTextStyle：       导航栏标题颜色【默认white / black】

navigationBarTitleText：       导航栏标题文字内容

backgroundColor：              窗口的背景色【#ffffff】

backgroundTextStyle：          下拉 loading 的样式【默认dark，仅支持dark/light】

enablePullDownRefresh：        是否开启全局的下拉刷新【默认false】

onReachBottomDistance：        页面上拉触底事件触发时距页面底部距离【默认50，单位为px】

示例

"window": {
    "navigationBarBackgroundColor": "#254a38",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "月木学途",
        "backgroundColor": "#ffffff",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50
},

4.其余配置

基础配置

style：配置"v2"可表明启用新版的组件样式

componentFramework：

sitemapLocation：指明 sitemap.json的位置

lazyCodeLoading: 按需加载

debug配置

debug：是否开启debug模式【默认false】

debugOptions：小程序调试相关配置项

配置项：

enableFPSPanel：是否开启 FPS 面板【默认false】

FPS面板：为了便于开发者调试渲染层的交互性能，小程序基础库提供了选项开启 FPS 面板，开发者可以实时查看渲染层帧率

networkTimeout配置

networkTimeout：各类网络请求的超时时间，单位均为毫秒

配置项：

request：wx.request的超时时间【默认60000】

connectSocket：wx.connectSocket的超时时间【默认60000】

uploadFile：wx.uploadFile的超时时间【默认60000】

downloadFile：wx.downloadFile的超时时间【默认60000】

permission配置

permission：小程序接口权限相关设置

示例

"style": "v2",
    "sitemapLocation": "sitemap.json",
    "debug": true,
    "debugOptions": {
    "enableFPSPanel": true
},
"networkTimeout": {
    "request": 10000,
        "downloadFile": 10000
},
"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}

全局属性

简介

整个小程序只有一个App实例，可以通过getApp方法获取App实例【全局唯一】并使用其方法

app.js中App方法编写全局属性

App({
    globalData: {
        userInfo: "我是全局属性"
    }
})

页面中通过getApp()读取

Page({
    onLoad(options) {
        const appInstance = getApp()//获取App实例
        console.log(appInstance.globalData.userInfo) // 我是全局属性
    }
})
​