小程序“高级一点的能力”之三：转发（分享）

前言

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

问题

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

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、删掉onShareMessage()回调方法

小程序显示菜单栏里的转发按钮也有2种对应的方法，1、页面中存在onShareMessage()回调方法（这种方式是默认的） 2、调用wx.showShareMenu()方法

这里的wx.hideShareMenu()其实是不怎么常用的。

配置分享内容

小程序配置分享内容是在onShareAppMessage()里完成，这个方法还可以接受1个Obj，可以在obj.from 判断转发是用户点了右上角转发按钮还是点了来自页面的转发按钮。代码如下：

onShareAppMessage:function(e){
    if(e.from == 'menu'){
        // 此处是用户点击了小程序右上角的转发按钮触发的
    }else if(e.from == 'button'){
        // 此处是用户点击了页面的转发按钮
    }
})

配置页面内容

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

• title 也就是转发的标题
• path 转发路径，可以带参数。如果没有填写，则进入小程序首页，如果填的路径出错，则进入微信自带的报错页面
• 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中的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