小程序转发探索示例


Posted in Javascript onFebruary 19, 2019

转发的意义

  • 转发即是分享,分享带动了事物去中心化,实现网络化,最终走向云处理化
  • 通过微信平台,转发即是聊天
  • 流量时代,转发即是引流

官方转发示例

onShareAppMessage(Object)

监听用户点击页面内转发按钮(<button> 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

Object 参数说明:

小程序转发探索示例

此事件需要 return 一个 Object,用于自定义转发内容,返回内容如下:

自定义转发内容

小程序转发探索示例

Page({
 onShareAppMessage(res) {
  if (res.from === 'button') {
   // 来自页面内转发按钮
   console.log(res.target)
  }
  return {
   title: '自定义转发标题',
   path: '/page/user?id=123'
  }
 }
})

常规转发,只需上面示例即可

  • 在onShareAppMessage中定义转发内容和必要参数,如?id=123
  • 在相应页面的onLoad(Object query)中可以获取

根据场景值区分

  • 对于小程序,可以在 App 的 onLaunch 和 onShow,或wx.getLaunchOptionsSync 中获取场景值
  • 由于onLaunch全局只触发一次和热启动的原因,在onShow中获取、设置相关参数比较合理,尤其是转发,从微信消息过来,必然会触发onShow
  • 通过app.onShow回调,获取场景值
App({
 onShow(res) {
  console.log('app---onShow');
  console.log(res.scene);
  //1044是群聊,1007是私聊
 }
})

wx.onAppShow(function callback)

基础库 2.1.2 开始支持,低版本需做兼容处理

监听小程序切前台事件。该事件与 App.onShow 的回调参数一致

Object res

小程序转发探索示例

referrerInfo 的结构

小程序转发探索示例

返回有效 referrerInfo 的场景

小程序转发探索示例

注意
部分版本在无referrerInfo的时候会返回 undefined,建议使用 options.referrerInfo && options.referrerInfo.appId 进行判断

小程序分享票据shareTickets

通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息,例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true ,当用户将小程序转发到任一群聊之后,此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket。通过调用 wx.getShareInfo() 接口传入此 shareTicket 可以获取到转发信息。

  • 和场景值scene一样,shareTicket也是在App.onShow中获取比较合理
  • 必须在分享前调用wx.showShareMenu方法,否则不会带分享票据
//分享前share.js
Page({
 onLoad: function () {
  wx.showShareMenu({
   withShareTicket: true
  })
 }
})
//分享后app.js
App({
 onShow(res) {
  console.log('app---onShow');
  console.log(res.shareTicket);
 }
})
  • 只有分享到任一群聊,shareTicket才会有值,否则是undefined
  • shareTicket也可以用来区分转发消息的场景
  • shareTicket主要用来获取转发详情,传入wx.getShareInfo()中获取加密数据,需要后端配合,返回解密数据
注意:注意:注意
鉴于官方“分享监听”能力调整,网上90%的滞后代码,误人子弟,在此必须给自己一个小要求,定期复读自己的文章,根据当时能力水平,提高文章质量,修正错误和滞后信息(吐槽一下度娘已死,没人打我吧?打我就删除)

类似如下代码,现在已不支持回调

小程序转发探索示例

此次调整可能影响到三种分享功能的用法

第一种:判断用户是否分享成功,进而给予用户奖励。

例如:小程序提示用户“分享到5个群,可以获得一张20元的优惠券”。

这类诱导用户分享的行为是我们平台所不倡导的,后续将没有办法实现。

第二种:分享完成后变更当前的页面状态

例如:赠送礼品场景下,用户点击“赠送”按钮,将礼品分享出去,分享成功后,界面展示“等待领取”。

这类场景,我们建议可以适当调整交互方案。例如在分享后继续保留“赠送”按钮,但在页面上提示用户一个礼品只能被一人领取,重复赠送无效。

第三种:通过用户分享之后的 shareTicket 获取群唯一标识 openGId ,以显示对应群的相关信息。

例如:通过分享小程序到某个群里,可以查看该群内成员的排行榜。

此次调整后,用户分享完成后无法立刻显示该群的排行榜信息,但仍可在用户从群消息点击进入小程序时显示该群的排行榜信息。

详情请查看分享监听能力调整

转发动态消息

从基础库 2.4.0 开始,支持转发动态消息。动态消息对比普通消息,有以下特点:

  • 消息发出去之后,开发者可以通过后台接口修改部分消息内容
  • 消息有对应的提醒按钮,用户点击提醒按钮可以订阅提醒,开发者可以通过后台修改消息状态并推送一次提醒消息给订阅了提醒的用户

简要步骤如下

  1. (后端调用)每条动态消息可以理解为一个活动,活动发起前需要通过 createActivityId 接口创建 activity_id后续转发动态消息以及更新动态消息都需要传入这个 activity_id
  2. 通过调用 wx.updateShareMenu 接口,传入 isUpdatableMessage: true等参数
  3. (后端调用)动态消息发出去之后,可以通过 setUpdatableMsg 修改消息内容

像拼团这样的活动,可以考虑优化成动态消息,需要后端配合,实战的时再补充

总结

分享监听能力调整后,对于分享的骚操作基本在App.onShow中进行,相当于授权那样,必须打开转发消息才能获取转发详情,这也是符合设计准则的

可以看出,不管是从设计准则,还是用户隐私,微信都在向着IOS看齐,黑暗法则已过去,我们也该注重规范和隐私了

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

Javascript 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 #Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
基于node.js实现爬虫的讲解
Feb 18 #Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 #Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 #Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 #Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 #Javascript
You might like
获取远程文件大小的php函数
2010/01/11 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Python绘制股票移动均线的实例
2019/08/24 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
幼儿园国庆节活动方案
2014/02/01 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
瘦西湖导游词
2015/02/03 职场文书
商超业务员岗位职责
2015/02/13 职场文书
赢在中国观后感
2015/06/02 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android