小程序分享自定义（页面右上角自带分享 + button按钮定义分享）

小程序分享自定义（页面右上角自带分享 + button按钮定义分享）

一、小程序分享只有2种方式：（其他方法无用）

1、点击小程序页面右上角的…按钮

2、点击设置 open-type="share"的button组件

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

二、小程序分享内容可以自定义

在组件文件里有函数 onShareAppMessage(){},这一函数返回的对象就是自定义的内容，如果注释该函数，则页面分享无法使用；

如果onShareAppMessage不返回自定义的内容对象，分享时默认分享卡片title为空，卡片图片为当前页面截图，路径path为当前页面路径；

onShareAppMessage自定义内容对象参数：

onShareAppMessage(obj){
    return{
        title:'分享卡片标题',
        imageUrl:'分享卡片图片路径',
        path:'点击分享卡片进入的小程序的页面路径' //例如点击商详里面的分享，但是该路径填写的是首页路径，那分享卡片发出去后，点击该分享卡片，进入的是小程序的首页
    }
}
//title：可以定义分享卡片上显示的字符串，最高28个汉字，超出部分会被...代替

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

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

三、判断小程序分享来源（页面分享按钮点击？|| 哪个点击哪个分享button组件）

onShareAppMessage的参数对象obj，有一属性from，这一属性表明了是哪儿触发分享

1、from如果是button,说明是点击设置 了open-type="share"的button组件的分享

2、from如果是menu,说明是点击页面右上角的分享按钮

3、以上2种只能判断是来源于button组件还是页面自带分享按钮，如果页面有多个button组件分享，需要根据不同button组件来确定分享内容；此时还有参数对象还有一属性target,是一对象包含id,dataset:{},offsetLeft,offsetTop等属性；我们可以通过给button组件设置不同的id,或者不同的自定义属性、属性值来区分各个button组件，以便定制各分享内容；

//自定义id的按钮
<button open-type="share" id="s1">
    分享
 </button>
<button open-type="share" id="s2">
    分享
 </button>
//自定义属性的按钮
<button open-type="share" data-only="s1" data-s1="s1">
    分享
 </button>
<button open-type="share" data-only="s2" data-s2="s2">
    分享
 </button>

4、如果是页面分享按钮，from是menu,其target属性为undefined。

onShareAppMessage(obj){
    let {from,target}=obj
    let shareObj={
        title:"",
        imageUrl:"",
        path:'',
    }
    if(from=='menu'){//来自
        shareObj.title='menu'
    }else if(from=='button'){
        shareObj.title='button'
        let {id,dataset}=target
        if(id=='s1'){
             // ...
        }
        if(id=='s2'){
           // ...
        }
        let {only,s1,s2}=dataset
        if(only=='s1'){
            // ...
        }
         if(only=='s2'){
            // ...
        }
        if(s1){
            // ...
        }
        if(s2){
            // ...
        }
    }
    return shareObj
}