美食菜谱类小程序很是受到微信小程序开发的接待，，，，，由于小程序的用完即走，，，，，轻盈无需下载，，，，，随时可以在小程序中搜索不知道的菜谱，，，，，好比下厨房也开发了关于的美食菜谱小程序，，，，，那么关于美食菜谱了类小程序要怎样设计开发，，，，，首先我们先讲讲美食菜谱小程序中最主要的搜索组件。
。。。。

1组件结构

为组件设置一个容器，，，，，在容器中放置搜索图标、输入框、扫除文字按钮和搜索按钮。
。。。。

<view class='container'>
    <view class='input-wrapper'>
        <image class='search-icon' src="/'/img/search.png'></image>
        <input 
        placeholder='{{placeholder}}' 
        value='{{inputValue}}' 
        bindinput='handleInput' 
        bindconfirm='handleSearch'
        bindfocus='inputFocused'>
        </input>
        <view class='close-icon-wrapper' wx:if="{{showCloseIcon}}" bindtap='clearValue'>
        <image class='close-icon' src="/img/close.png' ></image>
        </view>
        <text bindtap='onTap'>搜索</text>
    </view>
</view>

2组件样式

container：高度 100 rpx，，，，，配景致 #eee，，，，，flex 结构。
。。。。

input-wrapper：高度 80 rpx，，，，，配景致 #fff，，，，，flex 结构，，，，，border-radius: 20rpx。
。。。。

search-icon：宽高 32 rpx。
。。。。

input：字体和光标颜色 #000，，，，，字体巨细 32 rpx。
。。。。

close-icon-wrapper：宽高 80 rpx，，，，，绝对定位。
。。。。

text：搜索按钮宽 110 rpx，，，，，高 65 rpx，，，，，绝对定位，，，，，左边框 2rpx solid #eee。
。。。。

.container {
    background: #eee;
    height: 100rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-wrapper {
    display: flex;
    align-items: center;
    height: 80rpx;
    width: 80%;
    background: #fff;
    border-radius: 20rpx;
}

.input-wrapper .search-icon {
    margin-left: 20rpx;
    width: 32rpx;
    height: 32rpx;
}

.input-wrapper input {
    margin-left: 10rpx;
    color: #000;
    font-size: 32rpx;
    caret-color: #000;
    width: 60%;
}

.input-wrapper .close-icon-wrapper{
    position: absolute;
    left: 480rpx;
    width: 80rpx;
    height: 80rpx;
    background:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-wrapper .close-icon {
    width: 42rpx;
    height: 42rpx;
}

.input-wrapper text {
    position: absolute;
    right: 80rpx;
    width: 110rpx;
    height: 65rpx;
    padding: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    border-left: 2rpx solid #eee;
}

3组件功效

1. 属性区分

组件的结构器中要注重区分 properties 和 data，，，，，properties 中写组件的对外属性，，，，，data 写组件的对内属性。
。。。。在本搜索组件中 placeholder 和 value 从页面传来，，，，，以是它们写在 properties 中，，，，，控制扫除按钮是否泛起的 showCloseIcon 要写在 data 中。
。。。。

properties: {
    placeholder: {
        type: String,
        value: '搜索' // 若是页面不传placeholder，，，，，显示“搜索”
    },
    inputValue: {
        type: String
    }
},
data: {
    showCloseIcon: false,
},

2.要领设置

事务流程

（1）光标不聚焦，，，，，没有任何输入——显示搜索图标、placeholder和搜索按钮。
。。。。

（2）光标聚焦，，，，，没有任何输入——光标闪灼，，，，，显示搜索图标、placeholder和搜索按钮。
。。。。

（3）光标聚焦，，，，，有输入——光标闪灼，，，，，显示搜索图标、输入文字、扫除按钮和搜索按钮。
。。。。

（4）光标不聚焦，，，，，有输入——显示搜索图标、输入文字、扫除按钮和搜索按钮。
。。。。

（5）按回车搜索——扫除按钮隐藏。
。。。。

（6）点击搜索按钮——扫除按钮隐藏。
。。。。

由此可见，，，，，需要 input 组件的聚焦和键盘输入事务。
。。。。

<input 
    placeholder='{{placeholder}}' 
    value='{{inputValue}}' 
    bindinput='handleInput' 
    bindconfirm='handleSearch'
    bindfocus='inputFocused'>
</input>

inputFocused：若是聚焦时，，，，，输入框中有内容，，，，，显示 closeIcon；；；

handleInput：若是输入时没有内容，，，，，不显示 closeIcon，，，，，有内容，，，，，显示 closeIcon 并把值存入 value。
。。。。

handleSearch：点击回车后，，，，，不显示 closeIcon。
。。。。

triggerEvent：自界说组件触发事务时，，，，，需要使用 triggerEvent 要领，，，，，指定事务名、detail工具和事务选项。
。。。。 

inputFocused(e) {
            if (e.detail.value !== '') {
                this.setData({
                    showCloseIcon: true,
                });
            }
        },
        handleInput(e) {
            if (e.detail.value == '') {
                this.setData({
                    showCloseIcon: false,
                });
            } else {
                this.setData({
                    showCloseIcon: true,
                });
                this.triggerEvent('handleInput', {
                    value: e.detail.value
                });
            }
        },
        handleSearch() { // 点击键盘上的回车，，，，，挪用此要领
            this.setData({
                showCloseIcon: false,
            });
            console.log('handleSearch', this.data.inputValue);
        },

<view class='close-icon-wrapper' wx:if="{{showCloseIcon}}" bindtap='clearValue'>
    <image class='close-icon' src="/img/close.png' ></image>
</view>
<text bindtap='onTap'>搜索</text>

划分为 closeIcon 和 搜索按钮添加点击事务。
。。。。

clearValue() {
            this.triggerEvent('handleInput', {
                value: ''
            });
            this.setData({
                showCloseIcon: false,
            });
        },
        onTap() {
            this.setData({
                showCloseIcon: false,
            });
            console.log('onTap', this.data.inputValue);
        },

组件 json

{
  "component":true
}

页面 json

工程的名字是 cookbook，，，，，这里组件前缀统一为 ck。
。。。。

{
    "usingComponents":{
        "ck-input":"/components/search/index"
    }
}

页面 wxml

<view class='container'>
    <ck-input
    placeholder='搜你想吃的'
    inputValue="{{inputValue}}"
    bind:handleInput="handleInput">
    </ck-input>
</view>

页面 js

handleInput(e) {
        this.setData({
            inputValue: e.detail.value,
        });
    },

以上就是美食菜谱类微信小程序的设计与开发之搜索组件，，，，，美食餐饮类现在已经成为了小程序开发中的热门行业，，，，，若是你也需要这样的一个小程序，，，，，可以与我们咨询。
。。。。

小程序工具提供多类型商城/门店小程序制作，，，，，可视化编辑 1秒天生5步上线。
。。。。通过拖拽、拼接？？？？榻峁剐〕绦蛏坛且趁，，，，，所看即所得，，，，，只需要美工就能做出细腻商城。
。。。。更多小程序市肆请审查：小程序市肆