Comment développer un composant de recherche d'applet WeChat à partir de zéro

Cet article présente la méthode de développement d'un composant de recherche d'applet WeChat à partir de zéro. J'espère qu'il sera utile aux amis qui apprennent le développement d'applets WeChat !

Comment développer un composant de recherche d'applet WeChat à partir de zéro

Définir un conteneur pour le composant et placer l'icône de recherche et la saisie dans la zone conteneur, le bouton de texte clair et le bouton de recherche.

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

Style de composant (apprentissage recommandé : Développement de mini-programmes)

conteneur : hauteur 100 rpx, couleur de fond# eeee, mise en page flexible.

input-wrapper : hauteur 80 rpx, couleur d'arrière-plan #fff, disposition flexible, rayon de bordure : 20rpx.

icône de recherche : largeur et hauteur 32 rpx.

entrée : couleur de la police et du curseur #000, taille de la police 32 rpx.

close-icon-wrapper : largeur et hauteur 80 rpx, positionnement absolu.

texte : Bouton de recherche 110 rpx de large, 65 rpx de haut, positionné de manière absolue, bordure gauche 2rpx solide #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;
}

Fonction composant

Dans le constructeur du composant, faites attention à distinguer les propriétés et les données Écrivez le. composant dans les propriétés Pour les propriétés externes, data écrit les propriétés internes du composant. Dans ce composant de recherche, l'espace réservé et la valeur sont transmis depuis la page, ils sont donc écrits dans les propriétés, et showCloseIcon, qui contrôle si le bouton d'effacement apparaît, est écrit dans les données.

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

2. Paramètres de la méthode

Flux d'événements

(1) Le curseur n'est pas focalisé et il n'y a pas d'entrée - l'icône de recherche, l'espace réservé et la recherche sont affichées.

(2) Le curseur est focalisé et il n'y a aucune entrée - le curseur clignote et l'icône de recherche, l'espace réservé et le bouton de recherche sont affichés.

(3) Le curseur est mis au point et il y a une saisie - le curseur clignote et l'icône de recherche, le texte de saisie, le bouton d'effacement et le bouton de recherche sont affichés.

(4) Le curseur n'est pas focalisé et il y a une saisie - affichez l'icône de recherche, saisissez le texte, le bouton d'effacement et le bouton de recherche.

(5) Appuyez sur Entrée pour rechercher - le bouton Effacer est masqué.

(6) Cliquez sur le bouton de recherche - désactivez le bouton pour masquer.

On peut voir que les événements de focus et de saisie au clavier du composant d'entrée sont requis.

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

inputFocused : S'il y a du contenu dans la zone de saisie pendant le focus, closeIcon est affiché

handleInput : S'il n'y a pas de contenu pendant le focus ; entrée, il n'est pas affiché closeIcon a du contenu, affiche closeIcon et stocke la valeur dans value.

handleSearch : après avoir cliqué sur Entrée, closeIcon ne sera pas affiché.

triggerEvent : lorsqu'un composant personnalisé déclenche un événement, vous devez utiliser la méthode triggerEvent pour spécifier le nom de l'événement, l'objet de détail et les options de l'événement.

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

La recherche ajoute respectivement des événements de clic pour closeIcon et le bouton de recherche.

Ajoutez des événements de clic pour closeIcon et le bouton de recherche respectivement.

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

Le nom du projet est livre de recettes, et le préfixe du composant ici est uniformément 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,
        });
    },

À ce stade, le composant de recherche a terminé son développement préliminaire.

Site Web PHP chinois, un grand nombre de tutoriels vidéo jquery, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!