小程序分享功能

之前项目中没有用到分享功能，今天用到了，查了不少资料，算是搞的比较明白，今天分享给大家，希望对大家有所帮助，闲话不说，先上效果图：
在这里插入图片描述
点击分享按钮，会把内容分享出去，效果图如下：

在这里插入图片描述
点击关闭分享按钮下面的分享按钮会隐藏点击右上角自带的分享按钮会有如下效果：

下面直接上代码，先是wxml:

  <view class="view">
     <image class="cover-9" src="{{img}}" bindtap="img"></image>
        <view class="window-1">
            <button type="default"  bindtap="showShareMenu">开启分享</button>
            <button type="warn"  bindtap="hideShareMenu">关闭分享</button>
         </view>
      <button type="primary" open-type="share" data-name="pageShare"   wx:if="{{show}}">点击分享</button>
</view>

然后是js:

let app = getApp();
Page({
  data: {
    img: "../images/",
    show:true
  },
  onLoad() {

  },
  showShareMenu() {
    ();
    ({
      show: true
    })
    ("显示了当前页面的转发按钮");
  },
  // ()关闭分享按钮 此时再点击右上角的分享按钮 会弹出 当前页面未设置分享 字样
  hideShareMenu() {
    ();
    ({
      show: false
    })
    ("隐藏了当前页面的转发按钮");

  },
  onShareAppMessage: (res) => {
    if ( === 'button') {
      ("来自页面内转发按钮");
      ();
    }
    else {
      ("来自右上角转发菜单")
    }
    return {
      title: '关老爷',
      path: '/pages/share/share?id=123',//这里的path是当前页面的path，必须是以 / 开头的完整路径，后面拼接的参数 是分享页面需要的参数  不然分享出去的页面可能会没有内容
      imageUrl: "../images/",
      desc: '关公面前耍大刀',
      success: (res) => {
        ("转发成功", res);
        ("成功了")
      },
      fail: (res) => {
        ("转发失败", res);
      }
    }
  }
})

最后是wxss:

page{
  height: 100%;
}
.view{
  width: 100%;
  height: 100%;
}
.window-1{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
.cover-9{
  width: 688rpx;
  height: 75%;
  margin: 0 30rpx;
  border:2rpx solid;
  border-radius:5px;  
}
button{
  margin: 0 10rpx;
  width: 100%;
}
#share{
  width: 730rpx;
}

完美结束，如果还需要其他的功能，可以在这个基础上进行修改！

秒客网

小程序分享功能

相关文章