✨单页面多个按钮分享方法，onShareAppMessage()进阶用法，详细介绍
发布于 2 年前 作者 vjin 5149 次浏览 来自 分享

现在有这样一个需求: 如下图,

点击三个点分享: 将整个列表分享给好友.

点击按钮一: 将整个列表分享给好友.

点击按钮二: 将一行数据分享给好友.

点击按钮三: 将搜索出的结果分享给好友.

好,我们先静一静,缕一缕思路.

解决方案开始:

一、点击三个点分享：将整个列表分享给好友:

这个需求相对简单，只需要将这个列表的ID传分享出去，接收页面接受列表ID，把这个列表的所有数据列出来就行了，代码如下：

    /**
   * 用户点击右上角分享
   */
  onShareAppMessage(res) {
    return {
      title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
      imageUrl: this.data.setting.share_img,
      path: 'pages/share/index?user_id=' + getApp().globalData.user_id + '&id=' + id 
    }
  }

参数解释：

title：可以定义分享卡片上显示的字符串，最高28个汉字，超出部分会被...代替

imageUrl: 定义分享卡片上的分享图，不填则截取当前屏幕顶部750rpx*600rpx的区域当分享图。自定义分享图最佳尺寸比例是5：4，超出则会截取

path：定义点击分享卡片跳转的界面，不填则会跳转到首页，并不是当前分享页。可以填任意页面并带参数，path参数最高只支持2048个字符，超出则读取不了。

二、点击按钮一： 将整个列表分享给好友.

同步骤一,这里只需要设定一个button，并设定open-type="sahre"就可以了，效果和点击三个点再点分享效果一致。

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

三、点击按钮二: 将一行数据分享给好友.

因为分享的东西不一样，实现这个功能，就要考虑2个问题。第一：要判断用户是否点三个点menu进行的分享；第二：要判断用户是点的全列表分享按钮还是我们只分享一行数据的按钮；

（1）判断用户是否点击menu进行分享：

    /**
   * 用户点击右上角分享
   */
  onShareAppMessage(res) {
    if(res.from=="menu"){
      return {
        title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
        imageUrl: this.data.setting.share_img,
        path: 'pages/share/index?user_id=' + getApp().globalData.user_id + '&id=' + id 
      }
    }
    if(res.from=="button"){
      return {
          title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
          imageUrl: this.data.setting.share_img,
          path: 'pages/share/index?user_id=' + getApp().globalData.user_id +'&id=' + id 
      }
    }
  },

这里通过读取res.from判断，menu是点击三个点分享，button判断是通过点击按钮进行分享

（2）判断用户是点击那个按钮进行分享：

wxml代码：

   <button open-type="share">分享</button>
   <button open-type="share" id="single">分享一个联系人</button>

JS代码：

   /**
   * 用户点击右上角分享
   */
  onShareAppMessage(res) {
    if(res.from=="menu"){
      return {
        title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
        imageUrl: this.data.setting.share_img,
        path: 'pages/share/index?type=0&user_id=' + getApp().globalData.user_id + '&id=' + id 
      }
    }
    if(res.from=="button"){
      let type = res.target.id
      if(type=='single'){
        return {
          title: '您的好友向您分享了一个联系人: ' + this.data.data[this.data.tel_index].name,
          imageUrl: this.data.setting.share_img,
          path: 'pages/share/index?type=1&user_id=' + getApp().globalData.user_id + '&id=' + this.data.data[this.data.tel_index].id, 
        }
      }else{
        return {
          title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
          imageUrl: this.data.setting.share_img,
          path: 'pages/share/index?type=0&user_id=' + getApp().globalData.user_id +'&id=' + id 
        }
      }
    }
  },

这里通过读取res.target.id判断，用户是点击了哪个按钮，从而分享不同的参数。path里加了type参数，告诉分享界面我是那种模式分享，从而显示不同显示结果。

四、点击按钮三：将搜索出的结果分享给好友.

刚才说到了，path后面最多填2048个字符，如果搜索出来的结果多了，则没法全部分享。所以我们只告诉分享页我们分享的列表ID和搜索时填的参数。

   //本文用的是this.data.value传参，也可以使用
   
  //进行传参，通过读取
   let id = res.currentTarget.dataset.id
   let type = res.currentTarget.dataset.type
  //读取俩个参数的数据
   /**
   * 用户点击右上角分享
   */
  onShareAppMessage(res) {
    if(res.from=="menu"){
      return {
        title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
        imageUrl: this.data.setting.share_img,
        path: 'pages/share/index?type=0&user_id=' + getApp().globalData.user_id + '&id=' + id 
      }
    }
    if(res.from=="button"){
      let type = res.target.id
      if(type=='single'){
        return {
          title: '您的好友向您分享了一个联系人: ' + this.data.data[this.data.tel_index].name,
          imageUrl: this.data.setting.share_img,
          path: 'pages/share/index?type=1&user_id=' + getApp().globalData.user_id + '&id=' + this.data.data[this.data.tel_index].id, 
        }
      }else if(type=='search'){
        return {
          title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
          imageUrl: this.data.setting.share_img,
          path: 'pages/share/index?type=2&user_id=' + getApp().globalData.user_id + '&id=' + id + '&status=' + this.data.active + '&name=' + this.data.search_name + '&tel=' + this.data.search_tel
        }
      }else{
        return {
          title: '您的好友向您分享了一本通讯录: ' + this.data.setting.name,
          imageUrl: this.data.setting.share_img,
          path: 'pages/share/index?type=0&user_id=' + getApp().globalData.user_id +'&id=' + id 
        }
      }
    }
  },

五、聊一下在onShareAppMessage是否可以通过wx.request()来动态读取数据进行分享

//官方示例代码
Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 
    }
  }
})

可以使用promise中进行wx.request()进行动态读取数据进行分享，但是不可以超过3000ms,超过了系统会直接跳出进行分享，如果对自己的接口反映速度有自信可以使用，不然分享的时候用户会感觉点了分享按钮卡顿。。。

结尾：样例小程序二维码，自己做的一个免费好用的通讯录小程序

回到顶部