阅读量:0
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) // 我是全局属性 } }) 