uniapp实现分享按钮样式自定义

引言

uniapp提供的分享微信好友和朋友圈的操作是button按钮实现。 很多场景下，样式不能适应前端的需求。

原始的实现方案

//1.在template写入button组件
<button  open-type="share" class="shar-btn"></button>

//2.在script写入分享的逻辑代码
onShareAppMessage(res) {
      return {
            title: "欢迎来到JeecgFlow",
            imageUrl: "xxx",
            path: '/pages/index/index'
      }
},

上述方面就是你对样式没有要求的实现效果。

自定义样式的解决方案

上述是自定义的效果, 代码如下。

//1. template代码
<view class="share-block">
        <tui-icon name="share" color="#71b7ff" :size="24" ></tui-icon>
        <button  open-type="share" class="shar-btn"></button>
</view>

//2. style样式代码
.share-block {
	width: 80rpx;
	height: 80rpx;
	margin-right: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	.shar-btn{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}
}

//3. script代码
onShareAppMessage(res) {
      return {
            title: "欢迎来到JeecgFlow",
            imageUrl: "xxx",
            path: '/pages/index/index'
      }
},

核心逻辑，就是将button按钮透明度设置=0，并且使用相对布局，使得button按钮占父元素。 关于最新的实现效果，可以搜索微信公众号，JeecgFlow, 打开小程序即可看到。