当前位置:网站首页>uniapp 微信小程序分享、分享朋友圈功能
uniapp 微信小程序分享、分享朋友圈功能
2022-07-19 05:11:00 【Amnesia�】
页内自定义分享按钮
当页面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中引入
页面内直接这样写就好啦
<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
<u-icon name="zhuanfa"></u-icon>分享
<button>
效果如下:
注意:
注意:分享朋友圈和微信好友函数和 onLoad 等生命周期函数同级
边栏推荐
猜你喜欢
块级元素 block 内联元素 inline 内联块级元素inline-block 以及相互转换
[JS] shallow copy and deep copy
命令行反编译重打包
浅谈微信支付风控
10C Polkadot substrate: add pallet to runtime
10I Polkadot substrate: connect local parallel chains
Golang:容易误解的一些操作
The difference between get and post and why get is faster than post
margin 合并问题总结
静态库.a文件和.framework文件
随机推荐
get post 区别 以及get 为啥比post要快
What is online payment?
9 values of payment account system (account sharing interface)
聚合支付的优势
三方支付公司有哪些?
技术文章汇总
What is online banking payment
H5页面导出成pdf文件
100 JD navigation bar slot usage flexible layout (display: flex;)
10C Polkadot substrate: add pallet to runtime
10q Polkadot substrate: use map to store values
说说 Redis 缓存删除策略
Summary of Alibaba cloud technology points
Generate crud restful API by configuring zero code without programming
Object of ES6 Difference between defineproperty and proxy
crudapi增删改查接口零代码产品成功案例之商会联盟卡项目
Payment products and their usage scenarios
ASP. Net <% >% <% <% <% <% <% <% <
哈希桶的应用
JS中 绑定事件总结 以及注意事项