小程序转发探索示例

转发的意义

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

官方转发示例

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看齐,黑暗法则已过去,我们也该注重规范和隐私了

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

(0)

相关推荐

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

    微信小程序 转发功能的实现 1.当用户将小程序转发到任一群聊之后,可以获取到此次转发的 shareTicket 2.此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunch() 或 App.onShow 获取到另一个 shareTicket 3.两步获取到的 shareTicket 均可通过 wx.getShareInfo() 接口可以获取到相同的转发信息. onShareAppMessage(options)函数设置该页面的转发信息. options参数说明: from:转发事件来

  • 小程序转发探索示例

    转发的意义 转发即是分享,分享带动了事物去中心化,实现网络化,最终走向云处理化 通过微信平台,转发即是聊天 流量时代,转发即是引流 官方转发示例 onShareAppMessage(Object) 监听用户点击页面内转发按钮(<button> 组件 open-type="share")或右上角菜单"转发"按钮的行为,并自定义转发内容.注意:只有定义了此事件处理函数,右上角菜单才会显示"转发"按钮 Object 参数说明: 此事件需要

  • 微信小程序转发事件实现解析

    这篇文章主要介绍了微信小程序转发事件实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 和生命周期是同级,在.js文件里面设置 // 分享按钮 onShareAppMessage: function () { return { title: '前端伪大叔', path: "/pages/list/list", imageUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK

  • 开发Node CLI构建微信小程序脚手架的示例

    本文介绍了 Node CLI 构建微信小程序脚手架的示例,分享给大家,具体如下: 目的 由于目前公司的 TOC 产品只要是微信小程序,而且随着业务的扩展, 会有更多的需求,创建更多的小程序,为了让团队避免每次开发前花费大量时间做比如工程化的一些配置,以及保持每个项目的一致性, 所以决定做一个 Node CLI 来创建微信小程序脚手架 节省开发前期的大量时间,新项目可以很快开始业务开发 保证项目统一性,有利于团队间的协作及工程化 提升团队基建意识,从枯燥无味的业务开发中脱离出来,尝试新的东西,即使

  • 小程序自动化测试的示例代码

    背景 近期团队打算做一个小程序自动化测试的工具,期望能够做的业务人员操作一遍小程序后,自动还原之前的操作路径,并且捕获操作过程中发生的异常,以此来判断这次发布时候会影响小程序的基础功能. 上述描述看似简单,但是中间还是有些难点的,第一个难点就是如何在业务人员操作小程序的时候记录操作路径,第二个难点就是如何将记录的操作路径进行还原. 自动化 SDK 如何将操作路径还原这个问题,当然首选官方提供的 SDK: miniprogram-automator . 小程序自动化 SDK为开发者提供了一套通过外

  • 微信小程序国际化探索实现(附源码地址)

    随着小程序应用越来越广泛,国际化支持逐渐成了刚需. 官方文档给出了一个 国际化方案 ,但觉得配置起来稍微有点复杂,对项目结构还有一定的要求.如果是旧项目改动成本太大,遂决定自己实现一个小程序国际化方案. 源码地址:https://github.com/cachecats/miniprogram-i18n 一.项目结构 整体目录结构如下图: assets 存放资源文件,如图片 constants 存放项目中用到的常量 i18n 存放语言文件,中文是 zh-CN.js 英文是 en-US.js ,如

  • 详解微信小程序工程化探索之webpack实战

    前言 微信小程序因为其便捷的使用方式,以极快的速度传播开来吸引了大量的使用者.市场需求急剧增加的情况下,每家互联网企业都想一尝甜头,因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能.但小程序开发当中总有一些不便一直让开发者诟病不已,主要表现在: 初期缺乏方便的npm包管理机制(现阶段确实可以使用npm包,但是操作确实不便) 不能使用预编译语言处理样式 无法通过脚本命令切换不同的开发环境,需手动修改对应环境所需配置(常规项目至少具备开发与生产环境) 无法将规范检查工具结合到项目工程中(

  • ECharts的三维可视化及在微信小程序中使用示例

    目录 在微信小程序中使用 ECharts 三维可视化 在微信小程序中使用 ECharts 关于微信小程序的项目创建. 创建项目后,可以用新项目完全替换weixin项目下载的电子商务/图表,然后修改代码:或者只需将ec画布目录复制到新项目,然后进行相应的调整. 如果采用完全替换的方法,则project.config json中的appid将替换为公共平台上应用的项目id. pages目录下的每个文件夹都是一个页面.可以根据情况删除不必要的页面,然后单击应用程序删除json中的相应页面. 如果只复制

  • 生成无限制的微信小程序码的示例代码

    概述 现在除了用二维码之外,微信还可以为我们生成小程序码,大概长这个样子. 如果要生成无限制的小程序码,需要几个步骤 1.小程序某个页面的地址,也即是指定page参数的值: 2.获取access_token; 3.指定scene参数的值: 4.调用getwxacodeunlimit接口,并将返回结果存储到一个图片里. page参数 page参数的值都是以pages开头的,后面加上能到导航到某个小程序页面的路径,例如: pages/xxxxxx 获取access_token 这个比较简单,只需要根

  • Django实现微信小程序支付的示例代码

    1.下载相关的库 微信官方已经提供了方便开发者的SDK,可是使用pip方式下载: pip install wechatpy 2. 在项目的settings.py文件添加相关配置 具体的参数需要自己到小程序微信公众平台和微信商户平台获取. WECHAT = { 'APPID': 'appid', # 小程序ID 'APPSECRET': 'appsecret', # 小程序SECRET 'MCH_ID': 'mch_id', # 商户号 'TOTAL_FEE': '1', # 总金额, 单位为"分

随机推荐