小程序：微信小程序完成分享好友及自定义分享朋友圈功能（完整版）

最新推荐文章于 2025-04-28 18:32:23 发布

jcat_李小黑

最新推荐文章于 2025-04-28 18:32:23 发布

阅读量1.2w

点赞数 8

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_43216105/article/details/108627037

版权

前言

以下代码使用了： vant-ui库；
主要完成了：

上拉框显示分享朋友圈按钮，点击分享朋友圈后，弹框展示图片，点击图片保存到本地；
上拉框显示分享好友按钮，分享当前页的小程序给好友；

微信小程序分享好友及分享朋友圈功能，功能很常见，记录下，方便今后查阅

一、上拉框显示分享按钮

1.1 wxml

<van-action-sheet bind:close="shareClose" bind:cancel="shareClose" cancel-text="取消" title="分享页面"
        show="{
    { showShare }}">
        <view class="shareBox">
            <button open-type="share">
                <van-icon name="friends" size="30" color="#07c160" />
                <view>
                    微信好友
                </view>
            </button>
            <button bind:tap="shareToPoster">
                <van-icon name="photo" size="30" color="#c79f5d" />
                <view>
                    朋友圈
                </view>
            </button>
        </view>
    </van-action-sheet>

1.2 js部分

Page({
   
  data: {
   
    showShare: false,
  },
  shareClose() {
   
    this.setData({
    showShare: false })
  },
})

1.3 事件代码解析

上拉弹框的控制为：showShare；
上拉弹框关闭事件：shareClose；

二、弹框展示获取的图片，点击图片保存到本地；

2.1 wxml

    <van-dialog closeOnClickOverlay use-slot bind:confirm="saveImage" theme="round-button" confirmButtonText="保存图片到相册"
        show="{
    { isShowShareDialog }}">
        <image wx:if="{
    {qrCodePath !== ''}}" src="{
    {qrCodePath}}" mode="widthFix" />

最低0.47元/天解锁文章