微信小程序onShareTimeLine分享朋友圈功能

已于 2022-09-25 07:56:37 修改
阅读量8.9k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 小程序 文章标签： 微信小程序 小程序
于 2022-02-09 10:48:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ckmzlf/article/details/122836958
本文介绍了微信小程序2.11.3版本中新增的onShareTimeline方法，用于自定义朋友圈分享内容，包括标题、路径参数和自定义图片。重点讲解了参数用法及注意事项，适合开发者了解并应用到实际项目中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

微信为了更好的用户体验在2.11.3版本当中新出了一个onShareTimeLine方法跟onShareAppMessage类似的方法用于分享朋友圈，在onShareTimeLine当中的参数有title、query、imageUrl三个参数，其中title是标题，query是路径可携带参数，imageUrl是自定义的图片比例为1：1，只支持png和jpg格式的图片，默认使用小程序logo，代码如下

onShareTimeline: function () {
    return {
      title: '我是测试标题，你可以随便修改',
      path: '/pages/index/index',
      imageUrl: 'xxx.jpg'
    }
  }

tips:微信基础库需要2.11.3版本才有效和安卓机才有分享朋友圈按钮，苹果无此按钮

效果图

如何为微信小程序添加分享到朋友圈和微信群功能
wx_linying1029的博客
07-14 363
准备工作 在开始编写代码之前，您需要先在微信开发者工具中创建一个小程序，并获取到小程序的AppId。然后，在小程序后台配置好分享的图片和标题等信息。当然，为了更好地适应不同的需求，您可以根据自己的需求进行定制和扩展。为微信小程序添加分享到朋友圈和微信群的功能，可以使用微信官方提供的API来实现。下面我将为您详细介绍如何使用代码实现。在小程序中，可以通过Page的onLoad函数或其他合适的时机来设置分享到朋友圈的参数。在小程序中，可以通过Page的onLoad函数或其他合适的时机来设置分享到微信群的参数。
微信小程序---朋友圈分享
weixin_43452154的博客
08-03 1236
一、朋友圈分享注：截止目前还未能指定分享页面跳转，只能当前页面分享，分享点进来也会在分享页面。sharequery 不需要携带路径，只需要携带参数即可。2、若需携带参数，在相应的页面onload中接收参数（code）即可。1、只需在相应的页面加上onShareTimeline（）方法即可。朋友圈分享和转发分享差不多，可以参照转发朋友功能。下面具体介绍下朋友圈转发的功能实现。...
微信小程序实现分享到朋友圈的功能
记录本人工作中遇到的问题、经验总结以及分享。
02-24 8375
1、朋友圈分享的页面没有数据请求，是因为页面中使用了【禁用能力的接口】，比如onLaunch获取token使用wx.login or uni.login登录接口。2、解决方案：在朋友圈分享的页面中，所有的接口去掉token验证即可。
微信小程序分享盆友圈（onShareTimeline）
hangGe0111的博客
08-10 6463
1.代码 Page({ onShareTimeline: function() { return { title: '自定义标题', query: 'name=xxx&age=xxx', imageUrl: 'http://demo.png', } }, }) 2.参数 （官网传送门） 3.分享到朋友圈 Beta，注意事项，点击可参考： 3.1 基础库 大于等于 2.11.3 才开始支持； 3.2 目前为Beta版本，暂时只支持在 Android 平...
微信小程序配置了onShareTimeline分享到朋友圈，但是在开发者工具中这里始终是灰色的，在真机调试的时候也没有发现有分享到朋友圈的相关信息。
寬真
04-21 5014
微信小程序配置了onShareTimeline分享到朋友圈，但是在开发者工具中这里始终是灰色的，在真机调试的时候也没有发现有分享到朋友圈的相关信息。有说：使用组件的页面支持分享发送给朋友换了一个项目看也是一样的，有分享给好友，但是分享到朋友圈的按钮在开发者工具里面也是置灰的。不清楚是没有没有认证的缘故：看到另外一篇文章，确定是没有认证的原因。
小程序onShareTimeline()分享朋友圈
wm_wu的博客
07-13 3万+
运行完的效果: Page({ //页面的初始数据 data:{ }, //自定义函数 // 用户点击右上角分享给好友,要先在分享好友这里设置menus的两个参数,才可以分享朋友圈 onShareAppMessage: function() { wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, //用户点击右上角分享朋
微信小程序onShareTimeline()分享朋友圈功能
weixin_48383771的博客
12-01 4155
Page({ //页面需设置允许“发送给朋友” onShareAppMessage: function() { wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, //页面需设置允许“分享到朋友圈”，同时可自定义标题、分享图等 onShareTimeline: function () { return {
html 调用weixinsharetimeline,微信小程序使用onShareTimeline分享到朋友圈的方法
weixin_42363874的博客
06-04 2723
最近微信小程序终于公测了一个分享到朋友圈的功能，这对营销来说可是一个很重要的功能啊。如何使用这个功能呢？这里详细介绍一下。使用到的函数onShareTimeline()与onShareAppMessage()默认情况下分享到朋友圈功能是处于关闭状态的，如下图：需要在页面js文件page中加入onShareTimeline()与onShareAppMessage()才能够使用分享到朋友圈功能。两者缺...
微信小程序分享到朋友圈onShareTimeline()传参及接参
海贼王某人的博客
03-26 7279
代码如下： // index.js onShareTimeline: function () { return { title: '我是分享后显示的标题', // 可不填 query: 'id=123', // 可不填 传递的参数，只能是这种格式 imageUrl: 'https://www.baidu.com/my/active3.png' // 可不填,可以是网络路径也可以是本地路径，分享到朋友圈显示的图标 } }, /
uniapp小程序onShareTimeline()分享朋友圈多参传值
weixin_48192398的博客
03-03 6263
uniapp小程序onShareTimeline()分享朋友圈多参传值 最近在弄uniapp小程序，分享功能传参中遇到了问题，查了很多，作为新手的我也是搞了一会才弄出来。很多资料中的方法，在我这里不生效，最终还是研究出可行的方案。 很多资料中的代码是这样传参： onShareTimeline(res) { var query = { id: 123, //或者 this.id goodId: 456 // 或者 this.gooodId } return {
解决wx.onMenuShareTimeline出现的问题
11-22
wx.onMenuShareTimeline使用注意事项 我在开发测试过程中,发现使用wx.onMenuShareTimeline无效果,没有显示我定义的图片、title和链接,经过调试发现原因如下： 1.图片大小要大于300pix才能显示 2.这个方法必须先config成功，然后再wx.ready里才能调用。我直接放到$(function(){})里执行，实践证明是不行的。 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
微信小程序【发送给朋友】、【分享到朋友圈】
mudh118的博客
09-24 1970
在开发微信小程序的时候，发现【发送给朋友】、【分享到朋友圈】功能是灰色的，不能点击，那么说明这个小程序没有写这部分的代码。这几个功能，并不是你项目建起来了就有的，需要手动追加代码。onShareAppMessage和onShareTimeline每个页面都得单独写一份。1.【发送给朋友】使用 onShareAppMessage 这个方法。2.【分享到朋友圈】使用 onShareTimeline 方法。才有分享朋友圈按钮，苹果无此按钮。
uniapp使用onShareTimeline分享朋友圈自定义内容无效
qq_44862112的博客
05-15 2517
onShareTimeline分享朋友圈自定义内容无效
微信小程序的分享配置onShareAppMessage
qq_46199553的博客
02-03 6146
在小程序的js页面里，写次方法，则点击右上角三个“···”会有对应的分享菜单，如果不写，其实就相当于禁用的该页面的分享。
微信JSSDK分享接口教程，wechat，share ,onMenuShareAppMessage wx.onMenuShareTimeline
热门推荐
LYJ个人博客，记录技术、八卦、生活，分享各种心得，期待与朋友们一同进步
11-22 3万+
哎，张小龙写的教程真差，妮玛要研究半天才能用上，大家按我的步骤12345，包你药到病除： 1、官方参考： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 2、第1点没卵用，去下载样例，我以PHP为主： http://demo.open.weixin.qq.com/jssd
【微信小程序知识点】分享到朋友圈功能实现
weixin_51781852的博客
07-12 571
1.页面必须设置允许“发送给朋友”，页面js文件声明onShareAppMessage事件监听函数。2.页面必须需设置允许“分享到朋友圈”，页面js文件声明onShareTimeline事件监听函数。
wx.onMenuShareTimeline使用注意事项
xiupeiyin的博客
06-08 2401
我在开发测试过程中,发现使用wx.onMenuShareTimeline无效果,没有显示我定义的图片、title和链接,经过调试发现原因如下： 1.图片大小要大于300pix才能显示 2.这个方法必须先config成功，然后再wx.ready里才能调用。我直接放到$(function(){})里执行，实践证明是不行的wx.config({ debug: true, //
微信小程序按钮分享朋友圈
最新发布
06-13
### 微信小程序实现按钮分享到朋友圈功能 在微信小程序中，实现按钮分享到朋友圈的功能需要结合 `wx.showShareMenu()` 方法以及自定义按钮的点击事件。需要注意的是，微信小程序从 2.10.3 版本开始支持将内容直接分享到朋友圈[^3]。 以下是一个完整的实现方案： #### 1. 配置页面分享功能 在页面的 `json` 文件中，需要开启 `share` 能力。例如： ```json { "navigationBarTitleText": "分享示例", "enableShareAppMessage": true } ``` #### 2. 创建分享按钮 在页面的 `wxml` 文件中，创建一个触发分享的按钮，并绑定点击事件： ```xml <button bindtap="onShareToTimeline">分享到朋友圈</button> ``` #### 3. 实现分享逻辑 在页面的 `js` 文件中，编写分享逻辑。以下是一个示例代码： ```javascript Page({ onShareToTimeline() { wx.showShareMenu({ withShareTicket: true, menus: ['shareToFriend', 'shareToTimeline'] // 显示分享到朋友圈和好友的选项 }); }, onShareTimeline() { return { title: '这是一个分享标题', // 分享到朋友圈的标题 query: 'key=value', // 带参跳转参数 imageUrl: 'https://example.com/image.jpg' // 自定义分享图片 }; } }); ``` #### 4. 注意事项 - 确保小程序的基础库版本不低于 2.10.3，否则无法使用分享到朋友圈的功能。 - 分享内容中的 `title` 和 `imageUrl` 必须符合微信平台的审核规范[^2]。 - 如果需要取消对系统分享按钮的监听，可以使用 `wx.offShareMenu()` 方法[^1]。 ```javascript wx.offShareMenu(); ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值