小程序学习笔记(1)

1. 注册小程序

----------
用App() 函数来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。它必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。


前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home

键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

App({
onLaunch: function(options) {
// 小程序初始化完成时（全局只触发一次）
options包含小程序的初始path，query，scene(场景值)，shareTicket，referrerInfo.appId，referrerInfo.extraData(scene=1037或1038时支持)
},
onShow: function(options) {
// Do something when show.小程序启动，或从后台进入前台显示时
参数与onLaunch一致
},
onHide: function() {
// Do something when hide.小程序从前台进入后台时
},
onError: function(msg) {
console.log(msg)
//小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
},
onPageNotFound:function(){
//页面不存在监听函数, 小程序要打开的页面不存在时触发，会带上页面信息回调该函数
不存在页面的path，打开不存在页面的query，是否是本次启动的首个页面isEntryPage
}
> 开发者可以在 onPageNotFound 回调中进行重定向处理，但必须在回调中同步处理，异步处理（例如 setTimeout
> 异步执行）无效
App({
onPageNotFound(res) {
wx.redirectTo({
url: 'pages/...'
}) // 如果是 tabbar 页面，请使用 wx.switchTab
}
})
> 如果开发者没有添加 onPageNotFound 监听，当跳转页面不存在时，将推入微信客户端原生的页面不存在提示页面。
如果 onPageNotFound 回调中又重定向到另一个不存在的页面，将推入微信客户端原生的页面不存在提示页面，并且不再回调 onPageNotFound。
globalData: 'I am global data'
})

2. 注册页面

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
生命周期：

Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.监听页面加载
options中有打开当前页面路径中的参数
},
onReady: function() {
// Do something when page ready.监听页面显示
},
onShow: function() {
// Do something when page show.监听页面初次渲染完成，代表页面已经准备妥当，可以和视图层进行交互
},
onHide: function() {
// Do something when page hide.监听页面隐藏，如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台
},
onUnload: function() {
// Do something when page close.监听页面卸载，如redirectTo或navigateBack到其他页面时。
}
})

页面事件处理函数：

• onPullDownRefres
  监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

• onReachBottom()
  监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。

在触发距离内滑动期间，本事件只会被触发一次。

• onShareAppMessage:

  监听用户点击页面内转发按钮（ 组件 open-type=&＃8221;share&＃8221;）或右上角菜单“转发”按钮的行为，并自定义转发内容
  object参数说明：

  from:为button时，代表页面内转发按钮，为menu时表右上角转发
target:如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
webViewUrl:页面中包含组件时，返回当前的url

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

此事件需要 return 一个 Object，用于自定义转发内容，返回内容如下：
转发标题title:当前小程序名称
转发路径path:转发路径
imageUrl：自定义图片路径

},

• onPageScroll
  option中有scrollTop，即页面在垂直方向已滚动的距离（单位px）
• onTabItemTap
  当前是 tab 页时，点击 tab 时触发
  console.log(item.index)
  console.log(item.pagePath)
  console.log(item.text)

• 自定义组件处理事件
  viewTap: function() {
  this.setData({

  text: 'Set some data for updating view.'

  }, function() {

  // this is setData callback

  })
  }

3. 路由

• getCurrentPages()

• getCurrentPages()
  用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

不要尝试修改页面栈，会导致路由以及页面状态错误。

不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。