微信小程序统一分享,全局接管页面分享消息的一些技巧
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。
前言
最近都在折腾这个我自己个人技术内容聚合的小程序。除了作为掘金文章,哔哩哔哩视频的聚合。我有什么新的想法,产品创意,最终落地的东西都会放到这个小程序里。
而分享功能非常的重要,当某一个功能或文章打动用户的时候,能把这个小程序分享出去,就能带来裂变传播的效果。
全局接管分享事件
而随着功能越来越多,页面越来越多,每一个页面都需要添加分享的回调方法吗?
~~~javascript onShareAppMessage: function () { return { title: '分享的标题', path: '分享的页面路径' } }, ~~~
有没有办法能全局统一接管分享呢?写一次,所有页面就都可以分享了。
能!
由于onShareAppMessage
是一个函数,在用户点击右上角...
时触发,或者<button open-type='share'>
时触发。所以我们只要在这之前替换掉这个函数就可以了。
通过wx.onAppRoute(cb)
这个方法,我们可以监听到微信小程序页面栈的变化。
~~~javascript //在小程序启动时添加全局路由变化的监听 onLaunch(){ wx.onAppRoute(()=>{ console.log('page stack changed'); console.log(getCurrentPages()); }); } ~~~
onAppRoute会在页面栈改变后被触发,这个时候通过getCurrentPages()
方法,我们可以拿到小程序中全部的页面栈。
数组最后一个就是当前页面
现在直接给当前页面这个对象赋值onShareAppMessage
即可
~~~javascript var pages = getCurrentPages(); var curPage = pages[pages.length-1];
curPage.onShareAppMessage=()=>{ return { title:"被接管了" } } ~~~
再分享时我们就会发现被接管了
获取当前页面的地址
page参数不传的话,默认转发出去就是当前页面的地址。当然通过curPage.route
也可以获取该页面地址。
~~~javascript var pages = getCurrentPages(); var curPage = pages[pages.length-1];
curPage.onShareAppMessage=()=>{ return { title:"被接管了", page:curPage.route } } ~~~
小技巧
如果就这样分享出去,用户打开的时候,就会直接展示这个分享的页面。直接返回,或者左滑屏幕,都会直接退出到聊天界面。用户主动分享一次产生的裂变不容易,我希望这个分享带来的价值最大化,让接到分享的微信用户看到更多页面的话怎么办呢?
永远先进首页,首页检查启动参数后再跳转相关页面
~~~javascript curPage.onShareAppMessage=()=>{ return { title:"被接管了", page:"/pages/home/home?url="+curPage.route } } ~~~
我叫大帅
,一个老
程序猿
推荐阅读(感谢掘友的鼓励与支持🌹🌹🌹) - 这45道面试可能被问到的JS判断题!你能答对几道? 33赞 - CSS边玩边学,这五个游戏让你对CSS的掌握更进一步! 28赞 - 产品经理:你能不能用div给我画条龙? 2471赞 - 三种前端实现VR全景看房的方案!说不定哪天就用得上! 2698赞
- 2022,38岁,裸辞,自由职业一年实况分享
- 太强了!外国小哥花16个月用Three.JS打造了一个无缝切地图的3D开车游戏
- 细节狂魔,用 JavaScript 复原何同学B站头图的创意
- 码上摸金,用PIXI GSAP仿写vanmoof刹车动效 | 猿创营
- 在uni-app中使用微软的文字转语音服务
- 万马奔腾队的phaser3 战疫小游戏开发历程回顾
- 用uni-app开发一个名为汉兜的游戏
- 浅谈对贪食蛇游戏的一点微创新
- 手把手教你做iOS逆向分析,突破微信的群发多选数量限制
- 产品经理:你能不能用div给我画条龙?
- 这个榜单我不服!终究还是错付了这个绿茶掘金
- 前端摸鱼神器,设计稿一键导出 「小程序/Vue/Uni-app」代码
- 请收下这份源码,用Vue开发的一个“蚂蚁森林浇水偷菜”游戏
- 微信小程序统一分享,全局接管页面分享消息的一些技巧
- 这45道面试可能被问到的JS判断题!你能答对几道?
- CSS边玩边学,这五个游戏让你对CSS的掌握更进一步!
- Web网站扫【小程序码】登录的技术实现!记得收藏,要用时别找不到!
- 献给所有技术内容创作者~猿创聚合助手小程序开发难点解析
- 花60秒给Vue3提的PR,竟然被尤大亲自Merge了~
- 使用Vue开发“蚂蚁森林浇水偷菜”游戏的心得体会