微信小程序页面的内置回调、路由

xinxin_k
221 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

上午总结了一下小程序每个页面的内置回调函数，还有路由怎么跳转。我觉得这篇文章罗列的还是比较清晰的，大家可以进行参考。

某一个页面的内置相关回调

  • onPullDownRefresh:function（）{}只要用户下拉刷新，就会触发
  • onReachBottom:function（）{}监听用户上拉触底事件，该事件只会触发一次
  • onPageScroll:function（）{}监听用户滑动页面事件，接受的参数里有scrollTop属性，即页面在垂直方向已滚动距离，但全局配置app.json里要加上"onReachBottomDistance": "50PX"属性
  • onShareAppMessage：function（）{}只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，分享给朋友的函数，可以设置返回值，返回值就会作为分享给朋友的面板展示

1.png

2.png

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 
    }
  }
})
  • onShareTimeline：function（）{}只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮，分享到朋友圈事件，也可以向进行自定义分享内容。
  • onAddToFavorites(Object object)收藏事件，代码如下：
Page({
  onAddToFavorites(res) {
    // webview 页面返回 webViewUrl
    console.log('webViewUrl: ', res.webViewUrl)
    return {
      title: '自定义标题',
      imageUrl: 'http://demo.png',
      query: 'name=xxx&age=xxx',
    }
  }
})
  • onResize(Object object)小程序屏幕旋转时触发。
  • onTabItemTap(Object object)点击 tab 时触发
  • onSaveExitState() 每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。

局部的page（{}）里有生命周期回调、监听相关事件的内置回调，还有自定义的事件回调，点击事件使用bindtap="事件名"给标记绑定事件。

某一个页面Page对象的属性和方法

属性route：通过this.route获取当前页面的路径 属性：setData，通过this.setData(data，callback)修改当前页面数据，主要作用是将数据从逻辑层发送到视图层，它是异步的，通过改变对应得this.data的值，这一步是同步的，第二个参数是视图层渲染完成之后调用

getCurrentPages（）

这个方法可以获取所有页面的page对象，得到一个数组，第一个元素是首页，最后一个是当前页。

小程序路由---页面切换

  • 在小程序中所有页面的路由全部由框架进行关联，不需要开发者进行配置
  • 路由跳转时使用<navigator open-type="" url=""></navigator> 组件，url是要跳转到的页面，open-type属性的值有以下5个：
  • navigate保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabBar 页面。
  • redirect 关闭当前页面，跳转到应用的某个页面，但是不能跳到tabBar页面，没有历史记录
  • switchTab 跳转到tabBar页面，关闭其他tabBar页面
  • reLaunch 关闭所有页面，打开到应用内的某个页面
  • navigateBack 关闭当前页面，返回上一级或多级页面

微信图片_20221114131651.png

avatar
文章
阅读
粉丝