小程序自定义实现open-type

我最近写了一个小程序的组件库，也接到一个需求，是重构小程序的某些页面，比如以下这种列表，之前都是直接copy的，导致代码比较臃肿，占用有限的空间且不好维护

我把组件库写好后，准备直接使用时发现有用到分享和反馈这种小程序原生button才有的属性即：

open-type='feedback'
open-type='share'

本来准备直接复用以前的来着，但是看代码很乱，就想着把它的功能在组件中直接实现好了，开始想着把已有的逻辑贴进去再加个if的属性就可以，臃肿得很， 最终理性战胜了我，试试其他实现方式，以下是我的ui组件库效果：

试着点了以下最下面的那个 建议反馈，进入以下页面：

实现原理其实是在row上面盖了一层button，将背景色直为透明即可：

效果看完了，code如下：
组件应用：

<mx-text text="button row 可以设置原生的open-type"></mx-text>
<mx-row label="建议反馈" iconSrc="{{xxx}}" isButtonRow="{{true}}"  showBorder="{{true}}"></mx-row>
<mx-row label="邀请好友" iconSrc="{{xxx}}" isButtonRow="{{true}}" openType="share" showBorder="{{true}}" ></mx-row>
<mx-row label="在线客服" iconSrc="{{xxx}}" isButtonRow="{{true}}" openType="contact" showBorder="{{false}}" ></mx-row>

component wxml：

  <button wx:if="{{isButtonRow}}" open-type='{{openType}}'  class="row-btn"></button>

// 是否为行按钮
  isButtonRow:{
     type: Boolean,
     value: false
   },
   // 为button时, open-type 
   openType:{
     type: String,
     value: 'feedback'  //可选值有feedback、share、contact...
   },

component wxss：

.row-btn {
  position: absolute;
  top: 0;
  width: 100% !important;
  height: 91rpx;
  z-index: 100;
  border-radius: 0;
  border:none;
  /* background-color: #267afe; */
   background-color: transparent;
}
/* 防止出现原生button的边框样式 */
button::after{
  border: none;
}

就这样，精简好用，可配置性强。

其实在实现需求时很多人容易陷入功能误区，尤其是一些交互类和展示类的需求，因为是个100%宽度的button，我开始也是这么想的准备加个if，然后发现什么按钮字体也不对，布局也有问题，又得下面又长又臭一大堆，网上搜了一下有很多开发中提问，但是没有发现有合理方法来解决这个问题的 。 最终强迫自己思考有没有更加合理的实现方式，当我把按钮设为透明有效果时，我就知道这个方案是可行的。
同理，其他的也一样。

我是想说的是开发者不必陷入条条框框的循序渐进开发中， 当你陷入麻烦时，有时候从中间跳出来会发现有更好的选择。