uniapp微信小程序开发过程中，需要实现联系客服的功能，这里我们使用微信自带的联系客服，需要使用button按钮的open-type，为了可以在多个地方使用，保持主页面代码的整洁，我们对这个功能进行封装，另外一个相似的功能是：uniapp微信小程序实现意见反馈封装

按钮封装

将button按钮自带的样式给去掉，避免影响主界面

<template>
	<button open-type="contact" class="button-style">
		<slot></slot>
	</button>
</template>

<script>
</script>

<style lang="scss">
	.button-style {
		background: none;
		/* 清除背景 */
		border: none;
		/* 清除所有边框 */
		padding: 0;
		/* 清除内边距 */
		margin: 0;
		/* 清除外边距 */
		color: inherit;
		/* 继承文字颜色 */
		text-align: left;
		/* 文字对齐方式 */
		box-shadow: none;
		/* 移除阴影 */
		line-height: normal;
		/* 设置正常行高 */
		font-size: 16px;
		/* 可调整字体大小 */
		outline: none;
		/* 移除焦点轮廓线 */
	}

	.button-style::after {
		border: none; //黑色边框去掉了
	}
</style>

使用

<contact>
	<div class="aboutBodyItem">
		<image class="icon" src="/static/my/icon4.png">
		</image>
		<text>联系客服</text>
	</div>
</contact>