发现微信小程序中存在一个隐藏的路由监听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",
}
}
})
首页 - 默认分享:
测试页 - 自定义分享: