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


Posted in Javascript onJuly 17, 2019

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

方案:微信在更新分享接口后,原有的在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的场景,但是不会显示群名称,因为你不在群里。所以测试的时候,自己拉个微信群,然后分享到测试群,就能拿到群名称。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
React.js入门学习第一篇
Mar 30 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 #Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 #Javascript
js设置默认时间跨度过程详解
Jul 17 #Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 #Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 #Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 #Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 #Javascript
You might like
PHP脚本数据库功能详解(中)
2006/10/09 PHP
php 数组的一个悲剧?
2011/05/11 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python禁用键鼠与提权代码实例
2019/08/16 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
物流专业求职计划书
2014/01/10 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
元旦晚会感言
2014/03/12 职场文书
继承公证书样本
2014/04/04 职场文书
路政管理求职信
2014/06/18 职场文书
2014年教研室工作总结
2014/12/06 职场文书
八年级物理教学反思
2016/02/19 职场文书
2019思想汇报范文
2019/05/21 职场文书