微信小程序 转发功能的实现


Posted in Javascript onAugust 04, 2017

微信小程序 转发功能的实现

1.当用户将小程序转发到任一群聊之后,可以获取到此次转发的 shareTicket

2.此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunch() 或 App.onShow 获取到另一个 shareTicket

3.两步获取到的 shareTicket 均可通过 wx.getShareInfo() 接口可以获取到相同的转发信息。

onShareAppMessage(options)函数设置该页面的转发信息。

options参数说明:

from:转发事件来源。button:页面内转发按钮;menu:右上角转发菜单;
target:如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined

自定义字段:

return {
  title: '转发', // 转发标题(默认:当前小程序名称)
  path: '/pages/index/index', // 转发路径(当前页面 path ),必须是以 / 开头的完整路径
  success(e) {
   // shareAppMessage: ok,
   // shareTickets 数组,每一项是一个 shareTicket ,对应一个转发对象
     // 需要在页面onLoad()事件中实现接口
     wx.showShareMenu({
      // 要求小程序返回分享目标信息
      withShareTicket: true 
     });
  },
  fail(e) {
   // shareAppMessage:fail cancel
   // shareAppMessage:fail(detail message) 
  },
  complete() { }
}

wx.showShareMenu(OBJECT) 带 shareTicket 的转发。

1.在SDK中与真机调试的过程中,都需要设withShareTicket为true,

2.否则在真机的调试过程中,即便选择了转发的群聊,也不会返回shareTicket

onLoad(e) {
  wx.showShareMenu({
   withShareTicket: true
  })
 }, onShow(e) {
  wx.showShareMenu({
   withShareTicket: true
  })
 },

wx.getShareInfo(OBJECT)获取转发详细信息

if (res.shareTickets) {
 // 获取转发详细信息
 wx.getShareInfo({
  shareTicket: res.shareTickets[0],
  success(res) {
   res.errMsg; // 错误信息
   res.encryptedData; // 解密后为一个 JSON 结构(openGId  群对当前小程序的唯一 ID)
   res.iv; // 加密算法的初始向量
  },
  fail() {},
  complete() {}
 });
}

小程序在群里被打开后,获取情景值和shareTicket

//app.js
App({
 onLaunch: function (ops) {
  if (ops.scene == 1044) {
   console.log(ops.shareTicket)
  }
 }
})

Bug & Tip

1.页面之间的参数传递,需要在onLoad()函数中接收,onShow()函数中无法接收。

2.获取群聊中被打开的小程序的shareTicket,需要在App.onLaunch() 或 App.onShow()。 页面的生命周期函数中是获取不到的。

3.将转发内容至单个用户时,是无法获取到shareTicket 。

以上就是微信小程序 转发功能 的实现,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
Vue计算属性的使用
Aug 04 #Javascript
JS+Ajax实现百度智能搜索框
Aug 04 #Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 #Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 #Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 #Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
vue修改vue项目运行端口号的方法
Aug 04 #Javascript
You might like
PHP的命令行命令使用指南
2015/08/18 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
详解Vue方法与事件
2017/03/09 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
现金会计岗位职责
2013/12/05 职场文书
环保建议书600字
2014/05/14 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
会议主持词开场白
2015/05/28 职场文书
紫日观后感
2015/06/05 职场文书