[toc]

1、自定义组件

类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

组件可以理解为一个页面,不过与普通组件的区别在于,它需要向其它引用方提供引用。

2、创建自定义组件页

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成

2.1 创建文件夹components

项目名称右边,或者右键创建文件夹。

2.2 创建页面

选中components右键,选择新建Component:

image.png

输入创建页面名称 myHeader,创建结构如下:
image.png

3、编写自定义组件

编写一个轮播图,进行提供给其它引用。

3.1 编写组件框架

myHeader.wxml

<!--components/myHeader.wxml-->
<view class="sw">{{comData}}</view>
<swiper indicator-dots="true" autoplay="true" circular="true">
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
</swiper>

3.2 编写组件使用的属性

myHeader.js

// components/myHeader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
	comData:"MY COMPONENTS"
  },

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

  }
})

3.3 编写自定义组件样式

myHeader.wxss

/* components/myHeader.wxss */
.sw{
  color: orange;
}

3.4 申明我是组件

json配置文件中,申明我是组件,可以供其它地方调用
myHeader.json

{
  "component": true,
  "usingComponents": {}
}

4、引用自定义组件

引用页面为demo页,

4.1 引用页面

定义自定义组件页面,并起别名为 my-header
demo.json

{
  "usingComponents": {
    "my-header":"/components/myHeader/myHeader"
  }
}

4.2 使用别名

<!--pages/demo/demo.wxml-->
<my-header></my-header>

效果如下图:
image.png

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。