WeChat 애플릿 검색 구성 요소를 처음부터 개발하는 방법

이 글은 WeChat 애플릿 검색 컴포넌트를 처음부터 개발하는 방법을 소개합니다. WeChat 애플릿 개발을 배우는 친구들에게 도움이 되길 바랍니다!

WeChat 애플릿 검색 구성 요소를 처음부터 개발하는 방법

구성 요소에 대한 컨테이너를 설정하고 검색 아이콘, 입력 상자, 일반 텍스트 버튼 및 검색 버튼을 컨테이너에 배치합니다.

<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>

컴포넌트 스타일(권장 학습: Mini 프로그램 개발)

컨테이너: 높이 100rpx, 배경색 #eee, 플렉스 레이아웃.

input-wrapper: 높이 80rpx, 배경색 #fff, 플렉스 레이아웃, 테두리 반경: 20rpx.

검색 아이콘: 너비 및 높이 32rpx.

입력: 글꼴 및 커서 색상 #000, 글꼴 크기 32rpx.

close-icon-wrapper: 너비 및 높이 80rpx, 절대 위치 지정.

텍스트: 검색 버튼 너비 110rpx, 높이 65rpx, 절대 위치, 왼쪽 테두리 2rpx 실선 #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;
}

컴포넌트 함수

컴포넌트 생성자에서 속성과 데이터 구별에 주의하세요. 속성은 컴포넌트의 외부 속성을 쓰고, 데이터는 컴포넌트의 내부 속성을 씁니다. 이 검색 컴포넌트에서는 자리 표시자와 값이 페이지에서 전달되어 속성에 기록되고, 지우기 버튼 표시 여부를 제어하는 ​​showCloseIcon이 데이터에 기록됩니다.

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

2. 메소드 설정

이벤트 흐름

(1) 커서가 포커스되지 않고 입력이 없습니다 - 검색 아이콘, 자리 표시자 및 검색 버튼이 표시됩니다.

(2) 커서에 초점이 맞춰져 있고 입력이 없습니다. 커서가 깜박이고 검색 아이콘, 자리 표시자 및 검색 버튼이 표시됩니다.

(3) 커서에 초점이 맞춰지고 입력이 됩니다. 커서가 깜박이고 검색 아이콘, 입력 텍스트, 지우기 버튼 및 검색 버튼이 표시됩니다.

(4) 커서가 포커스되지 않고 입력이 있습니다 - 검색 아이콘, 입력 텍스트, 지우기 버튼 및 검색 버튼이 표시됩니다.

(5) 검색하려면 Enter를 누르고 숨기려면 지우기 버튼을 누르세요.

(6) 검색 버튼을 클릭하세요. 숨기려면 버튼을 삭제하세요.

입력 컴포넌트의 포커스와 키보드 입력 이벤트가 필요한 것을 알 수 있습니다.

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

inputFocused: 포커스 시 입력 상자에 내용이 있으면 closeIcon이 표시됩니다.

handleInput: 입력 중에 내용이 없으면 closeIcon이 표시되지 않고, 내용이 있으면 closeIcon이 표시됩니다. 값은 value에 저장됩니다.

handleSearch: Enter를 클릭한 후 closeIcon이 표시되지 않습니다.

triggerEvent: 사용자 정의 구성 요소가 이벤트를 트리거하면 TriggerEvent 메서드를 사용하여 이벤트 이름, 세부 개체 및 이벤트 옵션을 지정해야 합니다.

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는 각각 closeIcon 및 검색 버튼에 대한 클릭 이벤트를 추가합니다.

closeIcon 및 검색 버튼에 대한 클릭 이벤트를 각각 추가합니다.

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

프로젝트 이름은 cookbook이고, 여기서 구성요소 접두사는 일률적으로 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,
        });
    },

이 시점에서 검색 컴포넌트는 예비 개발이 완료되었습니다.

PHP 중국어 웹사이트, 다수의 jquery 비디오 튜토리얼, 학습을 환영합니다!

위 내용은 WeChat 애플릿 검색 구성 요소를 처음부터 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!