uni-app 微信小程序分享功能河北银丹互联网科技有限公司

官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage河北银丹互联网科技有限公司

方式1:小程序右上角原生菜单自带的分享按钮河北银丹互联网科技有限公司


3e2262cb64ba128b87c750dda17857b7.jpeg


方式2:或者是在页面中放置的分享按钮 <button>河北银丹互联网科技有限公司
<button class="separate-fl" plain="true" data-name="shareBtn" open-河北银丹互联网科技有限公司type="share">
<text class="icon-fenxiang iconfont"></text>
<text class="separate-text">分享</text>
</button>



这两种分享都会触发 onShareAppMessage 函数,在js 中定义该函数,设置页面分享的信息,注意:该函数和 onLoad 等生命周期函数同级


效果图如下:


分享到微信朋友圈功能
需要先在 onLoad 生命周期函数中调用 wx.showShareMenu 才能显示分享按钮





onLoad(){

//设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
wx.showShareMenu({
withShareTicket:true,
menus:["shareAppMessage","shareTimeline"]
})
},

//发送给朋友
onShareAppMessage(res) {
return {
title: this.goods.name,
path: `/pages/product/product?id=${this.goods.id}`
}
},
//分享到朋友圈
onShareTimeline(res) {
return {
title: '',
type: 0,
query: 0,
summary: "",
imageUrl: ""
}
},

注意事项
分享给朋友圈功能是2020年7月份新增的功能,目前仅支持安卓,IOS不支持
目前是内测阶段,部分功能还是有问题的,例如分享到朋友圈功能,其中的query参数,这个参数在onLoad中是获取不到的,也就是说从此页面分享出去的,其他人进入此页面是拿不到分享者的信息的。这样就不能做分享者与用户之间的关联了
————————————————
版权声明:本文为CSDN博主「m0_61073617」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_61073617/article/details/122959278

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app提供了内置的微信分享API,可以通过调用相关方法来实现微信小程序分享功能。首先,在onLoad方法中使用wx.showShareMenu方法,设置menus将发送给朋友和分享到朋友圈两个按钮都可以点击。具体代码如下: ```javascript onLoad() { wx.showShareMenu({ withShareTicket: true, menus: \["shareAppMessage", "shareTimeline"\] }) } ``` 接下来,需要分别编写发送给朋友和分享到朋友圈的方法。这两个方法应该与data和methods等同级,不要写到methods里面。具体代码如下: ```javascript onShareAppMessage(res) { if (res.from === 'button') { console.log(res.target) } return { title: 'title', path: '/pages/hfdt/gztjh', mpId: 'wx6bf107b87c455b99' } }, onShareTimeline(res) { return { title: '胶南街道召开“红帆支部”观摩学习暨工作推进会', type: 0, summary: "" } } ``` 在onShareAppMessage方法中,可以设置分享的标题、路径和微信小程序AppId。在onShareTimeline方法中,可以设置分享到朋友圈的标题和类型等信息。通过以上步骤,就可以实现uni-app微信小程序分享功能。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [uniapp 微信分享](https://blog.csdn.net/lxgyydsgod/article/details/126234984)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [uniapp微信小程序使用分享功能](https://blog.csdn.net/qq_43080548/article/details/125619531)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值