发表日期:2018-12 文章编辑:小灯 浏览次数:1255
小程序中很重要的一个功能就是转发(也叫分享,以下统一叫做转发)了,今天让我们来详细梳理一番,彻底搞懂小程序的转发功能。
首先,让我们先来提几个小程序开发者都比较想问的几个问题。
1、小程序支持全局设置转发内容吗?
2、小程序如何动态设置转发内容?
3、小程序还能判断用户是否转发成功吗?如何在用户转发成功后,给用户加上一定的积分?
4、小程序如何做群排行之类的操作?
在这里,除了第4个问题,其他我们都可以直接回答。
1、不支持,但是官方说有在考虑,以后可能会开放出来。
2、这个也是so easy,可以让后台给你单独写个接口,存储分享内容的信息,然后在app.js或者启动页中加入获取的代码,获取到分享信息后,把它存入globalData中。如果有多个分享内容,则每次分享随机取一个即可。
3、自从官方取消了转发成功的回调之后,就已经不能判断了。所以也无法在用户转发成功后,给用户一些好处。
4、待会再说,三言两语说不清。
小程序的分享有2种类型,也就是分享到个人聊天会话,或者是分享到群会话里。
但是分享到群会话里又有2种不同的情况,一种是不带shareTicket,一种是带shareTicket。它们之间的区别就是带shareTicket的转发,我们就能在用户转发之后,其他用户打开了这个分享卡片之后,获取到一些群信息。
那怎么样才能让分享的时候带shareTicket呢?那就是在页面中主动调用下面这个方法(必须这样调用,否则无法获取到群信息,具体可以在页面的onLoad()或者onShow()或者onReady()中调用)
wx.showShareMenu({ withShareTicket:ture })
所以,小程序的分享,我们也可以说是有3种类型:分享到个人聊天会话、不带shareTicket的分享到群会话、带shareTicket分享到群。
其对应的场景值分别是1007 、1008 、1044 。
扩展:场景值就是进入小程序的方式,比如从我的小程序中进入,最近使用中进入,别人分享的卡片中进入 、微信朋友圈广告中进入、公众号文章进入等许多方式。其实场景值有很多妙用,例如进行数据分析啊、判断推广是否有效啊之类的。
小程序的页面中,默认是显示菜单栏里的转发按钮的。因为页面中存在onShareAppMessage()方法。
小程序隐藏菜单栏里的转发按钮有2种方式,1、在页面中调用wx.hideShareMenu()2、删掉onShareAppMessage()回调方法
小程序显示菜单栏里的转发按钮也有2种对应的方法,1、页面中存在onShareAppMessage()回调方法(这种方式是默认的)2、调用wx.showShareMenu()方法
这里的wx.hideShareMenu()其实是不怎么常用的,而wx.showShareMenu()主要是用来设置带shareTicket转发。
小程序配置分享内容是在onShareAppMessage()里完成,这个方法还可以接受1个Obj,可以在obj.from 判断转发是用户点了右上角转发按钮还是点了来自页面的转发按钮。代码如下:
onShareAppMessage:function(e){ if(e.from == 'menu'){ // 此处是用户点击了小程序右上角的转发按钮触发的 }else if(e.from == 'button'){ // 此处是用户点击了页面的转发按钮 } })
配置页面内容
小程序能够配置转发的内容包括,
代码如下:
onShareAppMessage:function(e){ if(e.from == 'menu'){ // 此处是用户点击了小程序右上角的转发按钮触发的 }else if(e.from == 'button'){ // 此处是用户点击了页面的转发按钮 }// 此部分是新增的代码 return { title:'一哥们失恋了,看他斗地主,大家都惊了', path:'/pages/index/index?userid=10003',// 注:这里最好填绝对路径 imageUrl:'https://yourdoman/imgurl' // } })
当然啦,我更喜欢以下这种写法,大家也可以看出,这种写法就是后台多加个表,多个接口。但是却是动态可配置的,这对运营来说更友好。
onShareAppMessage:function(e){ if(e.from == 'menu'){ // 此处是用户点击了小程序右上角的转发按钮触发的 }else if(e.from == 'button'){ // 此处是用户点击了页面的转发按钮 } // 假设shareInfo 有 titlepathimgurl等 let shareInfo = getApp().globalData.shareInfo let sharePath = shareInfo.path + "?userid=" + userid // 此部分是新增的代码 return { title:shareInfo.title, path:sharePath,// 注:这里最好填绝对路径 imageUrl:shareInfo.imgurl} })
现在我们转发已经搞定了,剩下的就是获取群信息。其实获取到的这个群信息里,只能获取到一个信息,那就是openGid。但是没关系,有这个信息,我们就能做很多事情了,例如一开始说的第4个问题,做群排行。
还记得,我们在之前说的。转发到群有2种情况,一种是带shareTicket,一种是不带shareTicket的。
设置了wx.showShareMenu({withShreTicket:true})的就能在转发后,其他用户点击卡片进入小程序的时候获取到这个shareTicket。
具体是在app.js中的onLoad()或者onShow()中这样调用
// app.js中onLoad:function(options){ if(options.scene === 1044){ let myShareTicket = options.shareTicket wx.getShareInfo({ shareTicket:myShareTicket, success:function(res){ // 如果调用成功,则会返回有 // encryptedData和iv } }) }}
查看wx.getShareInfo和解密api
然后把这2个数据传给你的后台,然后进行解密,解密之后就能得到一个openGid.
最后群排行怎么做呢,其实很简单啦。
我们在wx.getShareTicket会获取到encryptedData和iv,将这2个数据,及分享的path中带的userid和当前这个用户的code或者userid统统上传到服务器进行关联,服务器中肯定要有这个3个表的。
user 表wxgroup 表 user_group 群和用户的关系表
要显示群排行的时候,就去查当前用户有哪几个群(就是分享出去被人家点了之后获取到的,或者是别人分享出来当前用户点进去获取到的,其他没有这么操作过的群是没办法获取的),返回相关群的openGid。
然后用open-data组件拉取群名称。
如果有好几个群,就可以让用户选一个,然后再具体查看相关群的排行信息。
呼,终于说完了,真的挺复杂的。
步骤如下:
发布于 2018-12-03 22:53
更新于 2018-12-06 10:30(加了获取群排行的步骤,其他分享的情况步骤也一样,这里就不再赘述)
日期:2019-11 浏览次数:4801
日期:2019-11 浏览次数:11224
日期:2019-11 浏览次数:3665
日期:2019-11 浏览次数:4572
日期:2019-11 浏览次数:4675
日期:2019-11 浏览次数:6345
日期:2019-11 浏览次数:4595
日期:2019-11 浏览次数:15040
日期:2019-11 浏览次数:3938
日期:2019-11 浏览次数:5717
日期:2019-11 浏览次数:4553
日期:2019-11 浏览次数:3880
日期:2019-11 浏览次数:9650
日期:2019-11 浏览次数:7555
日期:2019-11 浏览次数:4242
日期:2019-11 浏览次数:3637
日期:2019-11 浏览次数:8184
日期:2019-11 浏览次数:3889
日期:2019-11 浏览次数:4065
日期:2019-11 浏览次数:4131
日期:2019-11 浏览次数:3701
日期:2019-11 浏览次数:4282
日期:2019-11 浏览次数:9467
日期:2019-11 浏览次数:4483
日期:2019-11 浏览次数:4483
日期:2019-11 浏览次数:4061
日期:2019-11 浏览次数:11381
日期:2019-11 浏览次数:6673
日期:2019-11 浏览次数:6940
日期:2019-11 浏览次数:4286
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.