Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die Inhaltssuchfunktion in einem Miniprogramm implementieren

Dieser Artikel wird Ihnen praktische Erfahrungen bei der Entwicklung eines kleinen Programms vermitteln und Ihnen vorstellen, wie Sie die Inhaltssuchfunktion in einem kleinen Programm implementieren. Ich hoffe, dass er für alle hilfreich ist!

Zuvor haben wir die Anzeige der Homepage-Inhaltsliste implementiert, aber nicht die eigentliche Funktion des Suchfelds oben. In diesem Artikel werden wir dem Suchfeld eine echte Suchfunktion hinzufügen. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung]

Suchinhaltsbindung

Sehen wir uns jetzt an, wie es aussieht, nachdem wir auf das Suchfeld geklickt haben

Hier verwenden wir die Suche von vant Code >Komponente, ihr <a href="https://youzan.github.io/vant-weapp/#/search" target="_blank" ref="nofollow noopener noreferrer">Dokument <code>search组件，其 文档 中介绍了一些列关于这个组件的事件绑定方法。

我们要使用到的是在确定搜索时去触发真正的内容搜索，所以我们为search组件增加这一事件的绑定如下

接着，我们在搜索事件的响应实现中打印绑定在搜索组件上的值变量，然后进行输入测试。

handleSearch() {
    const { searchValue } = this.data
    console.log('搜索内容', searchValue)
}

这里需要注意，在开发者工具中，对于输入框这类组件，由于是在电脑端，所以无法唤起类似手机端的输入法界面，所以交互上与手机中使用小程序的真实情况所有差别。

对于这种情况，我们可以使用预览功能在手机端进行调试，手机端打开小程序后可点击右上角的...调出调试面板来查看控制台的输出。

或者使用开发者工具提供的真机调试功能，可以在手机预览小程序的同时，在电脑端的开发者工具内实时看到调试信息。

调试

经过调试，我们发现，search所绑定的value只会在第一次输入后改变并存储在searchValue中，而后续再输入的值并不会更新这个变量，这就导致我们不能每次搜索都使用最新输入的内容，这是存在问题的。

数据绑定

解决的方法也很简单，就是使用小程序自带的数据绑定特性，将search组件中传入的value属性改为model:value，从而启用数据双向绑定。

这样，在后续的输入更新后，都会同时更新searchValue的值，达到同步修改的效果。

条件查询

那么能够拿到每次搜索框输入的内容，我们就可以拿这个作为关键字，对列表内容进行查询。

规则就是从数据库中的所有记录中查找text中包含我们的搜索关键字的记录，当然最多也只会一次返回20条记录，然后同样可以支持上拉加载。

其实这里和之前查询数据的方式基本一致，只是在原有的基础上增加一个关键字匹配条件，那么让我们来改造一下之前的数据查询方法。

我们将原本用于刷新整个列表内容的方法增加了搜索内容作为参数，并透传给用于真正查询数据的云函数处理方法。同时，在每次搜索框确认搜索时，判断是否有搜索内容，如果有则去进行数据的重新获取。

数据库记录匹配

接着，我们在云函数中对于数据库数据的提取也需做相应的改动，这里会用到数据库记录的正则匹配 stellt einige Serien über dieses Komponentenereignis vor Bindungsmethode.

us Was wir verwenden müssen, ist, die Suche nach echtem Inhalt auszulösen, wenn die Suche festgelegt ist. Daher fügen wir die Bindung dieses Ereignisses wie folgt zur Komponente search hinzu

Als nächstes drucken wir die Bindung in der Suche in der Antwort aus Implementierung der Suchereigniswertvariablen auf der Komponente und anschließende Eingabetests.

const db = cloud.database()
const collection = db.collection('homeContentList')

let searchPromise
let countPromise

try {
  if (content) {
    const searchReg = db.RegExp({
      regexp: content,
      options: 'i'
    })
    searchPromise = collection.where({
      text: searchReg
    })
    .skip(pageNo).limit(pageSize).get()
    countPromise = collection.where({
      text: searchReg
    })
    .count()
  } else {
    searchPromise = collection.skip(pageNo).limit(pageSize).get()
    countPromise = collection.count()
  }
  const [{ data: listData }, { total }] = await Promise.all([searchPromise, countPromise])
  if (listData) {
    data = listData
  }
  totalSize = total
} catch (error) {
  console.log('error', error)
}

Hier ist zu beachten, dass in den Entwicklertools Komponenten wie Eingabefelder, da sie sich auf der Computerseite befinden, keine Eingabemethodenschnittstelle ähnlich der Mobiltelefonseite hervorrufen können, sodass die Interaktion völlig anders ist die tatsächliche Situation der Nutzung von Miniprogrammen auf Mobiltelefonen.

In diesem Fall können wir die Vorschaufunktion zum Debuggen auf dem Mobiltelefon verwenden. Nachdem Sie das Miniprogramm auf dem Mobiltelefon geöffnet haben, können Sie auf ... in der oberen rechten Ecke klicken, um es aufzurufen das Debugging-Panel, um die Ausgabe der Konsole anzuzeigen.

Oder Sie können die von den Entwicklertools bereitgestellte Funktion Real Device Debugging verwenden. Sie können eine Vorschau des Miniprogramms auf Ihrem Mobiltelefon anzeigen und die Debugging-Informationen in Echtzeit in den Entwicklertools auf dem Computer anzeigen.

Debugging🎜🎜🎜Nach dem Debuggen haben wir festgestellt, dass der an search gebundene value nur beim ersten Mal verwendet wird Zeit Nach der Eingabe wird es geändert und in searchValue gespeichert, und der anschließend eingegebene Wert aktualisiert diese Variable nicht. Dies bedeutet, dass wir nicht für jede Suche den neuesten Eingabeinhalt verwenden können, was ein Problem darstellt. 🎜

🎜Datenbindung🎜🎜🎜Die Lösung ist auch sehr einfach: Verwenden Sie die mit dem Miniprogramm gelieferte Datenbindungsfunktion und fügen Sie sie zur Suche-Komponente Das übergebene Attribut <code>value wird in model:value geändert, wodurch eine bidirektionale Datenbindung ermöglicht wird. 🎜🎜Auf diese Weise wird nach nachfolgenden Eingabeaktualisierungen gleichzeitig der Wert von searchValue aktualisiert, um den Effekt einer synchronen Änderung zu erzielen. 🎜🎜🎜

Bedingte Abfrage🎜🎜 Dann können wir den Inhalt jedes Mal in das Suchfeld eingeben und ihn als Schlüsselwort verwenden, um den Listeninhalt abzufragen. 🎜🎜Die Regel besteht darin, die Datensätze, die unsere Suchbegriffe enthalten, in allen Datensätzen in der Datenbank zu finden. Natürlich werden jeweils nur 20 Datensätze zurückgegeben, und das Laden per Pull-up ist ebenfalls möglich unterstützt. 🎜🎜Tatsächlich ist die Methode hier im Grunde dieselbe wie die vorherige Methode zum Abfragen von Daten. Sie fügt lediglich eine Schlüsselwortübereinstimmungsbedingung auf der ursprünglichen Basis hinzu. Lassen Sie uns also die vorherige Datenabfragemethode umwandeln. 🎜🎜🎜🎜uns Die ursprünglich zum Aktualisieren des gesamten Listeninhalts verwendete Methode fügt den Suchinhalt als Parameter hinzu und übergibt ihn transparent an die Cloud-Funktionsverarbeitungsmethode, mit der die Daten tatsächlich abgefragt werden. Gleichzeitig wird jedes Mal, wenn das Suchfeld die Suche bestätigt, beurteilt, ob Suchinhalt vorhanden ist, und wenn ja, werden die Daten erneut erfasst. 🎜

🎜Datenbankdatensatzabgleich🎜🎜🎜Als nächstes müssen wir auch entsprechende Änderungen an der Datenbankdatenextraktion in der Cloud-Funktion vornehmen. Die -Regelmäßigkeit des Datenbankdatensatzes wird sein Hier wird die Match-Methode verwendet, um den Suchinhalt abzugleichen. Weitere Informationen finden Sie im 🎜🎜🎜Die Kernlogik nach der Transformation lautet wie folgt:

<view class="wrap">
  <text class="text">{{text}}</text>
</view>

🎜Wir unterscheiden, ob sie während durchgeführt werden soll Der Prozess des Abfragens von Daten danach, ob Suchinhalte vorhanden sind. Wenn Suchinhalte vorhanden sind, ignorieren Sie die Groß- und Kleinschreibung des Suchinhalts, um so viele Inhalte wie möglich abzugleichen. 🎜🎜🎜Suchergebnisse🎜🎜🎜🎜🎜🎜Auf diese Weise können wir den Suchinhalt abfragen. 🎜

内容页面优化

最后，我们优化一下首页的展示效果。

无数据组件

很多页面都有可能是数据列表的形式，而其各自在加载完所有数据后需要展示在底部的“没有更多内容”字样可能不同，所以我们将这部分展示封装成一个可供复用的自定义组件。

试图部分

<view class="wrap">
  <text class="text">{{text}}</text>
</view>

组件样式

.wrap {
  width: 100%;
  padding: 20rpx 0 40rpx;
  text-align: center;
}
.text {
  color: #999;
  font-size: 26rpx;
  line-height: 30rpx;
}

组件参数

Component({
  properties: {
    text: {
      type: String,
      value: '没有更多内容了'
    }
  }
})

展示效果

总结

这篇，我们实现了搜索框功能，将搜索框中输入的内容作为搜索关键字，从而在数据库中查找包含关键字的记录进行展示。另外，我们还将“没有更多内容”封装可供复用的组件。

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie die Inhaltssuchfunktion in einem Miniprogramm implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!