uniapp-微信小程序分享给好友和朋友圈功能

这篇具有很好参考价值的文章主要介绍了uniapp-微信小程序分享给好友和朋友圈功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

分享给好友

只需要在要分享的页面中设置 onShareAppMessage 即可

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

监听用户点击页面内转发按钮(button 组件 open-type="share"

// 使用button分享
<button open-type="share">分享按钮</button>

或者右上角菜单“转发”按钮的行为,并自定义转发内容

具体代码如下

onShareAppMessage(res) {
    //console.log('onShareAppMessage',res);
    return {
      title: '自定义标题',
      path: '/pages/index/index?userId='+Constant.userId+'&share=true',
    }
  },
 
//onShareAppMessage {from: "button", target: {…}}

 onShareAppMessage如果带了参数,参数中的from会指明是从哪里触发的,从按钮触发from='button',从右上角菜单中触发from='menu'

是可以支持 自定义标题 自定义路径自定义图片

具体如下表

微信 小程序 选择分享好友或朋友圈,uni-app,uni-app,微信小程序,小程序

我们分享出去的页面  打开小程序的时候可以在 onLoad 事件内监听 获取参数

onLoad(query) {
    console.log('onLoad',query);
}
 
//onLoad {userId: "1530474058280374273", share: "true"}

分享到朋友圈

和分享给好友大部分都是相似的

1、onShareTimeline监听右上角菜单“分享到朋友圈”按钮的行为,并自定义分享内容。

本接口为 Beta 版本,暂只在 Android 平台支持,iOS平台有的机型支持有的不支持

具体代码如下

onShareTimeline() {
    return {
      title: '乐湃鲨自助台球',
      query: 'userId='+Constant.userId+'&storeId='+Constant.curStoreId+'&share=true',
    }
  }

事件处理函数返回一个 Object,用于自定义分享内容,不支持自定义页面路径,返回内容如下:

微信 小程序 选择分享好友或朋友圈,uni-app,uni-app,微信小程序,小程序

比分享给好友少了一个自定义路径

2、通过分享到朋友圈的内容打开小程序

       用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面。打开当前页面后,比如你分享的不是首页,你的顶部返回按钮又是一个公共的组件,都是返回上一级,你先通过分享的进入小程序,因为页面栈没有上一级,所以你是不能返回首页的,所以需要更改一下你的公共组件。

单页模式的介绍详见:分享到朋友圈 | 微信开放文档

“单页模式”默认运行的是小程序页面内容, “单页模式”下,一些组件或接口存在一定限制,可通过判断场景值等于 1154 的方法来进行页面适配。

单页模式下有很多限制,详情如下:

单页模式下的限制

小程序“单页模式”适用于纯内容展示场景,可实现的交互与接口能力有限,因此存在如下限制:文章来源地址https://www.toymoban.com/news/detail-779691.html

  1. 页面无登录态,与登录相关的接口,如 wx.login 均不可用;云开发资源需开启未登录访问方可在单页模式下使用,详见未登录模式。
  2. 不允许跳转到其它页面,包括任何跳小程序页面、跳其它小程序、跳微信原生页面
  3. 不允许横屏使用
  4. 若页面包含 tabBar,tabBar 不会渲染,包括自定义 tabBar
  5. 本地存储与小程序普通模式不共用
  6. 对于一些会产生交互的组件或接口,在点击后调用时,会弹 toast 提示“请前往小程序使用完整服务”。为达到良好的用户体验,请注意适配单页模式的接口能力,请勿大量使用被禁用的接口或组件。

运营须知

  1. 分享朋友圈能力是为了满足纯内容场景的分享诉求,滥用于营销、诱导等行为将会被打击。
  2. 小程序提供的服务中,不得存在滥用分享违规行为。如强制用户分享行为;分享立即获得利益的诱导行为;以及通过明示或暗示的样式来达到诱导分享目的的行为等。详见一、原则及相关说明 | 微信开放文档
  3. 在“单页模式”下,不得诱导或强制用户点击“打开小程序”,应在“单页模式”中尽可能呈现完整的内容

注意事项

  1. 低版本微信客户端打开时,会进入一个升级提示页面
  2. 不支持在小程序页面内直接发起分享
  3. 自定义分享内容时不支持自定义页面路径
  4. 存在 web-view 组件的页面不支持发起分享
  5. 支持打开开发版、体验版,无权限人员进入时页面会提示无权限

到了这里,关于uniapp-微信小程序分享给好友和朋友圈功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序分享、分享朋友圈功能

    页内自定义分享按钮 当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。 如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。 官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 方式1:小程序右上角原生菜

    2024年02月16日
    浏览(54)
  • uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】

    微信小程序开发结束之后,点击右上角三个点显示: 1、创建share.ts文件 2、全局使用, 在 main.ts 里面 添加全局的 mixin 这样配置结束之后整个小程序所有页面点击右上角转发分享都走的这个文件,如果需要单个页面可以转发,可以看第三点 3、在需要的页面进行调用就行啦 a.

    2024年02月14日
    浏览(64)
  • 微信小程序 - - - - - 转发分享(发送给好友、分享到朋友圈)

    监听用户点击右上角菜单的「转发」按钮时触发的事件 设置转发的参数 官方文档:onShareAppMessage ****.js 分享到朋友圈 不支持自定义页面路径!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 监听用户点击右上角菜单的「转发」按钮时触发的事件 设置转发

    2024年02月09日
    浏览(69)
  • uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)

    大家好!匆匆忙忙又到了周三,今天是 2023年9月13日|农历七月二十九 ,今天这篇文章主要是微信小程序实现分享当前页面到朋友圈或微信好友,下面来看下具体实现方式吧! 带参数和无参数是根据自己的业务需求,如果需要再onLoad函数里面赋值一些属性值的时候可以在 pat

    2024年02月09日
    浏览(47)
  • 微信小程序嵌套的H5使用小程序分享(分享微信好友或朋友圈)

    嵌套在微信小程序中的H5想要使用小程序自带分享功能,分享H5的页面给微信好友或朋友圈 H5中可使用wx.miniProgram.postMessage向小程序的webview发送消息,会触发组件的message事件,在小程序webview页面onShareAppMessage,onShareTimeline中进行使用。

    2024年02月13日
    浏览(63)
  • uniapp微信小程序全局实现发送给朋友、分享到朋友圈功能(不需要每个页面都配置)

    使用uniapp开发小程序的过程中需要实现: 点击右上角,展开,发送给朋友、分享到朋友圈功能 我们先看没有配置时微信的分享和转发按钮的状态: 配置完成后分享和转发按钮的状态: 接下来分享全局实现的步骤(不需要在每个页面单独配置): 在utils文件夹下新建share.js文

    2024年04月14日
    浏览(68)
  • uni-app 微信小程序全局配置分享好友、朋友圈...

    使用uni-app在实际项目中开发微信小程序,经常会遇到给项目添加分享给微信好友、朋友圈...功能,一般来说要将某个页面分享出去,就要在当前页面添加:  且onShareAppMessage()与onShareTimeline() 与methods同级!!! 官方网址:uniapp.dcloud.io/api/plugins… 这样做虽然实现了分享功能,

    2024年02月11日
    浏览(73)
  • uniapp 微信小程序 实现 将base64图片保存相册和转发分享微信好友功能记录 直接cv就能用!!!!

    一、base64图片保存相册功能 提示api:that.$refs.uToast.show用的是uview2.0的toast,可以根据具体引入的ui库去更换; 二、转发分享base64图片给微信好友功能  该功能在微信开发者工具中调试的时候会一直报错,真机是没问题的,可能是编译器的bug。 其实整个wx.showShareImageMenu会拉起保

    2024年02月11日
    浏览(66)
  • uniapp 微信小程序实现小程序分享好友

    我们可以使用 onShareAppMessage 的方法对 button 按钮进行触发 HTML代码

    2024年02月02日
    浏览(71)
  • 微信小程序(uniapp)-实现分享图片给微信好友

    官方地址: 微信开放文档 | wx.showShareImageMenu(Object object) 示例代码:

    2024年02月11日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包