微信小程序如何获取群聊的openGid以及名称详解

背景：由于公司可能需要在微信群里面使用打卡功能，因此做了个技术调研。

方案：微信在更新分享接口后，原有的在onShareAppMessage中直接拿shareTicket已不复存在。根据最新文档显示，需要在App.onLaunch()跟App.onShow()中获取。

Demo核心代码：

index.js

Page({

 /**
  * 页面的初始数据
  */
 data: {
  openGid: ''
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  let that = this
  wx.showShareMenu({
   withShareTicket: true
  })
  app.getShareTiket(function (globalData) {
   console.log('clickReload---globalData-->' + JSON.stringify(globalData))
   that.setData({
    openGid: globalData.openGid
   })
  })
 },
 clickReload: function () {
  let that = this
  app.getShareTiket(function (globalData) {
   console.log('clickReload---globalData-->' + JSON.stringify(globalData))
   that.setData({
    openGid: globalData.openGid
   })
  })
 }
})

index.wxml

<!--index.wxml-->
<view wx:if="{{openGid}}" class='groupName'>
 群名称：<open-data type="groupName" open-gid="{{openGid}}"></open-data>
</view>

<view wx:else>
 <button bindtap='clickReload'>点击加载群名称</button>
</view>

<view>{{openGid ? openGid : '无'}}</view>

app.js

//app.js
App({
 globalData: {
  shareTicket: '',
  openGid: ''
 },
 onLaunch: function (options) {

 },
 onShow: function (options) {
  let that = this
  if (options && options.scene == 1044) {
   that.globalData.shareTicket = options.shareTicket
  }
  console.log('onShow---options=--->' + JSON.stringify(options))
 },
 getShareTiket: function (cb) {
  let that = this
  // 展示本地存储能力
  if (that.globalData.shareTicket) {
   wx.getShareInfo({
    shareTicket: that.globalData.shareTicket,
    success: function (res) {
     console.log('getShareTiket---shareTicket-->' + JSON.stringify(res))
     let js_encryptedData = res.encryptedData
     let js_iv = res.iv
     wx.login({
      success: function (res) {
       let js_code = res.code
       console.log('code-->' + js_code)
       wx.request({
        url: 'xxxxxxxx',
        method: 'POST',
        data: {
         code: js_code,
         appId: 'xxxxx',
         encryptedData: js_encryptedData,
         iv: js_iv
        },
        success: function (res) {
         that.globalData.openGid = res.data.openGId
         console.log('getShareTiket---openGid' + that.globalData.openGid)
         typeof cb == "function" && cb(that.globalData)
        },
        fail: function (err) {
         console.log('getShareTiket---err' + JSON.stringify(err))
        }
       })
      }
     })
    }
   })
  } else {
   console.log('不存在shareTicket')
  }
 }
})

注意事项

1：必须调用这个接口wx.showShareMenu({withShareTicket: true})，否则在App.onLaunch()跟App.onShow()时，你拿不到shareTicket.

2:微信开发者工具可以模拟1044的场景，但是不会显示群名称，因为你不在群里。所以测试的时候，自己拉个微信群，然后分享到测试群，就能拿到群名称。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序页面上下滚动效果

    微信小程序页面上下滚动效果

    本文实例为大家分享了微信小程序页面上下滚动的具体代码,供大家参考,具体内容如下 看图 源码 <view class="container container-fill"> <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrol

  • 微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步

    微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步

    小程序wx.navigateTo路由方法中新增加了events属性,可以用于监听被打开页面发送到当前页面的数据.基础库 2.7.3 开始支持. 相关文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html 基本使用方法文档中已经有示例,可以参考 上级页面 新打开页面 通过上面的方法,小程序可以实现不同页面直接互相调用相关方法,也能进行页面间传值等处理 以上就是本文的全部内容,希望对大家的学

  • 微信小程序图片左右摆动效果详解

    微信小程序图片左右摆动效果详解

    先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可. 先看效果如下: 简单的参考代码: wxml: <image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image

  • 微信小程序从注册账号到上架（图文详解）

    微信小程序从注册账号到上架（图文详解）

    前言 自从微信小程序功能发布后,我就一直关注着小程序的动向,然而限于学业繁忙,总是没有太多的时间去学习.大二逐渐学习了Vuejs,被其简洁的设计所吸引,后来看了看小程序的开发文档,发现这么的相似?可能前端的发展趋势就是这样的吧,各个框架都趋向于相似的优秀的设计. 大三逐渐学习了Go语言,为了练习Go语言,同时也将自己几年来积累的东西聚合在一起,于是开发了微信小程序:We中南(可以去微信搜索,虽然现在毕业已经不打算维护了),其聚合了中南大学校内常见的信息查询功能,如:成绩课表查询.校车校历查询等项

  • 微信小程序Echarts覆盖正常组件问题解决

    微信小程序Echarts覆盖正常组件问题解决

    最近公司的项目中需要在小程序内使用echarts组件来展示数据,同时因为使用了自定义导航栏以及蒙版层,导致Echarts图形覆盖于所有组件的上方,不符合设计要求. 尝试解决的思路: z-index:Echarts使用的是微信原生canvas,优先级高,z-index完全无效. cover-view:因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素,故cover-view也无法奏效. wx.canvasToTempFilePath:wx.canvasToTemp

  • 微信小程序在线客服自动回复功能(基于node)

    微信小程序在线客服自动回复功能(基于node)

    前言 我们知道H5页面经常需要将用户导流到APP,通过下载安装包或者跳转至应用宝市场/Appstore等方式进行导流.但是由于小程序嵌套webview时需要校验域名,因此跳转到第三方应用市场和Appstroe无法实现导流.那怎么办呢? 只能说道高一尺魔高一丈,看看微博小程序是怎么导流的: 曲线救国的方式,利用小程序的在线功能可以打开H5的方式,去进行下载引导. 于是,就引出了这次文档的主题,小程序在线客服自动回复功能. 阅读本文档之前,最好已经了解过小程序客服信息官方的相关文档: 客服消息使用指

  • 微信小程序如何获取群聊的openGid以及名称详解

    背景:由于公司可能需要在微信群里面使用打卡功能,因此做了个技术调研. 方案:微信在更新分享接口后,原有的在onShareAppMessage中直接拿shareTicket已不复存在.根据最新文档显示,需要在App.onLaunch()跟App.onShow()中获取. Demo核心代码: index.js Page({ /** * 页面的初始数据 */ data: { openGid: '' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options

  • 微信小程序授权获取用户详细信息openid的实例详解

    微信小程序授权获取用户详细信息openid的实例详解

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如

  • 微信小程序：数据存储、传值、取值详解

    小程序界面传值 父级界面:A界面 子级界面:B界面 一.url传值 详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面 用 navigator标签或 wx.navigator传值,A界面向B界面传id值 A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一:navigator标签传值 <navigator url="/page/index/index?id=110" >传值&

  • 微信小程序之高德地图多点路线规划过程示例详解

    微信小程序之高德地图多点路线规划过程示例详解

    调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to

  • 微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag

  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具

  • 微信小程序 时间格式化（util.formatTime(new Date)）详解

    微信小程序 时间格式化（util.formatTime(new Date)）详解

    微信小程序 时间格式化 微信小程序虽然还在内测,但是已经火的不行.赶紧看看.记录学习路上的点点滴滴. 获取时间直接用 Date.now() 得到一串数字.如下图: 获取格式化的时间用 util.formatTime(new Date) util是微信官方demo里面的提供的工具:如下代码 function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

随机推荐