微信小程序重置按钮的样式

有时候需要通过微信小程序 button 设置 open type 来获取用户的信息。这时候就不能用 view 来实现，必须使用 button。

但是 button 默认带了样式，需要将默认样式清除掉。

可以在定义一个 reset_btn 的样式来重置 button 的样式。

代码示例

.reset_btn {
	margin:0;
	padding:0;
	border-radius:0;
	border:none;
	font-size:1em;
	background-color:transparent;
}

.reset_btn::after{
  border: none;
}

若外层有背景样式，可以将 button 的宽高设置百分百来完全覆盖。别忘了设置居中。

width: 100%;   
height: 100%;
display: flex;
justify-content: center;
align-items: center;

但实际测试这个 class 中的 width 不起左右，还是加在 inline style 中有效。

举例说明

例如，我要自定义小程序分享按钮的样式：

invite_btn 中定义了具体的样式，诸如设置的背景图、大小等。

<view class="invite_btn flex_all_center">
    <button class="reset_btn inner_btn" open-type="share" style="color: #fff; width: 650rpx;">
		邀请好友注册得积分
    </button>
</view>

终极解放方案

然而小程序按钮在部分华为手机和 iphone 8 以上依然有高度的问题。即便设置了 width height important 也不行。

在小程序官方论坛里找到一个终极解决方案，而且实现起来也简单，且代码结构更清晰。

思路是：

• 将按钮绝对定位到目标区域之上
  
• 同时设置按钮为完全透明
  .sky_btn { position: absolute; top: 0; opacity: 0; width: 100% !important; height: 100% !important; z-index: 999; }
  

注意在 button 中随便加段文本：

<view class="enter_info flex center v_center" wx:if="{{isLogin}}">
    完善资料
    <image src="/images/right.png"
        style="width: 9rpx; height: 18rpx;margin-left:9rpx;"></image>
    <button class="reset_btn sky_btn" open-type="getUserInfo"
        bindgetuserinfo="bindGetUserInfo" data-btn="edit">
        text
    </button>
</view>

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式