Eine ausführliche Erklärung zur Implementierung von Suchfunktionen in Miniprogrammen

Wie implementiert man allgemeine Suchfunktionen in Miniprogrammen? Der folgende Artikel führt Sie Schritt für Schritt durch die Implementierung der Suchfunktion im Miniprogramm. Ich hoffe, er ist hilfreich für Sie!

Beim Entwickeln jedes kleinen Programms wird es grundsätzlich mit einer Suchfunktion ausgestattet. Nach einer Zeit des Studiums habe ich eine umfassendere Suche gelernt Schauen Sie sich die Rahmenfunktion an!

Entwicklungsvorbereitung

• WeChat-Applet
• Wie eine Vant-Komponentenbibliothek

Effektanzeige

Werfen wir zunächst einen Blick auf den Effekt

Vorläufig Vorbereitung

Importieren einiger verwendeter Cloud-Datenbankdaten Testen Sie die Suchfeldfunktion

Implementierung

Erstellen Sie drei neue Seiten unter dem Verzeichnis.

Index wird als erste Seite des Suchfelds verwendet. Suchen Sie nach der Seite, die für bestimmte Suchanfragen verwendet wird

Hotsearch ist eine detaillierte Seite mit Suchinhalten. Schauen wir uns zunächst das Layout des Index auf der ersten Seite des Suchfelds an. Hier stellen wir hauptsächlich den Inhalt des Suchfelds vor Das Folgende wird hier nicht beschrieben.

Dies ist der index.wxml-Code

      <view class="search_1" bindtap="gotoSearch">
          <van-search 
          placeholder="搜索单品" disabled
          />
        </view>
      <view class="search_2">
        <view class="pic" bindtap="list" >
          <image src=""></image>
        </view>
      </view>
    </view>

Dies ist der search.wxml-Code des Suchfelds

  <view class="dewu-search">
    <view class="return" >
      <view class="return_pic" bindtap="gotoindex">
        <image src=""></image>
      </view>
      <view class="txt">搜索</view>
    </view>
  </view>
  <van-search 
      value="{{value}}" 
      show-action 
      placeholder="输入商品名称、货号"
      bind:clear="onClear" 
      bind:search="onSearch"   
      bind:cancel="oncancel" 
      bind:change="onchange"
      bindtap="input"
      value="{{value}}"
    />
    <block wx:if="results.length > 0">
      <van-cell wx:for="{{results}}" wx:key="_id" title="{{item.title}}"  size="large"  />
    </block>
    <view class="page1" hidden="{{issuggest==true?&#39;hidden&#39;:&#39;&#39;}}" >
        <view class="bd">
          <view class="content">热门搜索</view>
          <view class="box">
            <view class="items">
              <view class="item" wx:for="{{goods}}"
              wx:key="index"  bindtap="hotsearch" data-id="{{item.id}}"
              >
              {{item.hot}}
              </view>
            </view>
          </view>
        </view>
        <view class="last">
          <view class="content">搜索历史</view>
          <view class="box">
            <view class="items">
              <view class="item" wx:for="{{historyList}}" wx:key="index" data-id="{{item.id}}" bindtap="gotohistoryList"
              wx:key="index">
                {{item.hot}}
              </view>
            </view>
          </view>
        </view>
    </view>
    <view class="page2"   hidden="{{issuggest==false?&#39;hidden&#39;:&#39;&#39;}}">
      <view class="content1">
        <view class="title" wx:for="{{goods1}}" data-id="{{item.id}}"
              wx:key="index"  bindtap="hotsearch" >
              {{item.hot}}
        </view>
      </view>
    </view>
</view>

js muss eingeführt werden

rrree

Um sicherzustellen, dass relevante Inhalte angezeigt werden, wenn im Eingabefeld Inhalte eingegeben werden, wird die ausgeblendete Seite angezeigt hidden="{{ issuggest==false?'hidden':''}}", um festzustellen, ob dies erforderlich ist. Verwandte Inhaltsseiten werden angezeigt. Verwenden Sie indexOf, um festzustellen, ob e.detail (Inhalt des Eingabefelds) in der Cloud-Datenbank vorhanden ist. Wenn vorhanden, speichern Sie diese Daten in einem Array und verbinden Sie die zuvor gesuchten Daten Array, verwenden Sie dann wx.setStorageSync();, um die Daten im Eingabefeld im Speicher zu speichern, und verwenden Sie dann wx.getStorageSync(), um die Daten zu extrahieren.

Dies ist die Detailseite, die angezeigt wird, wenn Daten im Eingabefeld vorhanden sind. Klicken Sie hier, um zur Produktdetailseite zu springen

Das ist die Logik des Suchfelds

    const db = wx.cloud.database();
    const dewuCollection = db.collection('dewu');

hidden="{{issuggest==false?'hidden':''}}"来判断是否要出现相关内容页面， 用indexOf判断e.detail（输入框内容）是否是在云数据库里存在的，如果是存在的，那么将这条数据存入一个数组里面，并且连接之前搜索后的数组，再使用 wx.setStorageSync();将输入框的数据存入到storage里面，然后再wx.getStorageSync()提取数据。

这是当输入框有数据的时候就会弹出详情页面，点击可以跳转到商品的详情页

这是搜索框的逻辑

    if(e.detail.length!=0){
        this.setData({
          issuggest:true,
        })
        var arr = [];
        console.log(this.data.goods.length);
            for (var i = 0; i < this.data.goods.length; i++) {
              if (this.data.goods[i].hot.indexOf(e.detail)>=0) {
                arr.push(this.data.goods[i]);
              }
              this.setData({
              goods1:arr,
           })
          }
    }
    else {
      console.log(&#39;succes&#39;);
      this.setData({
         issuggest:false
      })
    }
  },
    async onSearch(e){
    var arr1=new Array();
    var historyList=new Array();
    var storage=new Array();
    for (let i = 0; i < this.data.goods.length; i++){
      if(e.detail==this.data.goods[i].hot){
        arr1.push(this.data.goods[i]);
        console.log(arr1);
        break
      }
      else{
              arr1.push(e.detail);
              console.log(arr1);
        }
    }
    if(arr1.length>1){
      this.setData({
        storage:arr1.slice(arr1.length-1,arr1.length)
      })
    }
    else{
      console.log(arr1,&#39;要存进去的数据&#39;);
      this.setData({
        storage:arr1
      })
    }
    if(this.data.historyList !=[]){
      this.data.historyList = this.data.historyList.concat(this.data.storage);//连接
    }
    else{
      this.data.historyList=this.data.storage
    }
   wx.setStorageSync(&#39;historyList&#39;, this.data.historyList);
   this.setData({
    historyList:this.data.historyList
  })
  },

wx.navigateTo可以用来跳转到详细的页面，加上字符串模板，判断id的值，用数据来驱动页面，跳转到相同的页面不同的数据。

wx.navigateTo({
      url: `../hotsearch/hotsearch?id=`+id
    })

最后还要更新数据

     wx.showLoading({
       title: '数据加载中...',
     })   
     setTimeout(()=>{
      wx.hideLoading()
       this.setData({
          goodsNav: nav,
          goodsList:List,
          recommend:List,
          goods2:this.data.historyList
       })
      },1000)
// console.log(goodsList,'===========');
   },

注意不要忘记要在全局json或者局部页面json里引入需要使用的组件的地址

    "usingComponents": {
        "van-search":"./miniprogram_npm/@vant/weapp/search/index"
  },

扩展

这个自动跳转到导航栏中间的功能也是挺常用的

这是wxml代码 最主要的是 scroll-x="true" 让导航栏在水平方向可以滑动scroll-with-animation="true"是让滑动产生动画，scroll-into-view="{{scrollTop}}"

      <scroll-view  scroll-x="true"
                 scroll-with-animation="true"
                 style="width:100%;" class="scroll-view_H " 
                 scroll-into-view="{{scrollTop}}">
        <view 
        wx:for="{{goodsNav}}"
        wx:key="index"
        id="{{item.id}}"
        data-index="{{index}}"
        data-type="{{item.type}}"
        bindtap="changegoods"
        class="scroll-view-item_H {{activeNavIndex == index?&#39;active&#39;: &#39;&#39;}}  "
        >
          <text>{{item.text}}</text>
        </view>
      </scroll-view>
    </view>

这是绑定在导航栏上面的事件 let {index, type} = e.currentTarget.dataset;提取到 index 和 type ，然后设置一个count作为前几个不动，然后拼接给id，把id的值传给scrollTop，让导航栏跳到scrollTopwx.navigateTo kann zum Springen verwendet werden Zu detaillierten Seiten hinzufügen, eine Zeichenfolgenvorlage hinzufügen, den Wert der ID bestimmen, Daten zum Steuern der Seite verwenden und mit unterschiedlichen Daten zur gleichen Seite springen.

     console.log(e);
    let {index, type} = e.currentTarget.dataset;
    console.log("index=" +index, "type="+type);
    this.setData({
      activeNavIndex:index
    })
    if (type == 'recommend') {
      this.setData({
        goodsList: this.data.recommend
      })
    } 
    else {
        let goods = this.data.recommend.filter((good) => good.camptype == type )
        this.setData({
          goodsList: goods
        })
        //console.log(this.data.goods)
      }
    
      var index1 = e.currentTarget.dataset.index;
      var count = 2;
      var id = "item"+(index1-count);//拼接id
      if(count == 2 && index1 < 3 || count == 3 && index1 < 2 || count == 4 && index1 < 3){
        id = "item0";
      }
      console.log("下标",index1,"---分类id名称",id)
      this.setData({
        scrollTop: id
      })
    },

Abschließend müssen die Daten aktualisiert werden

rrreee

Achten Sie darauf, nicht zu vergessen, die Adresse der Komponente einzugeben, die Sie im globalen JSON oder lokalen Seiten-JSON verwenden müssen

rrreee

extend

this Die Funktion, automatisch in die Mitte der Navigationsleiste zu springen, ist ebenfalls sehr verbreitet

🎜🎜🎜Dies ist der WXML-Code. Das Wichtigste ist scroll-x="true" damit Die Navigationsleiste kann in horizontaler Richtung verschoben werden. scroll-with-animation ="true" soll das Gleiten animieren, scroll-into-view="{{scrollTop}}"🎜rrreee🎜Dies ist ein Ereignis, das an die Navigationsleiste gebunden ist let {index, type} = e.currentTarget.dataset;Index und Typ extrahieren, dann eine Anzahl als die ersten paar festlegen und sie dann zusammenfügen zu id und geben Sie ein. Übergeben Sie den Wert von id an scrollTop und lassen Sie die Navigationsleiste zum Wert von scrollTop springen. code>. Dieser Wert liegt in der Mitte🎜rrreee🎜Auf diese Weise können Sie wxss hinzufügen, um den Effekt zu erzielen Bei dieser Schreibweise gibt es jedoch ein Problem: Wenn der angezeigte Inhalt eine gerade Zahl ist, z. B. 6, kann er nicht korrekt in die Mitte springen und springt an die Position 3, was zu einer leichten Abweichung führt Ich habe dieses Problem noch nicht gelöst. Ich frage mich, ob jemand weiß, wie man das löst. 🎜🎜Quellcode🎜🎜Hier ist der vollständige Quellcode des Projekts oben angegeben. Wenn Sie interessiert sind, können Sie sich den vollständigen Quellcode ansehen🎜🎜🎜https://gitee.com/xinccc/. fullstack_huoshan/tree/master/ wxapp/dewu🎜

Zusammenfassung

Hier schreibe ich hauptsächlich die Hauptschwierigkeiten, auf die ich während des Entwicklungsprozesses gestoßen bin, aber es bedeutet mir trotzdem viel Durch diese Erfahrung habe ich festgestellt, dass ich noch viel lernen muss. Ich bin auch den Lehrern und Klassenkameraden dankbar, die mir geholfen haben, als ich Schwierigkeiten hatte. Wenn Sie das Gefühl haben, dass dieser Artikel Ihren Punkt erreicht hat, können Sie ihn auch geben Geben Sie mir ein „Gefällt mir“, was für mich eine große Ermutigung ist. Ich hoffe, dass wir im Kommentarbereich gemeinsam darüber diskutieren und lernen können.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung zur Implementierung von Suchfunktionen in Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!