返回顶部
首页 > 资讯 > 精选 >小程序怎么显示当前页面的转发按钮
  • 580
分享到

小程序怎么显示当前页面的转发按钮

2023-06-26 08:06:52 580人浏览 独家记忆
摘要

今天小编给大家分享一下小程序怎么显示当前页面的转发按钮的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。onShareAppMe

今天小编给大家分享一下小程序怎么显示当前页面的转发按钮的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

onShareAppMessage(options)


在 Page 中定义 onShareAppMessage 函数,设置该页面的转发信息。

  • 只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

  • 用户点击转发按钮的时候会调用

  • 此事件需要 return 一个 Object,用于自定义转发内容

options 参数说明

参数类型说明最低版本
fromString转发事件来源。button:页面内转发按钮;menu:右上角转发菜单1.2.4
targetObject如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined1.2.4

自定义转发字段

字段说明默认值最低版本
title转发标题当前小程序名称 
path转发路径当前页面 path ,必须是以 / 开头的完整路径 
success转发成功的回调函数 1.1.0
fail转发失败的回调函数 1.1.0
complete转发结束的回调函数(转发成功、失败都会执行 1.1.0

回调结果:

回调类型errMsg说明
successshareAppMessage:ok转发成功
failshareAppMessage:fail cancel用户取消转发
failshareAppMessage:fail (detail message)转发失败,其中 detail message 为详细失败信息

success回调参数说明:

参数类型说明最低版本
shareTicketsStringArrayshareTicket 数组,每一项是一个 shareTicket ,对应一个转发对象1.1.0

示例代码:

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

wx.showShareMenu(OBJECT)


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

显示当前页面的转发按钮

OBJECT参数说明:

参数类型必填说明
withShareTicketBoolean是否使用带 shareTicket 的转发详情
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.showShareMenu({  withShareTicket: true})

wx.hideShareMenu(OBJECT)


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

隐藏转发按钮

OBJECT参数说明:

参数类型必填说明
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.hideShareMenu()

wx.updateShareMenu(OBJECT)


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

更新转发属性

OBJECT参数说明:

参数类型必填说明
withShareTicketBoolean是否使用带 shareTicket 的转发详情
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.updateShareMenu({  withShareTicket: true,  success() {  }})

wx.getShareInfo(OBJECT)


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

获取转发详细信息

OBJECT参数说明:

参数类型必填说明
shareTicketStringshareTicket
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

CALLBACK 参数说明:

参数类型说明
errMsgString错误信息
encryptedDataString包括敏感数据在内的完整转发信息的加密数据,详细见加密数据解密算法
ivString加密算法的初始向量,详细见加密数据解密算法

encryptedData 解密后为一个 JSON 结构,包含字段如下:

字段说明
openGId群对当前小程序的唯一 ID

Tip: 如需要展示群名称,可以使用开放数据组件

获取更多转发信息


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

页面内发起转发


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

通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage() 事件,如果当前页面没有定义此事件,则点击后无效果。相关组件:button

使用指引

转发按钮,旨在帮助用户更流畅地与好友分享内容和服务。转发,应是用户自发的行为,且在需要时触手可及。开发者在使用时若遵从以下指引,会得到更佳的用户体验。

  1. 含义清晰:明确、一目了然的图形按钮,将为用户减少理解的时间。在我们的资源下载中心,你可以找到这样的按钮素材并直接使用。或者你可以根据自己业务的设计风格,灵活设计含义清晰的按钮的样式。当然,你也可以直接使用带文案的按钮,“转发给好友”,它也足够明确。

  2. 方便点击:按钮点击热区不宜过小,亦不宜过大。同时,转发按钮与其他按钮一样,热区也不宜过密,以免用户误操作。

  3. 按需出现:并非所有页面都适合放置转发按钮,涉及用户隐私的非公开内容,或可能打断用户完成当前操作体验的场景,该功能并不推荐使用。同时,由于转发过程中,我们将截取用户屏幕图像作为配图,因此,需要注意帮助用户屏蔽个人信息。

  4. 尊重意愿:理所当然,并非所有的用户,都喜欢与朋友分享你的小程序。因此,它不应该成为一个诱导或强制行为,如转发后才能解某项功能等。请注意,这类做法不仅不被推荐,还可能违反我们的《运营规范》,我们强烈建议你在使用前阅读这部分内容。

Bug & Tip

  1. tip: 转发图片不能自定义;会取当前页面,从顶部开始,高度为 80% 屏幕宽度的图像作为转发图片。

  2. tip: 转发的调试支持请查看 普通转发的调试支持 和 带 shareTicket 的转发

  3. tip: 只有转发到群聊中打开才可以获取到 shareTickets 返回值,单聊没有 shareTickets

  4. tipshareTicket 仅在当前小程序生命周期内有效

  5. tip: 由于策略变动,小程序群相关能力进行调整,开发者可先使用wx.getShareInfo接口中的群ID进行功能开发。

以上就是“小程序怎么显示当前页面的转发按钮”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。

--结束END--

本文标题: 小程序怎么显示当前页面的转发按钮

本文链接: https://lsjlt.com/news/307993.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 小程序怎么显示当前页面的转发按钮
    今天小编给大家分享一下小程序怎么显示当前页面的转发按钮的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。onShareAppMe...
    99+
    2023-06-26
  • 为什么小程序当前页面不可转发
    小程序当前页面不可转发的原因:可能是你删除了默认的onShareAppMessage实现方法,这个方法在代码生成的时候就存在了,只要加上即可,例: “onShareAppMessage: function () { }”。...
    99+
    2024-04-02
  • 微信小程序按钮点击跳转页面的示例分析
    这篇文章给大家分享的是有关微信小程序按钮点击跳转页面的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序中,按钮也是<button></butto...
    99+
    2024-04-02
  • 微信小程序实现点击按钮跳转页面
    微信小程序中点击按钮跳转页面可以使用 wx.navigateTo 或 wx.redirectTo 方法。 首先,在按钮的绑定事件中调用方法,如: 跳转页面 然后,在页面的 js 文件中实现跳转逻辑,如: Page({ ju...
    99+
    2023-10-23
    微信小程序 小程序 前端 javascript 开发语言
  • 小程序date怎么在页面显示
    小程序date在页面显示的案例:.wxml代码:<!--index.wxml--><view class="container">  <!-- 建立按...
    99+
    2024-04-02
  • 微信小程序怎么传参给当前页面
    微信小程序传参给当前页面的方法:用 navigator标签传值或 wx.navigator。<navigator class="hotCateColumn" url="../detai...
    99+
    2024-04-02
  • H5跳转小程序按钮(wx-open-launch-weapp)不显示问题
    原因: 开发使用者必须是已认证的服-务-号(服务号可以置顶,订阅号不能),服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 开发使用者必须是已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的...
    99+
    2023-10-10
    小程序
  • 小程序webview嵌入的H5页面,点击按钮,返回小程序的指定页面
    今天弄了一个活动,首先从小程序进入webview里的H5页面,然后H5页面里有个按钮,点击后需要跳转到小程序的注册页。那么,H5那边该怎么实现呢? 因为已经进入小程序环境了,所以实现起来相对单纯的H5...
    99+
    2023-10-20
    小程序 javascript 前端
  • 小程序如何获取当前页面的id
    小程序获取当前页面id的案例:.wxml文件代码:          <block wx:for-items="{...
    99+
    2024-04-02
  • H5跳转小程序按钮不显示(wx-open-launch-weapp)踩坑指南
    1、开发使用者必须是已认证的服-务-号(服务号可以置顶,订阅号不能),服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2、开发使...
    99+
    2023-02-01
    h5跳转小程序按钮不显示了 h5跳转小程序怎么做 外部h5跳转小程序
  • 小程序页面怎么转发到朋友圈
    小程序页面转发到朋友圈的步骤:打开小程序。点击右上角的“···”。会弹出一些功能信息,选择“分享到朋友圈”即可。(注意:部分小程序不支持分享到朋友圈)...
    99+
    2024-04-02
  • 小程序怎么在页面显示数组信息
    小程序在页面显示数组信息的方式:方式一:for (var index in res.data) {title : res.data[index].title}res.da...
    99+
    2024-04-02
  • 小程序如何实现保留当前页面跳转到应用内的某个页面
    本文将为大家详细介绍“小程序如何实现保留当前页面跳转到应用内的某个页面”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“小程序如何实现保留当前页面跳转到应用内的某个页面”能够给你意想不到的收获,请大家跟着小编的思...
    99+
    2023-06-26
  • php页面怎么用JavaScript实现点击按钮显示隐藏
    这篇文章主要讲解了“php页面怎么用JavaScript实现点击按钮显示隐藏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php页面怎么用JavaScript实现点击按钮显示隐藏”吧!第一步...
    99+
    2023-07-05
  • 小程序开发中如何动态设置当前页面的标题
    这篇“小程序开发中如何动态设置当前页面的标题”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“小程序开发中如何动态设置当前页面的标题”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章...
    99+
    2023-06-26
  • 怎么在小程序页面内进行转发操作
    这篇文章给大家分享的是有关怎么在小程序页面内进行转发操作的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。我们先来看看官方文档上的内容:官方文档上说通过给 button 组件设置属性 open-type="...
    99+
    2023-06-06
  • 微信小程序开发中如何动态设置当前页面的标题
    这篇“微信小程序开发中如何动态设置当前页面的标题”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序开发中如何动态设置当前页面的标题”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的...
    99+
    2023-06-26
  • 小程序开发中如何实现停止当前页面下拉刷新
    这篇“小程序开发中如何实现停止当前页面下拉刷新”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序开发中如何实现停止当前页面下拉刷新”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢...
    99+
    2023-06-26
  • 怎么解决HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
    这篇文章主要介绍怎么解决HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!项目背景之前也没写过小程序但是看过之后都是现成的api 简单易懂 唯一就是会有很多坑要去踩...
    99+
    2023-06-09
  • HTML5页面点击按钮显示闪烁或黑色背景怎么解决
    本篇内容介绍了“HTML5页面点击按钮显示闪烁或黑色背景怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作