微信小程序> 小程序分享功能-小程序生成分享链接-微信小程序复制链接

小程序分享功能-小程序生成分享链接-微信小程序复制链接

浏览量:1570 时间: 来源:前*端*之*路

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/view

3.然后是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.完美结束,如果还需要其他的功能,可以在这个基础上进行修改!

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎