小程序 分享获取群信息——openGId

一个么得感情的杀手
8,797 阅读4分钟

引子

最近在做小程序，主要研究方向是对群信息的处理，小程序的大部分功能是基于通过打开转发到群的小程序分享卡片来做的...
首发于个人博客

有关转发的几条 API

  • Page.onShareAppMessage
  • wx.showShareMenu
  • wx.hideShareMenu
  • wx.updateShareMenu
  • wx.getShareInfo

跟转发有关的 api 总共这5条，接下来简单的介绍这几条 api 并写一下自己在用 mpvue 开发过程中遇到的问题

Page.onShareAppMessage

在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。

  • 只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
  • 用户点击转发按钮的时候会调用
  • 此事件需要 return 一个 Object，用于自定义转发内容

需要注意的是应该 只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮，如果定义该事件，而又不想让该页面通过 menu 转发，可以通过 hideShareMenu 来隐藏掉

在 mpvue 编译之后应该也给配置了该事件，因为需求问题，有些页面也是单独给隐藏掉的

转发后，可以通过来 from 参数来判断是 menu 菜单转发还是 button 转发， 来进行一些判断。

  • 转发成功后，如果未定义 自定义转发字段 ，会使用默认的，不存在转发后，没分享卡片。
  • form 字段可以通过在转发成功后调取的 success、complete 来进行对 menu 和 button 的不同操作
  • 如果有携带 shareTicket 值，会在 success 回调产生，返回结果在 shareTickets 字段中，是一个数组。

相关API链接

wx.hideShareMenu

隐藏转发按钮

仅仅会隐藏掉 menu 的转发，button 的转发功能还会存在

如果先设置 showShareMenu ，并且配置了 withShareTicket，再用 hideShareMenu 方法，通过按钮转发，照样能获取 shareTicket，如下：

wx.showShareMenu({
  withShareTicket: true
})
wx.hideShareMenu({

})

别问我为何测试这些东西。

相关API链接

wx.showShareMenu

显示当前页面的转发按钮

wx.showShareMenu({
  withShareTicket: true
})

配置该选项主要是用到它的 shareTicket 功能，通过它来获取群信息，群标识。

相关API链接

wx.updateShareMenu

更新转发属性

我这里使用它也是对 withShareTicket 字段变更使用

是的,就是这么牛皮

相关API链接

wx.getShareInfo

获取转发详细信息

wx.getShareInfo({
    shareTicket: res.shareTickets[0],
    success: (res) => {
        console.log('已成功获取到加密信息')
        console.log(res)    
    },
    fail: (res) => {
      console.log(res)
    }
})

回调参数

{
    errMsg: "getShareInfo:ok", 
    iv: "gRHeFU+Nhr36RmladCXnRQ==", 
    encryptedData: "IQ/RwZLeQFUGuxv0bBfOrL/KLnXO+bxcyCBru5lB92FkHIg8ae…7TnHwU+rqgerFKvpvS5JbFyh+9liUqyb2bk6/LETYQ+h/FQ=="
}

相关API链接

将它发给后台，后台解密，然后得到 openGId。

本来想写如何解密来着，但想到还有个项目也涉及了，到时候统一把小程序相关的前后端开发经历写一下把。

获取 openGid 流程

获取主要有两种方式：

  1. 一是用户打开携带 shareTicket 的分享卡片，然后通过 getShareInfo() 来获取加密信息，发给后台解密，然后获取 openGId；
  2. 另一种是用户分享成功后会获取一个 shareTicket，然后通过 getShareInfo() 来获取加密信息，发给后台解密，然后获取 openGId。

这两种方式主要是获取 shareTicket 的不同，然而我司的产品需求正是通过这两种方式来对比对用户添加权限——管理员在某个群里主动分享，记录该 openGId ，分析所有进入小程序携带 shareTicket 的用户，如果比对成功，给他权限，进行 VIP 操作，如果比对失败，进行拦截。

通过分享成功后获取 shareTicket

后台获取的 openGId 是通过特殊的 button 按钮分享的

onShareAppMessage: (resMessage) => {
    console.log(`这是通过：${resMessage.from}`)
    // 分享卡片内容
    return {
      title: '首页分享',
      imageUrl: 'https://xx.xxx.com/123.jpg',
      path: 'pages/guide/main',
      success: (res) => {
        // 转发成功，向后台发送openGId
        console.log(res.shareTickets)
        if (resMessage.from === 'button') {
          wx.getShareInfo({
            shareTicket: res.shareTickets[0],
            success: (res) => {
              console.log('已成功获取到加密信息')
              wx.request({
                url: `${service}api/saveOpenGId`,
                data: {
                  encryptedData: res.encryptedData,
                  vi: res.vi
                },
                success: (res) => {
                  console.log(res.data)
                  if (res.data.success === 'true') {
                    console.log('openGId 已成功存入数据库')
                  }
                }
              })
            },
            fail: (res) => {
              console.log(res)
            }
          })
        }
      },
      fail: (res) => {
        // 转发失败
        console.log(res)
      }
    }
}

通过携带 shareTicket 的分享卡片进入小程序的方式

if (this.$root.$mp.appOptions.shareTicket) {
    this.shareTicket = this.$root.$mp.appOptions.shareTicket
    // 对比openGId
    const verify = await this.userRole()
    if (verify.compare === true) {
      // 跳转到 VIP 首页
      wx.redirectTo({
        url: '../index/main'
      })
    } else if (verify.compare === false) {
      // 对比失败，跳转到普通首页
      wx.redirectTo({
        url: '../common/main'
      })
    }
}

关于禁用转发的一些操作

对于这个需求的解读为是只禁用掉右上角 menu 的转发，但是页面内发起的转发有效。

这时候的正确操作就是

这时候的操作就是

Page.onShareAppMessage()

wx.hideShareMenu()

小程序相关信息页面的 推荐给朋友

image

当时对这个页面也能转发耿耿于怀，因为是微信系统的，无法通过现有的 API 来禁掉，只能通过场景值来拦截。

boss：能发现这个分享的人也算是有心人吧，就给他分享的权限吧，但是想看内容，门都没有。

编译模式——场景值模拟

微信开发者工具有个编译模式，通过它可以模拟N多场景值，

image

这样可以直接模拟打开携带 shareTicket 分享卡片后的操作。

可以在 App.onLaunch() 或 App.onShow 获取到 shareTicket 。

mpvue 中获取该信息

在 mpvue 中通过 this.root.mp.appOptions 来获取 小程序在 app onLaunch/onShow 时候传递的 options。

需要注意的是两者的生命周期问题，beforeCreate 和 created 获取不到该信息。

写在最后

目前就写这些吧，想起来再写上

avatar
文章
阅读
粉丝