ホームページ > 記事 > WeChat アプレット > ミニプログラムにコンテンツ検索機能を実装する方法を段階的に説明します。
この記事では、小さなプログラムの開発における実際の経験を共有し、小さなプログラムにコンテンツ検索機能を実装する方法を紹介します。
前回は、ホームページのコンテンツリストの表示を実装しましたが、上部の検索ボックスの実際の機能は実装していませんでした。この記事では、実際の機能を追加します。検索ボックスへの検索機能。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル]
検索ボックスをクリックした後にどのように表示されるかを見てみましょう
ここでは、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 サイトの他の関連記事を参照してください。