微信小程序 避免重复自定义跳转类型和样式按钮组件

小程序终于可以支持自定义组件了。毕业党写一个实用的按钮组件，望指教

按照官方指导，先创建如下目录：

.json文件：

{
  "component":true
}

.js文件：

// component/mynavigate.js
Component({
  properties: {
    title: {                  //按钮文字
      type: String
    },
    url: {                  //跳转位置
      type: String
    },
    kind:{                     //跳转类型
      type:String
    },
    Mclass:{                   //按钮样式 
      type:String
    }
  },
  data: {
    disabled: false
  },
  methods: {
    _gonavigator: function () { 
      var that = this
      if (that.data.disabled)
        return;
      this.setData({ disabled: true })      //防止重复点击
      switch(that.data.kind)
      {
        case "redirect":
        wx.redirectTo({
          url: this.data.url,
       })
            break;
        case "navigate": 
        wx.navigateTo({
          url: this.data.url,
          complete: function () {               
            setTimeout(function () {
              that.setData({ disabled: false })
            }, 3000);}})
          break;
      }

    }
  }
})

.wxml文件：

{{title}}

.wxss文件：

/* component/mynavigate.wxss */
.diybtn{
  width:100%;
  height:100rpx;
  background: #1aad19;
  color:white;
  font-size:40rpx;
  text-align: center;
  line-height: 100rpx;
}
.cir{
  border-radius: 100rpx;
}
.black{
  background:#353535;
}
.long-cir{
  width: 94%;
  border-radius: 100rpx;
}

以上组件代码完毕，接下来就是在需要它的页面上引用了。

在引用的.json文件里：

{
  "usingComponents":{
    "自己取名字":"/component/navigate/navigate"
  }
}

在引用的.wxml文件里：

<自己去的组件名 title="领取代金券" Mclass="diybtn black long-cir" url="/pages/redeem/index" kind="navigate" />

不错，就这么一句。代码看着清爽多了。

在引用的.wxss文件里：

自己取的组件名{                      // 这里相当于在组件外面的一个view
display:flex;
width:100%;
box-sizing:border-box;
margin-top:10rpx;
justify-content: center;
}

这是效果

用起来很方便，组件内的样式在组件的wxss里改，换个class名就好了

不知道为什么会有这个报错，请各位留言指点

转载于:https://juejin.im/post/5a013319f265da43310d39b1