uniapp小程序分享uni.share给好友-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序分享uni.share给好友。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

用uniapp写这个功能的时候最重要的点是：要把uni.share写在一个button按钮上，否则不生效。

分享给好友（示例图片）

uni.share,uniapp小程序,uni-app,小程序,javascript

代码实现

html代码

<view class="content">
	<image @click="share" class="rightimg" src="" mode="widthFix">
	</image>
	<view class="shuzi"></view>
	<button class="button" open-type="share" @click="shareFriends">分享</button>
</view>

js代码

shareFriends() {
	uni.share({
		provider: 'weixin', //分享服务提供商（即weixin|qq|sinaweibo）
		scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
		type: 5,
		title: '分享标题',
		summary: "分享描述",
		href: 'www.baidu.com', //分享跳转地址
		imageUrl: '../static/lovehot.png', //分享图片路径(必须是线上可访问图片)
		miniProgram: {
		id: 'gh_c6a0acadf951 ',
		path: 'pages/index/index',
		type: 0,
		webUrl: 'http://uniapp.dcloud.io'
	},
	success: function(res) {
			// console.log("success:" + JSON.stringify(res));
	},
	fail: function(err) {
			// console.log("fail:" + JSON.stringify(err));
	}
})
},

css代码文章来源地址https://www.toymoban.com/news/detail-540623.html

.content {
	font-size: 20rpx;
	position: relative;
	.shuzi {
		width: 100%;
		height: 50rpx;
	}
	.rightimg {
		width: 50rpx;			//小图标
		height: 50rpx;
		margin-top: 50rpx;
	}
	.button {
		background: rgba(0, 0, 0, 0);	//按钮 //背景颜色透明
		font-size: 20rpx;
		position: absolute;
		color: #ffffff;
		left: -50rpx;
		top: 55rpx;
		width: 140rpx;
		height: 100rpx;
		line-height: 130rpx;
	}
	button::after {
		border: none;			//取消按钮边框
	}
}