首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序实现带参分享并消息卡片获取参数

微信小程序实现带参分享并消息卡片获取参数

作者头像
青年码农
发布于 2020-11-23 06:09:18
发布于 2020-11-23 06:09:18
4.9K00
代码可运行
举报
文章被收录于专栏:青年码农青年码农
运行总次数:0
代码可运行

公司小程序开发已经接近尾声,功能已在测试,现在有个需求,就是小程序分享功能,并在消息卡片打开后数据依然显示。

1 小程序分享

小程序分享功能实现有两种方法

1. onShareAppMessage方法

这种方法用户需要点击页面右上角三个点,下方弹出中选择发送给朋友

代码配置在页面js中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
onShareAppMessage: function () {
    return {
      title: this.data.details.title,
      path: 'pages/details/details?jobInfoId=' + this.data.details.jobInfoId,
    };
  },

path后面的就是传递的参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'

2. button标签

这种方式好处是,在页面上任意地方都可以增加分享,不需要用户点击上方三个点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button plain open-type="share">
  <image src="../../images/share.png"></image>
  <text>我要分享</text>
</button>

页面增加一个按钮,按钮样式自定义,用户点击按钮后触发 Page.onShareAppMessage 事件。就是上面第一种方法,传参一样

2 获取分享传递的参数

小程序获取分享传递的参数只有一种方式,就是在onLoad方法中接收options,从options获取分享传递的参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
    onLoad: function(options) {
        console.log(options);
    }
})

没发布之前用编辑器,添加编译模式,模拟群聊会话中的小程序消息卡片,可以正确拿到分享传递的参数

拿到参数后,即可处理后续逻辑。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-11-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序 转发、分享、预览
之前做过的微信小程序项目,则涉及到很多转发分享的功能,例如 页面的分享-到朋友圈-好友,文件(图片 doc pdf )的分享给好友等等,开发中用到的api方法和遇到的问题,今天在这里统一总结记录下。
iwhao
2024/07/01
1.7K0
小程序的分享与社交功能实现
微信小程序的分享与社交功能是提升用户增长和互动的重要手段。 通过转发、群分享、动态消息等方式,小程序可以增强传播效果,提高留存率。 本文将详细解析小程序分享功能的实现,并提供实际代码示例,最后总结优化建议和参考资料。
LucianaiB
2025/01/29
6610
微信小程序入门文档下载_小程序开发教程全集免费
最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式。
全栈程序员站长
2022/09/20
11.4K0
微信小程序入门文档下载_小程序开发教程全集免费
App分享微信小程序
之前一直分享到公众号,由于公众号很难维护,小程序出现后,开发了小程序,于是准备直接打开分享连接跳到小程序。
honey缘木鱼
2018/09/26
9.4K0
App分享微信小程序
第二十六期:基于 Taro 的分销小程序关键技术点分析及实践
域名到期,回复中的下载地址暂时无法访问,这几天会找时间修复这个问题,同时上传更多的书籍供大家下载阅读。
terrence386
2022/07/15
5120
微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善
根据文章内容,总结为:本文介绍了如何利用微信小程序实现商品详情页展示商品图片、价格和商品详情,并包括了如何获取商品详情数据、如何使用小程序云开发以及如何在小程序中调用云开发实现商品详情展示等功能。同时,文章还介绍了如何实现分享功能,包括调用小程序云开发获取分享列表和详情,以及如何在小程序中展示商品详情和分享功能。
iKcamp
2018/01/04
9830
【微信小程序】小程序自定义随机分享图片
 🍉🍉🍉大家好,我是痴心阿文,你们的学友哥 。 本章内容:微信小程序分享功能,支持自定义分享随机图片。看完需要花费5分钟,效果图如下:   🍉🍉🍉HTML 区域 <button open-type='share' type='warn' size="mini" plain="true" id='btnShare0'>推荐给好友</button>   🍉🍉🍉JS区域  //分享功能 onShareAppMessage: function (res) { var shareimg
痴心阿文
2022/11/18
1.2K0
【微信小程序】小程序自定义随机分享图片
分享:微信小程序中的分享事件
在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。
疯狂的小程序
2018/01/25
2.7K0
微信小程序 转发功能实例讲解
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/81082526
泥豆芽儿 MT
2018/09/11
2.5K0
微信小程序 转发功能实例讲解
微信小程序分享功能onShareAppMessage(options)用法分析
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菲宇
2019/10/22
8.5K0
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
✅ 小程序已通过微信认证(非个人主体) ✅ 已绑定微信开放平台账号(同一主体) ✅ 小程序已发布或处于体验版/开发版(部分功能需审核)
卓伊凡
2025/05/19
9040
微信小程序页面路由
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菲宇
2019/10/22
1.4K0
app唤起小程序_微信小程序支付轮训
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转。
全栈程序员站长
2022/09/20
1.9K0
微信小程序从零开始开发步骤(四)自定义分享的功能
上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能。本章节介绍的是小程序的自定义分享的功能。 可以分享小程序的任何一个页面给好友或群聊。注意是分享给好友或群聊,并没有分享到朋友圈。一
王小婷
2018/05/31
6700
微信小程序官方组件展示之表单组件button源码
以下将展示微信小程序之表单组件button源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
软件事业部
2022/08/19
9470
一文教会你|uniapp微信小程序分享怎么写?uniapp 微信小程序当前页面未设置分享?
打开项目的manifest.json文件,在“App模块配置”项的“Share(分享)”下,勾选“微信分享”:
肥晨
2024/07/12
3.7K0
一文教会你|uniapp微信小程序分享怎么写?uniapp 微信小程序当前页面未设置分享?
微信小程序版博客——文章详情页设计及问题汇总
wxParse是将html格式的富文本内容转换成小程序可展示的内容的组件,在框架搭建那一篇文章中有提到。
Bug生活2048
2018/08/31
5K0
微信小程序版博客——文章详情页设计及问题汇总
微信小程序的 5 种分享方式,你知道几种?(含技术实现方案)
在微信生态中,微信小程序的裂变传播效果尤为显著,而实现裂变的关键在于分享方式。在小程序内提供更多的分享方式就能让触达更多的用户,我将为大家详细介绍微信小程序的 5 种分享方式以及技术实现方案。
陈宇明
2025/02/26
1.4K0
微信小程序的 5 种分享方式,你知道几种?(含技术实现方案)
【愚公系列】2022年02月 微信小程序-页面生命周期
注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
愚公搬代码
2022/12/01
5920
微信小程序从零开始开发步骤(四)自定义分享的功能
上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能。本章节介绍的是小程序的自定义分享的功能。
王小婷
2025/05/18
2590
微信小程序从零开始开发步骤(四)自定义分享的功能
推荐阅读
相关推荐
微信小程序 转发、分享、预览
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档