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

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

全局接管分享事件


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


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()方法,我们可以拿到小程序中全部的页面栈。


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


image.png


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


var pages = getCurrentPages();
var curPage = pages[pages.length-1];
curPage.onShareAppMessage=()=>{
        return {
                title:"被接管了"
        }
}


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


image.png


获取当前页面的地址


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
    }
}


我叫大帅,一个程序


相关文章
|
小程序
uni-app——微信小程序设置全局分享
uni-app——微信小程序设置全局分享
814 0
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2662 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
3661 0
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
2047 0
|
传感器 小程序 开发工具
【规范】小程序发布,『小程序隐私保护指引』填写指南
本文详细解析了小程序隐私保护指引的填写方法,包括开发者处理的信息、第三方插件信息、用户权益等内容,并提供了详细的填写范例,帮助读者在发布小程序时避免常见问题,是一份实用的参考指南。
4447 1
【规范】小程序发布,『小程序隐私保护指引』填写指南
|
4月前
|
移动开发 自然语言处理 小程序
前端组件库——Wot Design Uni知识点大全(三)
教程来源 https://rvtst.cn Wot Design Uni 是基于 Vue3 的跨平台 UI 组件库,支持微信/支付宝小程序、H5、App 等多端兼容;提供样式隔离修复、virtualHost 渲染优化、虚拟列表、按需引入、国际化(15+语言)等完整解决方案。
|
小程序 JavaScript
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
1499 0
|
安全 网络安全
宝塔面板如何配置网站ssl安全证书(支持https访问)
宝塔面板如何配置网站ssl安全证书(支持https访问)
4707 0
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4637 7
|
JSON 小程序 应用服务中间件
微信的接口wxLogin()的返回值都有什么?
【10月更文挑战第4天】微信的接口wxLogin()的返回值都有什么?
1879 1

热门文章

最新文章