如上图功能所示，点击搜索框，跳转到搜索页，输入搜索词，可以获取到相关信息并渲染，从设计上来讲，整个需求需要拆分为两个核心步骤即搜索框组件封装与模糊搜索，下面将从这两部分来讲。
搜索框组件
由于需要搜索框复用，所以需要封装一个搜索框组件，下面从组件属性，图标适配，控制跳转与输入，清空与搜索内容四个方面来拆解搜索框组件的封装
组件的属性
从功能上考虑组件需要一个文本提示属性，初始内容属性与读写控制属性，分别对应placeholder,value与readOnly
placeholder: { type: String, value: '请输入搜索内容', }, value: { type: String, value: '' }, readOnly: { type: Boolean, value: false } 复制代码
图标适配
为了使搜索图标的大小能够适配各种机型，所以在组件attached生命周期中通过wx.getSystemInfoSync().screenWidth获取当前机型的屏幕宽度，再进行一个比例的计算，得到适合当下的搜索图标大小，最后再通过getApp()设置到全局变量中。
let _screenWidth = wx.getSystemInfoSync().screenWidth; this.setData({ iconSize: Math.round(_screenWidth / 750 * 25) }); const app = getApp(); this.setData({ season:app.globalData.season }) 复制代码
控制跳转事件
通过设置组件的属性值，来对点击跳转进行可控。
// 组件内触发属性事件 _readOnly: function () { this.triggerEvent('readOnlyEle') } 复制代码
之后在应用页进行一个事件绑定即可
<search readOnly="true" bind:readOnlyEle="goSearch" /> 复制代码
其中在组件还需要只读属性，在作为装饰即点击跳转组件的时候将只读属性设置为false
输入，清空与搜索内容
输入内容需要将输入框内容设置子组件数据并将该数据通过triggerEvent进行组件传值，将数据传入父组件中
let _value = e.detail.value; this.setData({ value: _value }); this.triggerEvent('input', { value: _value }); 复制代码
在搜索完后想要再次搜索需要考虑将内容清空，所以在点击清空叉号后触发清空事件，将子组件和父组件的数据清空。
_searchClear: function (e) { this.setData({ value: '' }); this.triggerEvent('clear', {}); }, 复制代码
搜索在子组件通过传值方式触发父组件的搜索函数，将搜索内容解构出来并判断内容是否为空。
_searchConfirm: function (e) { let { value } = this.data; if (!value) return false this.triggerEvent('search', { value }); }, 复制代码
模糊搜索
小程序使用的是云开发，所以封装了一个搜云函数，核心的模糊搜索实现如下
let config = index != 1 ? { title: db.RegExp({ regexp: content,//miniprogram做为关键字进行匹配 options: 'i',//不区分大小写 }) } : { name: db.RegExp({ regexp: content,//miniprogram做为关键字进行匹配 options: 'i',//不区分大小写 }) } db.collection(types[index]).where(config).get().then((res) => { let { data } = res; if (data.length) result[types[index]] = data; resolve(recursion(content, result, types, index + 1)); }); 复制代码
将传入的参数通过对象的形式封装起来，并赋于regexp属性用来匹配结果，最后通过db.collection调用在库中匹配搜索即完成模糊搜索功能
