微信小程序 - 分享及转发朋友圈

一、分享功能的实现

1、wxml 中需要写分享按钮的布局

<view class="right">
    <van-icon name="share-o"   class="vanicon" />
	<text>分享</text>
	<button open-type="share" class="share" size="mini">分</button>
</view>

注意：这里必须要有一个 button标签，且open-type 为share否则无法唤起用户转发弹窗

2、scss 中书写样式

.right {
		color: #999999;
		display: flex;
		align-items: center;
		position: relative;
	    .vanicon {
			margin-right: 4rpx;
			}
		.share {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			}
		}

二、分享功能自定义标题和路径

1、在对应页面的 js文件中的 onShareAppMessage() { }方法中 return 一个 Object

注意：具体的title和路径需要根据实际情况来定

 onShareAppMessage() {
return{
  title:this.data.detail.title,
  path:"/pages/newsDetail/newsDetail?id="+this.data.detail._id
}
  },

三、分享到朋友圈功能的实现

 1、onShareTimeline(){ }引入到对应页面的 js 中，且写在onLoad(options) {}方法的下面

Page({
  //页面的初始数据
  data: { 
  },
  //生命周期函数--监听页面加载
  onLoad(options) {
  },
  //用户点击右上角转发到朋友圈
  onShareTimeline(){
  }
})

注意：具体的使用方法和其他类型方法可以在微信小程序开发文档中查看