页内自定义分享按钮
当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。
如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。
官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
方式1:小程序右上角原生菜单自带的分享按钮
方式2:在页面中放置的分享按钮
实现如下:
创建一个share.js文件
export default {
data() {
return {
}
},
onLoad: function() {
wx.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"]
})
},
onShareAppMessage(res) {
let that = this;
let imageUrl = that.shareUrl || '';
if (res.from === 'button') {
//这块需要传参,不然链接地址进去获取不到数据
let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
return {
title: '商品分享~',
path: path,
imageUrl: imageUrl
};
}
if (res.from === 'menu') {
return {
title: '商通线上商城',
path: '/pages/tabBarPro/index/index',
imageUrl: imageUrl
};
}
},
// 分享到朋友圈
onShareTimeline() {
return {
title: '商通线上商城',
path: '/pages/index/index',
imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
};
},
methods: {
}
}
在main.js中引入
页面内直接这样写就好啦文章来源:https://www.toymoban.com/news/detail-595815.html
<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
<u-icon name="zhuanfa"></u-icon>分享
<button>
效果如下:
注意:
注意:分享朋友圈和微信好友函数和 onLoad 等生命周期函数同级
文章来源地址https://www.toymoban.com/news/detail-595815.html
到了这里,关于uniapp 微信小程序分享、分享朋友圈功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!