微信小程序之自定义分享功能

最新推荐文章于 2024-08-21 09:24:22 发布

12程序猿

最新推荐文章于 2024-08-21 09:24:22 发布

阅读量8.9k

点赞数 4

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_26383975/article/details/107249222

版权

本文介绍了微信小程序中自定义分享功能的两种方式。第一种是利用小程序右上角的分享功能，通过wx.hideShareMenu()和wx.showShareMenu()进行隐藏与显示控制。第二种方式是通过在页面内创建自定义分享按钮，使用open-type='share'属性，并结合onShareAppMessage事件来实现。同时，提供了相关代码示例。

摘要由CSDN通过智能技术生成

小程序调起分享的两种方式：

方式1：小程序右上角自带的分享功能（…）：

如果在当前页面调用wx.hideShareMenu()方法，那么右上角的分享功能将被隐藏，当然，隐藏方法与现实方法是承兑出现的，调用wx.showShareMenu()方法，可以显示该功能。

方式2：自定义分享按钮

 <button open-type='share'>分享</button>

一、介绍

微信小程序的分享功能可以分享页面给朋友或群聊，但是不能分享到朋友圈，需要分享朋友圈的话，可以在小程序内设计一个分享页面，利用小程序提供的canvas把小程序码绘制到分享图里保存到本地分享到朋友圈。

小程序调起分享分两种方式：
1.通过页面右上方自带的分享功能
2.页面内自定义分享：通过给button组件设置属性 open-type="share"

最新的微信开发者工具新建页面的时候，在页面js文件里会有onShareAppMessage: function () {} 事件，当button设置了open-type=“share” 属性后，点击 button 会调用该事件，看下官方给的该事件的文档：
在这里插入图片描述

二、demo示例

效果图：

在这里插入图片描述

代码：

原生微信小程序实现自定义分享：

1.wxml代码

<view class="item">
    <view class="content">
        <view class="text">两种方式实现分享功能：</view>
        <view class="text">方式一：小程序右上角的分享功能（...）</view>
        <view class="text">方式二：自定义分享按钮</view>
    </view>
    <view class="footerShare">
        <button class="shareBtn" data-index="1" style="width:600rpx" open-type="share"