小程序转发探索示例


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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
js随机生成一个验证码
Jun 01 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
Javascript模拟实现new原理解析
Mar 03 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
全国中波电台频率表
2020/03/11 无线电
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
xml+php动态载入与分页
2006/10/09 PHP
PHP教程 基本语法
2009/10/23 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
Javascript开发包大全整理
2006/12/22 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
python的pip安装以及使用教程
2018/09/18 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
违纪检讨书2000字
2014/02/08 职场文书
培训专员岗位职责
2014/02/26 职场文书
房地产促销活动方案
2014/03/01 职场文书
抵押贷款承诺书
2014/05/30 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Python3的进程和线程你了解吗
2022/03/16 Python
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
小程序实现侧滑删除功能
2022/06/25 Javascript