页内自定义分享按钮
当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。
如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。
uniapp 自定义分享单页面朋友
<button class="fenxiang rounded" open-type="share">分享</button>
export default {
onShareAppMessage(res) {
if (res.from === 'button') {
// 来自页面内分享按钮
console.log(res.target);
}
return {
title: '棱接龙',//标题
path: '/page/index/index',//可以指定动态路径
imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg',//分享图
desc: '描述'
};
}
}
uniapp 单页面分享朋友圈 页面右上角胶囊“…”分享事件
// 分享到朋友圈
onShareTimeline() {
return {
title: '棱接龙',
path: '/pages/index/index',
imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
};
},
1)使用默认页面右上角胶囊“…”分享事件
Page({
onShareAppMessage: function (res) {
return {
title: '这是默认转发',
path: '/pages/index/index?id=123',
imageUrl: '****.png'//这个是分享的图片
}
}
})
2)当页面上存在自定义“分享”按钮
<!--index.wxml页面-->
<button class="share_icon" open-type = "share">
自定义分享按钮
</button>
/*index.js*/
Page({
onShareAppMessage: function (res) {
let title,imageUrl;
if (res.from === 'button') {
// 来自页面内转发按钮
title= ‘这个是页面自定义的分享事件~’;
imageUrl='***.png';
}
if(res.from ==='menu'){
title= ‘这个是页面右上角的分享事件~’;
imageUrl='***.png';
}
return {
title: title,
imageUrl: imageUrl,//这个是分享的图片
path: '/page/user?id=123',
}
}
})
3)当页面上存在多个自定义分享按钮
<button open-type='share' id="share1">这个第一个分享按钮</button>
<button open-type='share' id="share2">这个第一个分享按钮</button>
/*index.js*/
Page({
onShareAppMessage: function (res) {
let title,imageUrl;
console.log(res.target);
if (res.from === 'button' && res.target.id == 'share1') {
title= ‘这个是页面自定义分享按钮share1的分享事件~’;
imageUrl='***.png';
}
if (res.from === 'button' && res.target.id == 'share2') {
title= ‘这个是页面自定义分享按钮share2的分享事件~’;
imageUrl='***.png';
}
if(res.from ==='menu'){
title= ‘这个是页面右上角的分享事件~’;
imageUrl='***.png';
}
return {
title: title,
imageUrl: imageUrl,//这个是分享的图片
path: '/page/user?id=123',
}
}
})
页面右上角“…”分享行为
uni.showShareMenu
小程序的原生菜单中显示分享按钮
uni.hideShareMenu
小程序的原生菜单中隐藏分享按钮