微信小程序-自定义组件

创建组件

1. 在根目录下创建文件夹：components
2. 在components下创建文件夹【文件夹名通常为组件名称】 例如：HdView
3. 创建组件 HdView

使用组件

•  在index.json中配置组件

{
  "usingComponents": {
    "HdView":"/components/HdView/HdView"
  }
}

• 在index.wxml中引入此组件即可

<HdView myHeader="这是header1"/>

<HdView myHeader="这是header2" />

<view class="header">
  <view class="container hdCon">
    <navigator open-type="switchTab" url="/pages/index/index" class="logo">
      <image src="/images/logo.png" mode="heightFix"></image>
    </navigator>

    <view class="kefu">
      <button class="btn" open-type="contact"> </button>
      <image src="/images/xiaoxi.png" mode="heightFix"></image>
    </view>

  </view>
</view>

<view class="banner">
  <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay interval="2000">
    <swiper-item>
      <image src="/images/banner1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/banner2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/banner3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

<scroll-view class="major" scroll-x>
  <view class="majorCon">
    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng1.png"></image>
      <view class="txt">平面设计</view>
    </navigator>

    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng2.png"></image>
      <view class="txt">室内设计</view>
    </navigator>

    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng3.png"></image>
      <view class="txt">UI设计</view>
    </navigator>

    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng4.png"></image>
      <view class="txt">影视后期</view>
    </navigator>

    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng5.png"></image>
      <view class="txt">WEB前端</view>
    </navigator>
  </view>
</scroll-view>


<view class="works">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">学员作品</view>
      <navigator class="more">更多></navigator>
    </view>

    <view class="wkMain">
      <navigator class="box">
        <image class="pic" src="/images/xszp1.jpg"></image>
        <view class="ceng">
          <view class="title">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp2.jpg"></image>
        <view class="ceng">
          <view class="title">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp3.jpg"></image>
        <view class="ceng">
          <view class="title">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp4.jpg"></image>
        <view class="ceng">
          <view class="title">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp5.jpg"></image>
        <view class="ceng">
          <view class="title">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp6.jpg"></image>
        <view class="ceng">
          <view class="title">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp7.jpg"></image>
        <view class="ceng">
          <view class="title">WEB前端作品</view>
          <view class="line"></view>
          <view class="des">WEB design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp8.jpg"></image>
        <view class="ceng">
          <view class="title">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

    </view>
  </view>
</view>

<view class="dynamic">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">行业动态</view>
      <navigator class="more">更多></navigator>
    </view>

    <view class="dyMain" wx:for="{{5}}">
      <navigator class="dyItem">
        <view class="pic">
          <image src="/images/xszp1.jpg"></image>
        </view>
        <view class="txt">
          <view class="title">
            这是title
          </view>
          <view class="info">
            作者：王京伟 <text space="ensp"> - </text>时间：2020-05-01
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>

<view class="footer">
<image mode="widthFix" src="/images/logo.png"></image>
<view class="text">- 高端实训品牌 -</view>
</view>