ミニプログラムにコンテンツ検索機能を実装する方法を段階的に説明します。

この記事では、小さなプログラムの開発における実際の経験を共有し、小さなプログラムにコンテンツ検索機能を実装する方法を紹介します。

前回は、ホームページのコンテンツリストの表示を実装しましたが、上部の検索ボックスの実際の機能は実装していませんでした。この記事では、実際の機能を追加します。検索ボックスへの検索機能。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル]

検索コンテンツ バインディング

検索ボックスをクリックした後にどのように表示されるかを見てみましょう

ここでは、vant の search コンポーネントを使用します。その documentation では、このコンポーネントの一連のイベント バインディング メソッドが紹介されています。

ここで使用したいのは、検索が決定されたときに実際のコンテンツ検索をトリガーすることです。そのため、このイベントのバインディングを search に追加します。コンポーネント 以下のように

#次に、検索イベントの応答実装で検索コンポーネントにバインドされた value 変数を出力し、入力テストを実行します。

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

開発者ツールでは、入力ボックスなどのコンポーネントはコンピュータ側にあるため、携帯電話側と同様の入力メソッド インターフェイスを呼び出すことができないことに注意してください。携帯電話上の小さなプログラムでは、すべてが実際の違いです。

この場合、プレビュー機能を使用して携帯電話でデバッグできます。携帯電話でミニ プログラムを開いた後、右上隅の ... をクリックします。デバッグ パネルを表示してコンソールを表示します。

または、開発者ツールが提供する 実機デバッグ 機能を使用します。携帯電話でミニ プログラムをプレビューし、コンピューター上の開発者ツールでデバッグ情報をリアルタイムで確認できます。 。

デバッグ

デバッグ後、search にバインドされた value は初回のみ入力されることがわかりました。これは後で変更されて searchValue に保存され、その後入力された値によってこの変数は更新されないため、すべての検索で最新の入力内容を使用することができなくなり、問題となります。

データ バインディング

解決策も非常に簡単で、ミニ プログラムに付属のデータ バインディング機能を使用し、検索## を追加するだけです。 # コンポーネントを受信した value 属性が model:value に変更され、それによって双方向のデータ バインディングが有効になります。

このように、後続の入力更新後、

searchValue の値も同時に更新され、同期変更の効果が得られます。

条件付きクエリ

これで、検索ボックスに入力されたコンテンツを毎回取得でき、これをキーワードとして使用してリストのコンテンツをクエリできます。 。

ルールは、データベース内のすべてのレコードから、

text に検索キーワードを含むレコードを検索することです。もちろん、一度に返されるレコードは 20 件だけです。もサポートできます。

実は、ここでの方法は、元のベースでキーワード一致条件が追加されていることを除いて、基本的に前のデータ クエリ方法と同じなので、以前のデータ クエリ方法を変換してみましょう。

検索コンテンツを、もともとリストのコンテンツ全体を更新するために使用されていたメソッドにパラメーターとして追加し、実際にクエリを実行するために使用されるクラウド関数処理メソッドに透過的に渡しました。データ。同時に、検索ボックスで検索を確認するたびに、検索内容があるかどうかを判定し、あればデータを再取得します。

データベース レコードのマッチング

次に、クラウド機能でのデータベース データ抽出にも対応する変更を加える必要があります。ここではデータベース レコード

が使用されます。検索内容の一致には通常のマッチング メソッドを使用します 詳細は 公式ドキュメントを参照してください

変換後のコアロジックは次のとおりです

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

検索コンテンツがあるかどうかを判断して、データのクエリのプロセスで通常のマッチングを実行するかどうかを区別し、検索コンテンツがある場合は検索コンテンツの大文字と小文字を無視して、可能な限り多くのコンテンツと一致します。

検索結果

このようにして、検索内容のクエリを実現します。

内容页面优化

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

无数据组件

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

试图部分

<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: '没有更多内容了'
    }
  }
})

展示效果

总结

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

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

以上がミニプログラムにコンテンツ検索機能を実装する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。