讲真的，官网文档这方面写的让我很难下手

1.目标

一个搜索框组件

2.呈现效果

捕获.PNG

3.步骤

1）建立文件夹component文件夹，专门放组件

2）在component下建立一个名为MySearch的文件夹

2.PNG

3）对着MySearch文件夹右键，选择新建->Component,会自动生成相关文件

自动生成

4）编写样式,很简单

1.mysearch.wxml

<view class='my-search'>
  <input bindinput="search" type='text' confirm-type='search' class='search' placeholder="{{inputText}}"></input>
</view>

2.mysearch.wxss

.my-search {
  position: fixed;
  top: 0;
  width: 100%;
}
.search {
  border-radius: 100rpx;
  height: 75rpx;
  background: #fff;
  border: 1px solid #d4d4d4;
  margin-bottom: 50rpx;
  font-size: 35rpx;
  padding-left: 90rpx;
}
.search::before {
  content: url(https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/search.png);
  position: absolute;
  left: 20rpx;
  top: 20rpx;
}

5）配置文件

1.mysearch.json 把 component设为true，默认就是true

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

2.mysearch.js 先放代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // placeholer文字
    inputText: {
      type: String,
      value: "请输入......"
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    search: function(value){
      this.triggerEvent("search",value)
    }
  }
})

下面解读代码 1.properties 就是你需要父组件传给这个组件的一些值，比如搜索中的placeholder文字

image.png

2.method 使用的方法，可以内部使用，或者给外部使用的方法

比如搜索事件需要外部调用，所以使用triggerEvent方法来将一些值传到外部，如下图，

自定义组件事件

代码里将input中输入的值，放到事件detail对象中传到外部

输入信息

信息

5.组件点击页面带参跳转

问题：开发的时候遇到了一个问题，当我点击组件，然后向详情页navigateTo的时候，不知道怎么获取当前组件的参数

问题

解决：

通过传入配置再组件里的properties即可，在组件的方法里使用this.properties获取到当前点击组件的properties参数，里面就有当前传入组件的参数，再将其放入自定义触发事件里传到外部即可。

goToDetails: function() {
   this.triggerEvent("goToDetails", this.properties)
}

点击后获取的参数

4.参考资料

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
项目代码：https://github.com/klren0312/recipes_wechat

微信小程序组件开发