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

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

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

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

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

ここでは、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 サイトの他の関連記事を参照してください。