小程序开发必备的高级能力之三:转发(分享)

前言

小程序中很重要的一个功能就是转发(也叫分享,以下统一叫做转发)了,今天让我们来详细梳理一番,彻底搞懂小程序的转发功能。

问题

首先,让我们先来提几个小程序开发者都比较想问的几个问题。

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'){
        // 此处是用户点击了页面的转发按钮
    }
})

配置页面内容

小程序能够配置转发的内容包括,

  • title 也就是转发的标题
  • path 转发路径,可以带参数。如果没有填写,则进入小程序首页进入的是转发分享时的当前所在页面,2019-05-23更新),如果填的路径出错,则进入微信自带的报错页面
  • imageUrl 图片地址,可以是包内图片,也可以是网络图片,建议5:4的比例。如果这个地址没有填,则默认截屏当前页面。

代码如下:

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 有 title  path  imgurl等
    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中的onLaunch()中这样调用

 // app.js中
onLaunch: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组件拉取群名称。

如果有好几个群,就可以让用户选一个,然后再具体查看相关群的排行信息。

呼,终于说完了,真的挺复杂的。

步骤如下:

  • 1、配置转发的内容(path中要带上主动转发用户的id)
  • 2、在app.js中获取到shareTicket,并用shareTicket换取到encryptedData和iv
  • 3、将点击转发卡片进来的用户id(或者code)和主动转发的用户id/encryptedData和iv统统上传到后台关联(后台需要拿到encryptedData和iv进行解密,最后会解密出1个openGid)
  • 4、在需要显示群排行的地方查询当前用户的所有openGid,并用open-data组件拉取群昵称(让用户选择要查看的群,如果是只有1个就可以直接让后台传数据了)
  • 5、如果有多个群信息,当用户选择了某个群之后,再进行请求那个群的关联的所有用户的排行信息(例如玩游戏的时候,当前群中每个用户最高的分数)

发布于 2018-12-03 22:53
更新于 2018-12-06 10:30(加了获取群排行的步骤,其他分享的情况步骤也一样,这里就不再赘述)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容