미니 프로그램에서 콘텐츠 검색 기능을 구현하는 방법을 단계별로 가르쳐드립니다.

이 글은 소규모 프로그램 개발의 실제 경험을 공유하고 소규모 프로그램에서 콘텐츠 검색 기능을 구현하는 방법을 소개합니다. 모두에게 도움이 되기를 바랍니다!

앞서 홈페이지 콘텐츠 목록 표시를 구현했지만, 상단 검색창의 실제 기능은 구현하지 않았습니다. 이번 글에서는 검색창에 실제 검색 기능을 추가해 보겠습니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

검색 콘텐츠 바인딩

이제 검색창을 클릭하면 어떻게 보이는지 살펴보겠습니다

여기에서는 vant의 검색을 사용합니다. code >Component, 해당 문서 search组件，其 文档 中介绍了一些列关于这个组件的事件绑定方法。

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

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

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

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

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

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

调试

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

数据绑定

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

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

条件查询

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

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

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

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

数据库记录匹配

接着，我们在云函数中对于数据库数据的提取也需做相应的改动，这里会用到数据库记录的正则匹配에서는 이 구성 요소 이벤트에 대한 일부 시리즈를 소개합니다. 바인딩 방법.

us 우리가 사용해야 하는 것은 검색이 결정될 때 실제 콘텐츠 검색을 트리거하는 것이므로 다음과 같이 이 이벤트의 바인딩을 search 구성 요소에 추가합니다

다음으로 응답의 검색에 바인딩을 인쇄합니다. 구성 요소에 검색 이벤트 값 변수를 구현한 다음 입력 테스트를 수행합니다.

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

여기서 주목해야 할 점은 개발자 도구에서 입력 상자와 같은 구성 요소의 경우 컴퓨터 측에 있기 때문에 휴대폰 측과 유사한 입력 방법 인터페이스를 불러올 수 없으므로 상호 작용이 완전히 다릅니다. 휴대폰에서 미니 프로그램을 사용하는 실제 상황.

이 경우 미리보기 기능을 이용하여 휴대폰에서 디버깅할 수 있습니다. 휴대폰에서 미니 프로그램을 연 후 오른쪽 상단의 ...를 클릭하면 불러올 수 있습니다. 콘솔의 출력을 보려면 디버깅 패널을 사용하세요.

또는 개발자 도구에서 제공하는 실제 디바이스 디버깅 기능을 이용해 휴대폰에서 미니 프로그램을 미리 볼 수 있고, 컴퓨터의 개발자 도구에서 실시간으로 디버깅 정보를 확인할 수 있습니다.

Debugging🎜🎜🎜디버깅 후 search에 바인딩된 값이 첫 번째에만 사용된다는 것을 발견했습니다. time 입력 후에는 searchValue에 변경되어 저장되며, 나중에 입력한 값은 이 변수를 업데이트하지 않습니다. 즉, 검색할 때마다 최신 입력 내용을 사용할 수 없다는 것이 문제입니다. 🎜

🎜데이터 바인딩🎜🎜🎜해결 방법도 매우 간단합니다. 즉, 미니 프로그램에 포함된 데이터 바인딩 기능을 사용하여 검색<에 추가하면 됩니다. /code> 구성요소 전달된 <code>value 속성이 model:value로 변경되어 양방향 데이터 바인딩이 가능해집니다. 🎜🎜이런 방식으로 후속 입력 업데이트 후에 searchValue 값이 동시에 업데이트되어 동기 수정 효과를 얻을 수 있습니다. 🎜🎜🎜

조건부 쿼리🎜🎜 그러면 검색창에 매번 입력되는 내용을 얻을 수 있고, 이를 키워드로 활용하여 목록 내용을 쿼리할 수 있습니다. 🎜🎜데이터베이스의 모든 레코드 중에서 검색 키워드가 포함된 레코드를 text로 찾는 것이 원칙입니다. 물론 한 번에 20개의 레코드만 반환되며 풀업 로드도 가능합니다. 지원됩니다. 🎜🎜실제로 여기서의 방법은 기본적으로 이전 데이터 쿼리 방법과 동일하지만, 기본적으로 키워드 일치 조건을 추가했을 뿐입니다. 따라서 이전 데이터 쿼리 방법을 변형해 보겠습니다. 🎜🎜🎜🎜us 원래 전체 목록 내용을 새로 고치는 데 사용된 방법은 검색 내용을 매개변수로 추가하고 실제로 데이터를 쿼리하는 데 사용되는 클라우드 함수 처리 방법에 투명하게 전달합니다. 동시에, 검색창에서 검색을 확인할 때마다 검색 내용이 있는지 판단하여, 있으면 해당 데이터를 다시 획득한다. 🎜

🎜데이터베이스 레코드 일치🎜🎜🎜다음으로, 클라우드 기능에서 데이터베이스 데이터 추출에도 해당 변경을 적용해야 합니다. 데이터베이스 레코드의 규칙성은 다음과 같습니다. 여기서는 Match 방식을 사용하여 검색 내용을 일치시킵니다. 자세한 내용은 🎜공식 문서🎜🎜🎜를 참조하세요. 변환 후의 핵심 로직은 다음과 같습니다🎜

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

🎜동안 수행해야 하는지 구분합니다. 검색 내용이 있는지 여부에 따라 데이터를 조회하는 과정을 거치며, 검색 내용이 있는 경우에는 검색 내용의 대소문자를 무시하여 최대한 많은 내용을 일치시킵니다. 🎜🎜🎜검색 결과🎜🎜🎜🎜🎜🎜이런 방식으로 검색 내용을 쿼리할 수 있습니다. 🎜

内容页面优化

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

无数据组件

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

试图部分

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!