和我一起学习微信小程序(十一)，自定义组件

可以看到首页和博客列表，包括标签列表页，其中文章的样式都是一模一样，而且顶部的banner也是一样的，那就可以自定义两个组件，避免代码重复啦。

新建compoents文件夹，再新建TopBanner和ArticleList两个文件夹，再创建两个同名的主键，如下：

TopBanner.wxml和TopBanner.wxss代码如下，非常简单，就是把之前的代码复制粘帖过来

<!--components/TopBanner/TopBanner.wxml-->
<view class="banner">
  <image src="https://www.shuanghei.com/images/web/bannersm.jpg" mode="aspectFit" />
  <view class="h1">一直在路上</view>
  <text class="h2">跟得上灵魂的身体，配得上身体的灵魂！</text>
</view>

.banner {
  height: 100%;
  position: relative;
}
.banner image {
  width: 100%;
  display: block;
  height: 194rpx;
}
.banner .h1,
.banner .h2 {
  color: #FFF;
  position: absolute;
  left: 60rpx;
  top: 30rpx;
}
.banner .h1 {
  font-size: 40rpx;
}
.banner .h2 {
  top: 90rpx;
  font-style: italic;
}

ArticleList的代码也是复制粘贴，我这里就不重复写wxml代码了，有一点需要注意。组件里的样式默认是不会引入全局样式的，但是ArticleList里需要用iconfont的图标，所以需要引入全局样式，代码很简单，如下：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    articleList:{
      type:Array,
      value:[]
    }
  },
  //引入全局样式
  options: {
    addGlobalClass: true
  },

然后在需要引用组件的页面里，修改一下json文件，键是组件的名字，值是组件的路径，以下以index页面为例，代码如下：

{
  "usingComponents": {
    "TopBanner": "/components/TopBanner/TopBanner",
    "ArticleList": "/components/ArticleList/ArticleList"
  }
}

wxml代码把原本的代码替换成组件，分别如下：

<TopBanner></TopBanner>
<ArticleList articleList="{{articleList}}"></ArticleList>

这样就是自定义组件啦。

第十二篇：和我一起学习微信小程序(十二)，博客列表页