1.之前项目中没有用到分享功能,今天用到了,查了不少资料,算是搞的比较明白,今天分享给大家,希望对大家有所帮助,闲话不说,先上效果图:点击分享按钮,会把内容分享出去,效果图如下:
2.点击关闭分享按钮下面的分享按钮会隐藏点击右上角自带的分享按钮会有如下效果:下面直接上代码,先是wxml:
viewclass="view"imageclass="cover-9"src="{{img}}"bindtap="img"/imageviewclass="window-1"buttontype="default"id="open"bindtap="showShareMenu"开启分享/buttonbuttontype="warn"id="close"bindtap="hideShareMenu"关闭分享/button/viewbuttontype="primary"open-type="share"data-name="pageShare"id="share"wx:if="{{show}}"点击分享/button/view3.然后是js:
letapp=getApp();Page({data:{img:"../images/1.png",show:true},onLoad(){},showShareMenu(){wx.showShareMenu();this.setData({show:true})console.log("显示了当前页面的转发按钮");},//wx.hideShareMenu()关闭分享按钮此时再点击右上角的分享按钮会弹出当前页面未设置分享字样hideShareMenu(){wx.hideShareMenu();this.setData({show:false})console.log("隐藏了当前页面的转发按钮");},onShareAppMessage:(res)={if(res.from==='button'){console.log("来自页面内转发按钮");console.log(res.target);}else{console.log("来自右上角转发菜单")}return{title:'关老爷',path:'/pages/share/share?id=123',//这里的path是当前页面的path,必须是以/开头的完整路径,后面拼接的参数是分享页面需要的参数不然分享出去的页面可能会没有内容imageUrl:"../images/1.png",desc:'关公面前耍大刀',success:(res)={console.log("转发成功",res);console.log("成功了")},fail:(res)={console.log("转发失败",res);}}}})4.最后是wxss:
page{height:100%;}.view{width:100%;height:100%;}.window-1{display:flex;flex-direction:row;margin:20rpx0;}.cover-9{width:688rpx;height:75%;margin:030rpx;border:2rpxsolid;border-radius:5px;}button{margin:010rpx;width:100%;}#share{width:730rpx;}5.完美结束,如果还需要其他的功能,可以在这个基础上进行修改!













