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

分享给好友(示例图片)

分享界面

代码实现

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代码

.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;			//取消按钮边框
	}
}				
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐