likes
comments
collection
share

微信小程序统一分享，全局接管页面分享消息的一些技巧

作者站长头像
站长
· 阅读数 18

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。

前言

微信小程序统一分享，全局接管页面分享消息的一些技巧

而分享功能非常的重要，当某一个功能或文章打动用户的时候，能把这个小程序分享出去，就能带来裂变传播的效果。

全局接管分享事件

而随着功能越来越多，页面越来越多，每一个页面都需要添加分享的回调方法吗？

onShareAppMessage: function () {
  return {
    title: '分享的标题',
    path: '分享的页面路径'
  }
},

有没有办法能全局统一接管分享呢？写一次，所有页面就都可以分享了。

能！

由于onShareAppMessage是一个函数，在用户点击右上角...时触发，或者<button open-type='share'>时触发。所以我们只要在这之前替换掉这个函数就可以了。

通过wx.onAppRoute(cb)这个方法，我们可以监听到微信小程序页面栈的变化。

//在小程序启动时添加全局路由变化的监听
onLaunch(){
    wx.onAppRoute(()=>{
        console.log('page stack changed');
        console.log(getCurrentPages());
    });
}

onAppRoute会在页面栈改变后被触发，这个时候通过getCurrentPages()方法，我们可以拿到小程序中全部的页面栈。

数组最后一个就是当前页面

微信小程序统一分享，全局接管页面分享消息的一些技巧

现在直接给当前页面这个对象赋值onShareAppMessage即可

var pages = getCurrentPages();
var curPage = pages[pages.length-1];

curPage.onShareAppMessage=()=>{
        return {
                title:"被接管了"
        }
}

再分享时我们就会发现被接管了

微信小程序统一分享，全局接管页面分享消息的一些技巧

获取当前页面的地址

page参数不传的话，默认转发出去就是当前页面的地址。当然通过curPage.route也可以获取该页面地址。

var pages = getCurrentPages();
var curPage = pages[pages.length-1];

curPage.onShareAppMessage=()=>{
    return {
        title:"被接管了",
        page:curPage.route
    }
}

小技巧

如果就这样分享出去，用户打开的时候，就会直接展示这个分享的页面。直接返回，或者左滑屏幕，都会直接退出到聊天界面。用户主动分享一次产生的裂变不容易，我希望这个分享带来的价值最大化，让接到分享的微信用户看到更多页面的话怎么办呢？

永远先进首页，首页检查启动参数后再跳转相关页面

curPage.onShareAppMessage=()=>{
    return {
        title:"被接管了",
        page:"/pages/home/home?url="+curPage.route
    }
}

我叫大帅，一个老程序猿

推荐阅读（感谢掘友的鼓励与支持🌹🌹🌹）