How to develop a WeChat applet search component from scratch

This article introduces the method of developing a WeChat applet search component from scratch. I hope it will be helpful to friends who are learning WeChat applet development!

How to develop a WeChat applet search component from scratch

Set a container for the component, place the search icon and input in the container box, clear text button, and search button.

<view class="input-wrapper">
    <icon class="search-icon"/>
    <input
        placeholder=&#39;{{placeholder}}&#39; 
        value=&#39;{{inputValue}}&#39; 
        bindinput=&#39;handleInput&#39; 
        bindconfirm=&#39;handleSearch&#39;
        bindfocus=&#39;inputFocused&#39;>
    </input>
    <view class="close-icon-wrapper">
        <icon class="close-icon"/>
    </view>
    搜索
</view>

Component style (recommended learning: 小program development)

container: height 100 rpx, background color# eee, flex layout.

input-wrapper: height 80 rpx, background color #fff, flex layout, border-radius: 20rpx.

search-icon: width and height 32 rpx.

input: font and cursor color #000, font size 32 rpx.

close-icon-wrapper: width and height 80 rpx, absolute positioning.

text: Search button 110 rpx wide, 65 rpx high, absolutely positioned, left border 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;
}

Component function

In the constructor of the component, pay attention to distinguishing properties and data. Write the component in properties. For external properties, data writes the internal properties of the component. In this search component, placeholder and value are passed from the page, so they are written in properties, and showCloseIcon, which controls whether the clear button appears, is written in data.

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

2. Method settings

Event process

(1) The cursor is not focused and there is no input - the search icon, placeholder and search are displayed button.

(2) The cursor is focused and there is no input - the cursor flashes and the search icon, placeholder and search button are displayed.

(3) The cursor is focused and there is input - the cursor flashes and the search icon, input text, clear button and search button are displayed.

(4) The cursor is not focused and there is input - the search icon, input text, clear button and search button are displayed.

(5) Press Enter to search - the clear button is hidden.

(6) Click the search button - clear the button to hide.

It can be seen that the input component's focus and keyboard input events are required.

<view
    placeholder=&#39;{{placeholder}}&#39; 
    value=&#39;{{inputValue}}&#39; 
    bindinput=&#39;handleInput&#39; 
    bindconfirm=&#39;handleSearch&#39;
    bindfocus=&#39;inputFocused&#39;>
</view>

inputFocused: If there is content in the input box during focus, closeIcon is displayed;

handleInput: If there is no content during input, it is not displayed. closeIcon has content, displays closeIcon and stores the value in value.

handleSearch: After clicking Enter, closeIcon is not displayed.

triggerEvent: When a custom component triggers an event, you need to use the triggerEvent method to specify the event name, detail object and event options.

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);
        },

Search adds click events for closeIcon and search button respectively.

Add click events for closeIcon and search button respectively.

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

Page json

The name of the project is cookbook, and the component prefix here is uniformly ck.

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

Page wxml

<input
    placeholder=&#39;搜你想吃的&#39;
    inputValue={{inputValue}}
    bind:handleInput=handleInput>
</input>

Page js

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

At this point, the initial development of the search component has been completed.

PHP Chinese website, a large number of jquery video tutorials, welcome to learn!

The above is the detailed content of How to develop a WeChat applet search component from scratch. For more information, please follow other related articles on the PHP Chinese website!