现在有这样一个需求: 如下图,
点击三个点分享: 将整个列表分享给好友.
点击按钮一: 将整个列表分享给好友.
点击按钮二: 将一行数据分享给好友.
点击按钮三: 将搜索出的结果分享给好友.
好,我们先静一静,缕一缕思路.
解决方案开始:
一、点击三个点分享：将整个列表分享给好友:
这个需求相对简单，只需要将这个列表的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,超过了系统会直接跳出进行分享，如果对自己的接口反映速度有自信可以使用，不然分享的时候用户会感觉点了分享按钮卡顿。。。
结尾：样例小程序二维码，自己做的一个免费好用的通讯录小程序
6666