小程序——自定义组件

image.png

<!-- footer.wxml -->
<footer class="support">
    <view class="firmSupport">由云企网络提供技术支持</view>
    <view class="contact">联系客服</view>
</footer>

<!-- footer.wxss -->
/* 技术支持 */
.support {
    width: 690rpx;
    margin: 0 auto;
    font-size: 22rpx;
    line-height: 34rpx;
    text-align: center;
    padding: 20rpx 0;
}
.support .firmSupport {
    color: #c2c2c2;
}
.support .contact {
    color: #ffb968;
    padding-bottom: 10rpx;
}

<!-- footer.js -->
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

<!-- footer.json -->
{
  "component": true,
  "usingComponents": {}
}

下面是需要把自定义组件引用到所需的页面

<!-- index.wxml -->
<!-- 技术支持 -->
<footer></footer>

<!-- index.json -->
"usingComponents": {
    "footer":"../../components/footer/footer"
  },