【微信小程序-分享当前页面功能】

原创

已于 2025-04-23 17:33:49 修改 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2024-12-13 12:40:11 首次发布

微信小程序-分享

- 场景
- 代码

场景

最近做项目，需要在商品详情页面增加一个分享功能。
具体业务场景：商品页面数据需要登录之后才可以查看，在商品详情页面增加一个按钮，点击按钮能够唤起微信好友聊天列表(包括群聊列表)，然后选择好友发送。

代码

product.wxml

<view class="share-main" >
        <van-icon name="share-o" color="#FFFFFF" size="30rpx" />
        <button size="mini

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力成为包租婆

关注关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序：页面分享

Dove言和

03-11

1319

微信小程序页面分享一般有两种： 1、页面内按钮分享转发 2、菜单分享转发示例： wxml  <view class="share_box" data-id="goods.id"> <image class="icon_share" src="/images/goods_detail/icon_sh...

🏆 前端领域优质创作者

09-11

2096

没有设置过分享朋友圈功能的小程序，分享朋友圈按钮是灰色且无法点击。小程序 vue2 | vue3 版本语法都能使用，跟着教程复制代码运行即可。如下图所示，将页面开启分享后便可由用户转发出去。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序分享指南——分享页面和分享海报两种方式

最新发布

王兆镇的博客

10-14

808

本文介绍了微信小程序分享功能的实现方法，包括使用open-type="share"按钮、showShareMenu等API接口，以及自定义分享配置。详细讲解了通过图片、视频、公众号图文等多种方式进行主动分享的技术方案，并指出不同方式的限制，如分享后可能无法直接跳转小程序。同时提供了代码示例和样式优化建议，帮助开发者掌握小程序分享功能的核心技术要点和实现细节。

微信小程序（内嵌网页分享功能）

07-30

微信小程序（内嵌网页分享功能）使用webview加载的原web网页调用小程序分享

第二章 小程序分享功能

weixin_54275215的博客

04-28

770

小程序全局分享功能与分享有礼活动的实现逻辑

小程序分享当前页面

架构师之路

11-12

1026

小程序分享页面的时候，大部分的资料都是显示的是onShareAppMessage 这个方法。其实可以有更简单的方法，就是showShareMenu。对于我来说，上面的参数是在是太多了。

微信小程序 · 页面分享

weixin_45828332的博客

09-13

1661

小程序 · 页面分享监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮该事件处理函数需要 return 一个 Object，用于自定义转发内容参数：返回对象字段：实例: //index.wxml ... <view class="share"> <image class="" src="/static/

微信小程序 -- 年月日时分秒 picker 选择器

06-28

在微信小程序开发中，UI组件的选择器`picker`是一个常用的功能，它允许用户从一系列选项中进行选择。本文将深入探讨如何实现一个专门用于选择年、月、日、时、分、秒的`picker`组件，以提升用户体验并增强应用程序的...

微信小程序--如何获取当前页面URL

03-29

使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。 var pages = getCurrentPages() //获取加载的页面 var currentPage = pages[pages.length-1] //获取当前页面...

微信小程序-webview分享

weixin_43760969的博客

03-15

5016

微信小程序之webview分享

微信小程序实现页面分享onShareAppMessage

01-03

效果 js let app = getApp(); Page({ data: { img: /images/1.jpg }, onLoad() { }, showShareMenu() { wx.showShareMenu(); console.log(显示了当前页面的转发按钮); }, hideShareMenu() { wx.hideShareMenu(); console.log(隐藏了当前页面的转发按钮); }, onShareAppMessage: (res) => { if (res.from === 'button')

微信小程序页面实现分享功能

寻觅~流光的博客

06-04

2482

微信小程序分享功能实现指南：1)通过按钮触发分享：在页面添加<button open-type="share">按钮，并在js文件中配置onShareAppMessage函数定义分享内容（标题、路径、封面图）；2)支持异步处理分享内容；3)朋友圈分享需使用onShareTimeline函数单独配置。两种方式均可自定义分享标题、路径和封面图片，按钮触发方式还能区分分享来源。

【微信小程序】全局分享和页面分享

weixin_44899940的博客

09-01

2944

【微信小程序】全局分享和页面分享

微信小程序开启页面分享

@微你

04-13

954

效果: before: after: 使用: https://uniapp.dcloud.io/api/plugins/share.html#onshareappmessage 示例： onShareAppMessage: function () { return { title: '活动详情', desc: '这是一个活动详情!', path: 'pages/activityDetail/main?id=123' } } ...

微信小程序的分享功能

m0_65930596的博客

04-09

3086

如果 from 值是 button，则 target 是触发这次分享事件的 button，否则为 undefined（可根据target的id来判断是哪个按钮进行的分享）1、如果使用button按钮进行分享，且不需要对标题图片等信息进行修改，可以只使用一个button，如果调整则需要加上onShareAppMessage处理函数。分享事件来源：button（页面内分享按钮）、menu（右上角分享按钮）a）必须加在页面中，加在组件中不生效。

微信小程序分享当前详情页

tongxhuanbao的博客

07-28

798

需求分享商品详情页给微信好友 js onShareAppMessage:function(res){ letid=this.data.id; return{ title:this.data.xiangqing.host_name, path:'/pages/details/details?id='+id, imageUrl:this.data.xiangqing.banner_image, suc...

小程序页面分享（程序页面分享或者按钮分享）

qq_37493515的博客

08-24

7843

一、利用小程序右上角自带的分享 1、只需要一句js代码即可 //点击小程序右上角即可转发分享本页面 onShareAppMessage: function() { } 分享按钮：分享的效果：二、自己写一个自定义按钮： 1、自定义一般利用button按钮来实现的，官方文档给的解决方案是button里面添加一个open-type=‘share ’wxml <button open-type='share'> //button按钮形状 <image scr='url'>