评论

✨单页面多个按钮分享方法,onShareAppMessage()进阶用法,详细介绍

详细解析onShareAppMessage各种用法

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

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

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

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

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

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

解决方案开始:

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

这个需求相对简单,只需要将这个列表的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,超过了系统会直接跳出进行分享,如果对自己的接口反映速度有自信可以使用,不然分享的时候用户会感觉点了分享按钮卡顿。。。

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


最后一次编辑于  2023-05-26  
点赞 2
收藏
评论

1 个评论

登录 后发表内容