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

场景

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

代码

product.wxml

<view class="share-main" >
        <van-icon name="share-o" color="#FFFFFF" size="30rpx" />
        <button size="mini" plain="true" open-type="share">分享</button>
      </view>

这里还使用了van组件，也可以使用image组件，主要是显示分享图标。不用也可以。

注意：这里只能使用button，因为只有这个组件才会支持分享功能。

product.scss文件

.share-main{
        display: flex;
        flex-flow: column;
        padding: 15rpx 32rpx 15rpx 0rpx;
      }
      .share-main button{
        border: solid 0rpx #FFFFFF;
        color: #FFFFFF;
        font-size: 24rpx;
      }

.share-main button 是为了修改按钮的样式，因为默认的样式不好看。

product.ts文件

// 判断当前页面是否登录，如果已经登录就加载数据，如果没有登录，返回首页。
onLoad(e: any) {
    console.log('=====', e);
    var vtoken = wx.getStorageSync('Token')
    if(vtoken){
      this.getDetails(e);
    }else{
      wx.switchTab({
        url:"/pages/home/index"
      })
    }
  },

onShareAppMessage(res:any) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    // 配置分享的内容
    return {
      title: '分享的标题', // 分享的标题,可以是当前商品名称
      path: '/pages/centre/productDetails/index?pageType=share&code=' + this.data.productInfo.code, // 分享的路径（注意要与app.json中声明的路径一致）
      imageUrl: this.data.productInfo.path // 分享的图片（可选）
    };
  },

path里面所携带的参数就是为了onload里面this.getDetails(e)；方法请求使用。其实只要和列表跳转详情页面参数保持一致就可以了。