小程序App
App(Object object)
注册小程序。接受一个Object
参数,其指定小程序的生命周期回调等。
App()只能在app.js中调用,并且只能一次。
参数
onLaunch(Object object):function
,生命周期回调-监听小程序初始化,全局只触发一次。
onShow(Object object):function
,生命周期回调——监听小程序启动或切前台。
onHide():小程序从前台进入后台时触发。
onError(String error):小程序发生脚本错误或 API 调用报错时触发。
onPageNotFound(Object object):小程序要打开的页面不存在时触发。如果没有配置此方法,会自动进入到微信内置的页面不存在选项。
示意代码:
App({
onPageNotFound(res) {
wx.redirectTo({
url: 'pages/...'
}) // 如果是 tabbar 页面,请使用 wx.switchTab
}
})
页面
Page(Object object)
参数
data:页面第一次渲染使用的初始数据,data
会以JSON
字符串的形式从逻辑层传到渲染层。类型:字符串
数字
布尔值
对象
数组
,在页面中表示:{{text}}
Page({
data: {
text: 'Hello World'
}
})
生命周期回调函数
onLoad(Object query):页面加载时触发。一个页面只会调用一次,可以在onLoad
的参数中获取打开当前页面路径中的参数。
onShow():页面显示/切入前台时触发。
onReady():页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
注意:对页面内容进行设置的API如wx.setNavigationBarTitle
,请在onReady
之后进行。
onHide():页面隐藏/切入后台时触发。如wx.navigationTo
或底部tab
切换到其他页面,小程序切入后台等。
onUnload():页面卸载时触发。如wx.redirectTo
或者wx.navigateBack
到其他页面时。
页面事件处理函数
onPullDownRefresh():监听用户下拉刷新事件。
- 需要在
app.json
的window
选项中或者页面配置选项中开启enablePullDownRefresh
,页面配置会覆盖app.json
的相同配置项。
示意代码:
onPullDownRefresh:function(){
setTimeout(function(){
wx.stopPullDownRefresh({})//停止下拉刷新动作
},1000)
}
注意:页面中下拉刷新并没有出现loading
的效果,需要在app.json
里面的window
选项中配置"backgroundTextStyle": "dark"
onReachBottom():监听用户上拉触底事件。可以在app.json
中配置触底的距离,onReachBottomDistance
,也可以在页面中配置。
onPageScroll(Object object):监听用户滑动页面事件。参数scrollTop
,页面在垂直方向已滚动的距离(单位px)
注意:不要定义空方法,也不要进行大量的setData
方法,影响通信耗时。
onShareAppMessage(Object object):监听用户点击页面内转发按钮(button
组件open-type='share'
)或右上角菜单转发
按钮的行为,并自定义转发内容。也只有定义了此事件处理函数右上角菜单才会显然“转发”按钮。
这是点击右上角菜单转发按钮所打印的内容
-
from
:转发事件的来源,button
页面中的按钮,menu
右上角的菜单栏转发 -
target
:如果from
值是button
,则target
就是button
,但如果from
是menu
,target
则是undefined
-
webViewUrl
,如果页面有web-view
组件时,则返回当前web-view
的url
此函数需要return
一个对象出去来自定义转发内容。
onShareAppMessage: function (res) {
console.log(res)
var obj={
"title":'自定义标题',
"path":'/user/user'
//还有一个imageUrl参数,自定义图片的路径。默认是当前页面的截图。
}
return obj;
}
image.png
onResize(Object object):小程序屏幕旋转时触发。
onTabItemTap(Object object):点击
tab
触发。
onTabItemTap:function(res){
console.log(res)
}
index索引,pagePath页面url,text为tab按钮文字
this.setData()
注意:
- 直接修改而不调用
this.setData
方法是无法改变状态的 - 仅支持可JSON化的数据
- 单次设置数据不能超过1024kb
- 不要把
data
里面的value
设置为undefined
网友评论