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({
onl oad(options) {
const appInstance = getApp()//获取App实例
console.log(appInstance.globalData.userInfo) // 我是全局属性
}
})