小程序学习笔记(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:

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

   from:为button时，代表页面内转发按钮，为menu时表右上角转发
   target:如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
   webViewUrl:页面中包含<web-view>组件时，返回当前<web-view>的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中获取。

Tab切换

1. 注册小程序

2. 注册页面

3. 路由

猜你喜欢