简介

小程序组件其实很简单，其实我们用的view 、text 、lable 就是一个组件，只不过这些组件是小程序官方指定的，小程序的自定义组件一般使用场景为：有一段代码或者一个功能，经常在不同的页面使用，这就导致我们需要在不同的页面去写重复的代码，重复造轮子。
比如说好几个页面都会有列表，都需要搜索功能，哪我们就可以把搜索框做成组件，然后再需要的页面直接引入进去，就可以使用。

效果图

image.png

实战之定义组件

一、新建及存放位置

新建一个 components 文件夹，用于存放我们以后开发中的所用组件 如图：

image.png

在components文件夹中右键，选择"新建Component"；

二、相关配置

组件名称.json 配置

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

在test.josn文件中添加字段 component：true 这个字段表明这是一个组件，这个字段在新建的页面的json文件中是没有的，官方默认它为false，也就是非组件

组件名称.wxml

<!--搜索框-->
<view class="input_search_bar">
  <view class="input_search_bar_form">
    <!--点击之后，出现input框 -->
    <view class="input_search_bar_box">
      <icon class="order_icon_search_in_box" type="search" size="20"></icon>
      <input type="text" class="input_search_bar_input" maxlength="15" placeholder="{{holderText}}" value="{{inputVal}}"
        bindinput="inputTyping" />
      <!--输入款字数大于0，则显示清除按钮 -->
      <view class="order_icon_clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
        <icon type="clear" size="20"></icon>
      </view>
    </view>
  </view>
  <!--动态出现的“搜索”键 -->
  <view class="input_search_bar_cancel_btn" bindtap="searchBtn">搜索</view>
</view>

组件名称.wxss

/**搜索框**/
.input_search_bar {
  position: relative;
  padding-top: 15rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 740rpx;
}

.input_search_bar .input_search_bar_form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  flex: auto;
  border-radius: 15rpx;
  background: var(--viewBackgroundColor);
}

.input_search_bar .input_search_bar_form .input_search_bar_box {
  position: relative;
  padding-left: 45rpx;
  padding-right: 60rpx;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.input_search_bar .input_search_bar_form .input_search_bar_box .order_icon_search_in_box {
  position: absolute;
  left: 15rpx;
  top: 8rpx;
}

.input_search_bar .input_search_bar_form .input_search_bar_box .input_search_bar_input {
  height: 50rpx;
  line-height: 50rpx;
  font-size: 30rpx;
  padding-left: 25rpx;
}

.input_search_bar .input_search_bar_form .input_search_bar_box .order_icon_clear {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7rpx 8rpx;
}

.input_search_bar .input_search_bar_cancel_btn {
  margin-left: 12rpx;
  margin-top: 12rpx;
  line-height: 28rpx;
  color: var(--themeColor);
  white-space: nowrap;
  font-size: 30rpx;
}

组件名称.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    holderText: {
      type: String,
      value: "请输入内容"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    inputVal: ""
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clearInput: function () {
      this.setData({
        inputVal: "",
      });
      this.triggerEvent("searchVal", this.data.inputVal);
    },
    inputTyping: function (e) {
      this.setData({
        inputVal: e.detail.value
      });
    },
    searchBtn: function () {
      this.triggerEvent("searchVal", this.data.inputVal);
    }
  }
})

自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染

实战之调用组件

调用页面.json

{
  "usingComponents": {
    "InputSearch":"/components/InputSearch/InputSearch"
  },
  "navigationBarTitleText": "加工云-已发布订单"
}

调用页面.wxml

<view class="my_order_page">
  <InputSearch bindsearchVal="handleSearchVal" holderText="请输入订单名称"></InputSearch>
</view>

注意：bindsearchVal 去除掉bind，searchVal 和组件.js中的this.triggerEvent("searchVal")对应
调用页面.js

  /**
   * 查询按钮触发函数
   * @param {参数} e 
   */
  handleSearchVal(e) {
    getApp().preventActive(() => {
      const orderName = e.detail;
      this.setData({
        page: 1,
        orderName: orderName,
        contentList: []
      });
      this.orderList();
    })
  }

handelSearchVal(e)名称和调用页面.wxml 中的bindsearchVal=”handleSearchVal“ 对应，否则找不到触发函数

效果图

image.png