01 微信小程序创建组件和使用组件

01 创建组件

遇见的困难
图标显示不出来，是因为你没有在组件的css中引入，所以显示不出来。
我一直以为是一个坑。结果是自己没有整清楚

01==》在page的同级目录下，创建一个文件夹，命名为components文件夹,这个文件夹是用来放组件的哈。

02==》然后单击这个文件夹，选择创建一个目录(如topheader)。topheader在components文件夹下。

03===》创建好了目录（topheader），在点击这个（topheader）这个文件夹。创建【page】

02如何引入组件

在创建好的组件中，有一个XXX.json文件。在这个文件中添加如下

XXX.json
{
    "usingComponents": {},
    "component": true //这一组的四个文件会被当做一个组件哈。
    //说明这是一个组件哈
}

循环数据，动态的class直接 class="{{item}}"这样就行哈，不需要写冒号
XXX.wxml
<view class="header-top">
    <block wx:for="{{paramAtoListIocn}}" :key="index">
        <text style='color:greenyellow;font-size:40rpx;' class=" iconfont  ali-size {{item}}"></text>
    </block>
</view>

XXX.wcss

@import "../../styles/iconfont.wxss";
//引入矢量图标库。否者图标不能够现实出来哈。

.header-top {
    display: flex;
    justify-content: flex-end;
    padding: auto 30rpx;
}

.ali-size {
    margin-left: 20rpx;
}

XXX.js
//注意在这个页面，原来的Page要替换成  Component哈，要注意这个
Component({
  data: {},
  
  //父传子的参数哈
  properties: {
    paramAtoListIocn: Array
  },

使用的界面。父组件中

XXXX.json引入组件
{
  "usingComponents": {
    "headertopicon": "/components/headertopicon/headertopicon",
  }
}

hmtl

<view class="top-header">
    <headertopicon paramAtoListIocn='{{paramAtoListIocn}}' />
</view>

js

  data: {
    paramAtoListIocn: ["icon-bianqian", "iconshexiangtou", "icon-setup"]
  },

css

.top-header {
    height: 300rpx;
    width: 100%;
    background: pink;
    padding: 20rpx;
}