隐藏路由回调API wx.onAppRoute,全局定义分享内容

发现微信小程序中存在一个隐藏的路由监听API wx.onAppRoute。通过简单的初始化监听,我们可以在全局范围内捕捉到路由改变的事件,对开发者来说,这无疑是一项实用的功能。

在 app.js 文件中的 App 对象的 onLaunch 方法内,调用自定义的 listenAppRoute 函数进行初始化监听,如下:

// app.js
App({
  onLaunch () {
    this.listenAppRoute()
  },
  listenAppRoute() {
    //监听路由切换
    wx.onAppRoute((e) => {
      console.log('%c [ e ]-17', 'font-size:13px; background:pink; color:#bf2c9f;', e)
    })
  },
})

监听回调中,你可以看到类似这样的输出,展示了路由切换的详细信息:
在这里插入图片描述

利用这个API,我们可以实现一些全局功能,例如全局分享:不需要在每个页面定制分享功能,而是可以共享一个分享函数。

实现如下:

// app.js
App({
  onLaunch() {
    this.listenAppRoute()
  },
  listenAppRoute() {
    //监听路由切换
    wx.onAppRoute(() => {
      //获取加载的页面
      const pages = getCurrentPages()
      //获取当前页面的对象
      const currentPage = pages[pages.length - 1]
      if (currentPage.data.isCustomShare) { return }
      currentPage.onShareAppMessage = () => {
        return {
          title: "全局定义的分享",
          path: "/pages/index/index",
          imageUrl: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
        }
      }
    })
  },
})

首页代码:
在首页上的设置中,即使是使用默认的分享配置,依然要声明 onShareAppMessage 方法。如果没有声明,微信平台将不会启用分享按钮,但可以简单地声明一个空方法即可。

// index.js
Page({
  data: {
    nvabarData: {
      showCapsule: 1,
      title: "首页",
      hideHomeBack: true,
    },
  },

  onShareAppMessage() {},


  /** 跳转测试页 */
  handleGoToTestPage() {
    wx.navigateTo({
      url: '/pages/testPage/testPage',
    })
  }
})

测试页代码:
对于需要自定义分享的页面(如测试页面),可以在页面数据中加入 isCustomShare: true 标记,并设置自定义的 onShareAppMessage 方法:

// testPage.js
Page({
  data: {
    nvabarData: {
      showCapsule: 1,
      title: "测试页",
      hideHomeBack: true,
    },
    isCustomShare: true,
  },

  onShareAppMessage() {
    return {
      title: "测试页",
      desc: "我是测试页的自定义分享,区分一下",
      imageUrl: "https://img.yzcdn.cn/vant/logo.png",
      path: "/pages/testPage/testPage",
    }
  }
})

首页 - 默认分享:
在这里插入图片描述

测试页 - 自定义分享:
在这里插入图片描述

  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值