微信小程序原本确实不直接支持通过点击按钮将内容分享到朋友圈的功能，但微信在后续更新中逐步放开了部分限制，允许特定内容以小程序卡片的形式分享到朋友圈。然而，这一功能仍然需要满足一定的条件，并且需要开发者进行特定的配置。

分享到朋友圈步骤

以下是如何尝试实现微信小程序点击按钮分享到朋友圈的步骤（请注意，这些步骤基于微信小程序的当前规定，未来可能会有所变化）：

1. 确保小程序已开通分享到朋友圈的权限：
   • 这通常需要小程序已经通过微信官方的审核，并且符合分享到朋友圈的相关要求。
   • 开发者需要在微信公众平台上提交申请，并等待审核结果。
2. 更新小程序基础库：
   • 确保你的小程序基础库版本支持分享到朋友圈的功能。
3. 配置页面分享属性：
   • 在小程序的页面配置中，可以设置onShareAppMessage和onShareTimeline两个函数来处理分享事件。
   • onShareAppMessage用于处理分享给好友的逻辑，而onShareTimeline则用于处理分享到朋友圈的逻辑（如果支持的话）。
4. 实现分享到朋友圈的逻辑：
   • 由于微信小程序没有直接提供“分享到朋友圈”的按钮类型，你需要通过其他方式触发分享，比如自定义一个按钮，并在按钮的点击事件中调用wx.showShareMenu和wx.shareTimeline（如果可用）来显示分享菜单并尝试分享。
   • 然而，需要注意的是，wx.shareTimeline API 在很多情况下并不直接对开发者开放，而是由微信根据小程序的类别、内容质量、用户反馈等因素来决定是否允许使用。
5. 处理用户分享后的回调：
   • 如果微信允许你的小程序分享到朋友圈，并且用户成功分享了，你可以通过onShareTimelineSuccess和onShareTimelineCancel等回调来处理分享成功或取消的逻辑。
6. 提交审核并等待结果：
   • 在尝试实现分享到朋友圈的功能后，你需要将小程序提交给微信官方进行审核。
   • 审核通过后，你的小程序才可能具备分享到朋友圈的能力。
7. 注意用户体验和合规性：
   • 在实现分享功能时，务必考虑用户体验和合规性。
   • 不要滥用分享功能，避免给用户带来不必要的干扰或误导。
8. 关注微信官方文档和更新：
   • 由于微信小程序的功能和规定可能会随着时间推移而发生变化，建议你定期查看微信官方的文档和更新日志。

需要强调的是，由于微信小程序的分享功能受到微信官方的严格控制和审核，因此并不是所有小程序都能实现分享到朋友圈的功能。如果你的小程序没有通过相关的审核或不符合微信的要求，那么你可能无法直接使用这个功能。

另外，由于微信小程序的更新和变化较快，上述步骤可能需要根据最新的微信官方文档进行调整。因此，在实现这一功能时，请务必参考最新的微信开发者文档和指南。

open-type 有效值

值	说明	平台差异说明
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志	App、微信小程序、QQ小程序
share	触发用户转发	微信小程序、百度小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序
getUserInfo	获取用户信息，可以从@getuserinfo回调中获取到用户信息	微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序
contact	打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息	微信小程序、百度小程序、快手小程序、抖音小程序
getPhoneNumber	获取用户手机号，可以从@getphonenumber回调中获取到用户信息	微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序。App平台另见一键登陆
launchApp	小程序中打开APP，可以通过app-parameter属性设定向APP传的参数	微信小程序、QQ小程序、快手小程序、京东小程序
openSetting	打开授权设置页	微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序
chooseAvatar	获取用户头像，可以从@chooseavatar回调中获取到头像信息	微信小程序2.21.2版本+
agreePrivacyAuthorization	用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》	微信小程序2.33.0版本+
uploadDouyinVideo	发布抖音视频	抖音小程序2.65.0版本+
im	跳转到抖音IM客服	抖音小程序2.80.0版本+
getAuthorize	支持小程序授权	支付宝小程序
lifestyle	关注生活号	支付宝小程序
contactShare	分享到通讯录好友	支付宝小程序基础库1.11.0版本+
openGroupProfile	呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList	QQ小程序基础库1.4.7版本+
openGuildProfile	呼起频道页面，可以通过guild-id属性设定需要打开的频道ID	QQ小程序基础库1.46.8版本+
openPublicProfile	打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList	QQ小程序基础库1.12.0版本+
shareMessageToFriend	在自定义开放数据域组件中,向指定好友发起分享据	QQ小程序基础库1.17.0版本+
addFriend	添加好友， 对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权	QQ小程序
addColorSign	添加彩签，点击后添加状态有用户提示，无回调	QQ小程序基础库1.10.0版本+
addGroupApp	添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据	QQ小程序基础库1.16.0版本+
addToFavorites	收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法	QQ小程序基础库1.19.0版本+
chooseAddress	选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息	百度小程序3.160.3版本+
chooseInvoiceTitle	选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息	百度小程序3.160.3版本+
login	登录，可以从@login回调中确认是否登录成功	百度小程序3.230.1版本+
subscribe	订阅类模板消息，需要用户授权才可发送	百度小程序
favorite	触发用户收藏	快手小程序
watchLater	触发用户稍后再看	快手小程序
openProfile	触发打开用户主页	快手小程序

可视化设计支持分享按钮

按钮分享

默认按钮分享，拖动一个按钮组件进设计器，然后在自定义属性增加一个open-type="share"

自定义分享按钮

使用flex布局，先把布局造好，布局里包含图片、标题。然后图层容器类型改为button。生成的代码会强制转换类型。

同样自定义属性也加上

在自定义属性加个open-type="share"。

也可以自定义点击事件加上

生命周期

默认只需要在生命 周期里新建，找到用户点击右上角分享onShareAppMessage即可。里面的方法体支持空。

如果需要更复杂的页面参数 return 一个JSON格式的数据，支持title,path,图片等参数。

if (res.from === 'button') {  
      // 来自页面内转发按钮  
      console.log(res.target)  
    }  
    return {  
      title: '小程序标题', // 分享标题  
      path: '/page/user?id=123', // 分享路径  
      imageUrl: '/images/share.png', // 分享图标  
    }  

当然可能更复杂是，点击某些功能后 先弹窗，弹窗里再出现分享按钮。

生成代码如下

<template>
	<view class="container container329152">
		<button open-type="share" class="flex diygw-btn-default flex-wrap diygw-col-6 flex-direction-column items-center flex15-clz">
			<image src="/static/icon3_ax.png" class="image5-size diygw-image diygw-col-0 image5-clz" mode="widthFix"></image>
			<text class="diygw-text-line1 diygw-col-0 text3-clz"> 分享给朋友 </text>
		</button>
		<button open-type="share" class="diygw-col-24 btn-clz diygw-btn-default">分享到朋友圈</button>
		<view @touchmove.stop.prevent="" v-if="modal" class="diygw-modal bottom-modal" :class="modal" style="z-index: 1000000">
			<view class="diygw-dialog diygw-dialog-modal">
				<view>
					<view class="flex diygw-dialog-content">
						<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center">
							<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex50-clz">
								<view class="flex flex-wrap diygw-col-24 flex-direction-column flex59-clz">
									<view class="flex flex-wrap diygw-col-24">
										<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center">
											<image src="/static/wcym.png" class="image21-size diygw-image diygw-col-0 image21-clz" mode="widthFix"></image>
											<text class="diygw-text-line1 diygw-col-0 text42-clz"> 发起工单 </text>
										</view>
										<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center">
											<image src="/static/cb.png" class="image22-size diygw-image diygw-col-0 image22-clz" mode="widthFix"></image>
											<text class="diygw-text-line1 diygw-col-0 text43-clz"> 发起工单 </text>
										</view>
										<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center">
											<image src="/static/zxxjsbbf.png" class="image23-size diygw-image diygw-col-0 image23-clz" mode="widthFix"></image>
											<text class="diygw-text-line1 diygw-col-0 text44-clz"> 发起工单 </text>
										</view>
										<button open-type="share" class="flex diygw-btn-default flex-wrap diygw-col-6 flex-direction-column items-center">
											<image src="/static/icon3_ax.png" class="image25-size diygw-image diygw-col-0 image25-clz" mode="widthFix"></image>
											<text class="diygw-text-line1 diygw-col-0 text46-clz"> 分享给朋友 </text>
										</button>
									</view>
								</view>
							</view>
							<text @tap="navigateTo" data-type="closemodal" class="flex icon9 diygw-col-0 icon9-clz diy-icon-roundclose"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				modal: '',
				showGrids: false
			};
		},
		onShareAppMessage(e) {},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.flex15-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image5-clz {
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
	}
	.image5-size {
		height: 96rpx !important;
		width: 96rpx !important;
	}
	.text3-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.btn-clz {
		background-color: #07c160;
		padding-top: 20rpx;
		color: #fff;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		text-align: center;
		padding-right: 20rpx;
	}
	.modal-clz {
		z-index: 1000000;
	}
	.diygw-dialog-modal {
		background-color: rgba(255, 255, 255, 0);
	}
	.flex50-clz {
		border: 2rpx solid #f8f8f8;
		padding-top: 30rpx;
		border-bottom-left-radius: 20rpx;
		padding-left: 30rpx;
		padding-bottom: 50rpx;
		border-top-right-radius: 20rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		box-shadow: 0rpx 0rpx 40rpx rgba(56, 255, 106, 0.11);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 20rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 0rpx;
		padding-right: 30rpx;
	}
	.flex59-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image21-clz {
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
	}
	.image21-size {
		height: 80rpx !important;
		width: 80rpx !important;
	}
	.text42-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image22-clz {
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
	}
	.image22-size {
		height: 80rpx !important;
		width: 80rpx !important;
	}
	.text43-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image23-clz {
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
	}
	.image23-size {
		height: 80rpx !important;
		width: 80rpx !important;
	}
	.text44-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.image25-clz {
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
	}
	.image25-size {
		height: 80rpx !important;
		width: 80rpx !important;
	}
	.text46-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.icon9-clz {
		background-color: #fdc915;
		margin-left: 0rpx;
		border: 8rpx solid #787878;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		color: #ffffff;
		border-top-left-radius: 120rpx;
		margin-top: -40rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
	}
	.icon9 {
		font-size: 64rpx;
	}
	.container329152 {
	}
</style>