之前项目中没有用到分享功能，今天用到了，查了不少资料，算是搞的比较明白，今天分享给大家，希望对大家有所帮助，闲话不说，先上效果图：
点击分享按钮，会把内容分享出去，效果图如下：
点击关闭分享按钮 下面的分享按钮会隐藏 点击右上角自带的分享按钮 会有如下效果：
下面直接上代码，先是wxml:
view class="view" image class="cover-9" src="{{img}}" bindtap="img"/image view class="window-1" button type="default" id="open" bindtap="showShareMenu"开启分享/button button type="warn" id="close" bindtap="hideShareMenu"关闭分享/button /view button type="primary" open-type="share" data-name="pageShare" id="share" wx:if="{{show}}"点击分享/button/view然后是js:
let app = 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); } } }})最后是wxss:
page{ height: 100%;}.view{ width: 100%; height: 100%;}.window-1{ display: flex; flex-direction: row; margin: 20rpx 0;}.cover-9{ width: 688rpx; height: 75%; margin: 0 30rpx; border:2rpx solid; border-radius:5px; }button{ margin: 0 10rpx; width: 100%;}#share{ width: 730rpx;}完美结束，如果还需要其他的功能，可以在这个基础上进行修改！
