微信小程序自定义组件的使用

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

微信小程序项目越写越大，页面也越来越多，所以将相同作用的模块写成组件是非常必要也方便开发维护的事。

比如，一个弹出框写起来很简单，但是每个页面都需要用一个弹出框，如果每个页面都写一个弹出框的话，这就很麻烦，而且没有意义，所以，就弹出框写成组件，就是一个非常好的选择。下面就以弹出框来举例，了解一下微信小程序的组件系统。

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

 项目目录

 json文件：

{
  "component": true
}

 wxml文件：

<view wx:if="{{show}}" class='iosTip-mask iosTip-animate-fade-in'>
  <view class='iosTip-dialog'>
    <view class='iosTip-dialog-box'>
      <view class='iosTip-close' bindtap='close'></view>
      <view class='iosTip-title'>特别说明</view>
      <view class='iosTip-con'>受《Apple Developer Program 许可协议》《App Store 审核指南》 等终端设备系统、应用程序商店、市场等的协议规范的影响，自2018年8月17日起，小程序内苹果（Apple）手机用户将暂不支持直接购买。</view>
      <button open-type='contact' class="service-button" session-from="{{3}}">
        <view class='iosTip-bottom'>联系在线客服获得更多帮助</view>
      </button>
    </view>
  </view>
</view>

 js文件：

// component/iosTip/iosTip.js

Component({
  
  /**
   * 组件的初始数据
   */
  data: {
    show: true
  },
  /**
   * 组件的方法列表
   */
  methods: {
    close: function() {
      var myShow = {
        myShow: false
      }
      this.triggerEvent('myevent', myShow) //myevent自定义名称事件，父组件中使用
    }
  }

})

wxss文件：

.iosTip-mask {
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.iosTip-animate-fade-in {
  -webkit-animation: fadeIn ease 0.3s forwards;
  animation: fadeIn ease 0.3s forwards;
}

.iosTip-dialog {
  position: absolute;
  width: 80%;
  max-width: 300px;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.3);
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  padding: 12rpx;
}

.iosTip-dialog-box {
  background-color: #fff;
  width: 100%;
  height: auto;
  border-radius: 8px;
  position: relative;
}

.iosTip-close {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDQzMzYzKSAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxOC45NDRweCIgaGVpZ2h0PSIxOC45ODZweCIgdmlld0JveD0iMCAwIDE4Ljk0NCAxOC45ODYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4Ljk0NCAxOC45ODYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNDQ0NDQ0MiIGQ9Ik0xOC4wNTUsMTguMDk2Yy0xLjE4OCwxLjE4OC0zLjExMSwxLjE4OC00LjI5OCwwbC00LjI5OC00LjMwMg0KCWwtNC4yOTYsNC4zMDJjLTEuMTg4LDEuMTg4LTMuMTExLDEuMTg4LTQuMjk4LDBjLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDJsNC4yOTgtNC4zMDFMMC44NjUsNS4xOTINCgljLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDFjMS4xODctMS4xODgsMy4xMS0xLjE4OCw0LjI5OCwwbDQuMjk2LDQuMzAxbDQuMjk4LTQuMzAxYzEuMTg3LTEuMTg4LDMuMTEtMS4xODgsNC4yOTgsMA0KCWMxLjE4NiwxLjE4OCwxLjE4NiwzLjExMywwLDQuMzAxbC00LjI5OCw0LjMwMWw0LjI5OCw0LjMwMUMxOS4yNCwxNC45ODIsMTkuMjQsMTYuOTA4LDE4LjA1NSwxOC4wOTZ6Ii8+DQo8L3N2Zz4NCg==");
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 12rpx;
  top: 12rpx;
  background-size: 20rpx;
  background-repeat: no-repeat;
  background-position: center;
}
.iosTip-title{
  font-weight: bold;
  padding: 60rpx 0 20rpx;
  font-size: 40rpx;
}
.iosTip-con{
  font-size: 26rpx;
  color: #888888;
  line-height: 48rpx;
  padding: 40rpx;
  text-align: left;
}
.iosTip-bottom{
  color: #62759c;
  font-size: 24rpx;
  margin-top: 80rpx;
  padding-bottom: 70rpx;
}
.service-button{
  background: white;
  margin: 0;
  padding: 0;
}

 以上代码就定义了一个完整的组件，下面需要在页面中去使用它

页面index的json文件需要引用组件：

{
  "usingComponents": {
    "iosTip": "/components/iosTip/iosTip"
  }
}

页面index的wxml文件使用组件：

<iosTip bind:myevent="onGetShow" wx:if="{{IsIosShow}}" />

页面index的js文件书写逻辑：

 onGetShow: function (e) {
    console.log(e.detail.myShow)
    this.setData({
      IsIosShow: e.detail.myShow
    })
  },

这样，一个完整的组件就写好了，每个页面都可以引用弹出框了

微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/