微信小程序 - 实现详情页分享功能

素颜马尾好姑娘i 2021-08-13 13:14 735阅读 0赞

#### 1、wxml文件： ####

**注意：一定要写 opne-type=“share”,button标签一定要在它的外面包裹一层view标签，不然我们是看不到button标签的**

<view class='enjoy'>
        <button class='share' open-type="share">立即分享</button>
    </view>

#### 2、js文件： ####

要在onLoad里面写入以下代码：

// 分享给好友
    wx.showShareMenu({
          withShareTicket: true
    });

然后在onLoad下方写这个方法：

/* 转发*/
      onShareAppMessage: function (ops) {
    
        if (ops.from === 'button') {
          // 来自页面内转发按钮
          console.log(ops.target)
        }
        return {
          title: this.data.name,  // 分享名称
          path: 'pages/detail/detail?tid=' + this.data.tid + '&&bid=' + this.data.bid,  // 点击分享后的链接要来到的页面的路径已经对应需要的参数
          success: function (res) {  // 分享成功之后的操作
            console.log("分享成功:" + JSON.stringify(res));
          },
          fail: function (res) {  // 分享失败之后的操作
            console.log("分享失败:" + JSON.stringify(res));
          }
        }
      }

分享成功的例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210813/86ab1dd5d36c460d903f762467903067.png

发表评论取消回复

表情：

评论列表（有 0 条评论，735人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp小程序实现微信小程序自带的分享功能

可以使用 uni.showModal() 和 uni.showActionSheet() 方法来实现微信小程序自带的分享功能。 1. 使用 uni.showModal()

亦凉/ 2023年10月08日 19:58/ 0 赞/ 31 阅读

相关微信小程序如何实现列表数据的详情页功能

1. 微信小程序点击列表页进入详情页，在列表页 `list.wxml`中，对于每一个数据项，可以通过 `catchtap`去绑定一个事件，去详情页的事件 `toDetail`

迷南。/ 2023年07月13日 15:12/ 0 赞/ 55 阅读

相关微信小程序分享

页面代码 <button open-type='share' class="fenxiangitem"> <image class="imgs" s

爱被打了一巴掌/ 2022年12月25日 02:59/ 0 赞/ 257 阅读

相关微信小程序实现微信登录功能

想要实现微信小程序登录并与APP的微信登录实现数据想通，首先，需要在微信开放平台将微信小程序进行绑定，从而实现在微信后台能将数据打通。其次是通过微信小程序提供的方法获取微信

落日映苍穹つ/ 2022年12月24日 09:59/ 0 赞/ 425 阅读

相关微信小程序点击分享功能

\[html部分\] < view class = "usermotto carDesc carDesc1"> <!-- <button class="user-mo

刺骨的言语ヽ痛彻心扉/ 2022年05月29日 01:48/ 0 赞/ 282 阅读

相关微信小程序微商城（五）：动态API实现商品详情页（下）

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn] 上一篇：[微信小程序微商城（四）：动态API实现商品详情页（

怼烎@/ 2022年05月22日 13:39/ 0 赞/ 217 阅读

相关微信小程序微商城（四）：动态API实现商品详情页（上）

上一篇：[微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现][API] IT实战联盟博客：[http://blog.100boot.cn][http_b

小灰灰/ 2022年05月22日 02:52/ 0 赞/ 248 阅读

相关微信小程序-分享

作用：分享某页面，发送给某好友 1.设置button的open-type属性=“share”，则可调出微信好友列表。 2.js中写一个监听分享的事件。 onShar

末蓝、/ 2022年02月16日 10:22/ 0 赞/ 432 阅读

相关微信小程序 - 使用canvas绘制海报实现分享功能

今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3

喜欢ヅ旅行/ 2021年08月28日 16:28/ 0 赞/ 775 阅读

相关微信小程序 - 实现详情页分享功能

1、wxml文件：注意：一定要写 opne-type=“share”,button标签一定要在它的外面包裹一层view标签，不然我们是看不到button标签的

素颜马尾好姑娘i/ 2021年08月13日 13:14/ 0 赞/ 736 阅读