Ajar anda langkah demi langkah bagaimana untuk melaksanakan fungsi carian kandungan dalam program mini

Artikel ini akan berkongsi dengan anda pengalaman praktikal dalam pembangunan program mini dan memperkenalkan cara melaksanakan fungsi carian kandungan dalam program mini Saya harap ia akan membantu semua orang!

Sebelum ini kami melaksanakan paparan senarai kandungan halaman utama, tetapi tidak melaksanakan fungsi sebenar kotak carian di bahagian atas Dalam artikel ini, kami akan menambah yang sebenar cari ke kotak carian Fungsi. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]

Pengikatan kandungan carian

Mari kita lihat rupanya selepas kita mengklik pada kotak carian sekarang

Di sini, kami menggunakan komponen search vant, dan dokumennya memperkenalkan satu siri kaedah mengikat peristiwa untuk komponen ini.

Apa yang kami mahu gunakan ialah mencetuskan carian kandungan sebenar apabila carian ditentukan, jadi kami menambah pengikatan acara ini pada komponen search seperti berikut

Seterusnya, kami mencetak pembolehubah nilai yang terikat pada komponen carian dalam pelaksanaan tindak balas acara carian, dan kemudian melaksanakan ujian input.

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

Perlu diingatkan di sini bahawa dalam alat pembangun, untuk komponen seperti kotak input, kerana ia berada di sebelah komputer, ia tidak boleh membangkitkan antara muka kaedah input yang serupa dengan pada telefon mudah alih, jadi interaksi dengan telefon bimbit menggunakan kecil Realiti program adalah berbeza.

Dalam kes ini, kita boleh menggunakan fungsi pratonton untuk nyahpepijat pada telefon mudah alih Selepas membuka program mini pada telefon mudah alih, anda boleh mengklik ... di penjuru kanan sebelah atas untuk memaparkan panel nyahpepijat. untuk melihat output konsol.

Atau gunakan fungsi 真机调试 yang disediakan oleh alat pembangun untuk pratonton program mini pada telefon mudah alih anda dan melihat maklumat penyahpepijatan dalam masa nyata dalam alatan pembangun pada komputer.

Menyahpepijat

Selepas menyahpepijat, kami mendapati bahawa search terikat kepada value hanya akan berubah dan disimpan dalam searchValue selepas input pertama, dan nilai yang dimasukkan kemudian tidak akan mengemas kini pembolehubah ini, yang bermaksud bahawa kami tidak boleh menggunakan kandungan yang dimasukkan terkini untuk setiap carian, yang merupakan masalah.

Pengikatan Data

Penyelesaiannya juga sangat mudah, iaitu, gunakan ciri pengikatan data yang disertakan bersama program mini untuk mengikat search yang diluluskan dalam komponen Atribut 🎜> ditukar kepada value untuk membolehkan pengikatan data dua hala. model:value

Dengan cara ini, selepas kemas kini input seterusnya, nilai

akan dikemas kini pada masa yang sama untuk mencapai kesan pengubahsuaian segerak. searchValue

Pertanyaan bersyarat

Kemudian kita boleh memasukkan kandungan dalam kotak carian setiap kali, dan kita boleh menggunakan ini sebagai kata kunci untuk menanyakan kandungan senarai . Peraturan

adalah untuk mencari rekod yang mengandungi kata kunci carian kami dalam

daripada semua rekod dalam pangkalan data Sudah tentu, hanya 20 rekod akan dikembalikan pada satu masa, dan pemuatan tarik naik juga boleh disokong . text

Malah, kaedah di sini pada asasnya sama dengan kaedah pertanyaan data sebelumnya. Ia hanya menambah syarat padanan kata kunci pada asas asal.

Kami menambahkan kandungan carian sebagai parameter kepada kaedah yang asalnya digunakan untuk menyegarkan keseluruhan kandungan senarai dan menyampaikannya secara telus kepada kaedah pemprosesan fungsi awan yang digunakan untuk benar-benar menanyakan data. Pada masa yang sama, setiap kali kotak carian mengesahkan carian, ia dinilai sama ada terdapat kandungan carian, dan jika ya, data itu diperoleh semula.

Padanan rekod pangkalan data

Seterusnya, kita juga perlu membuat perubahan yang sepadan pada pengekstrakan data pangkalan data dalam fungsi awan Rekod pangkalan data akan digunakan di sini

Kaedah untuk memadankan kandungan carian untuk butiran, sila rujuk 正则匹配dokumen rasmi

Logik teras selepas transformasi adalah seperti berikut

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

Kami membezakan mengikut sama ada terdapat kandungan carian sama ada untuk melakukan pemadanan biasa dalam proses menyoal data, dan mengabaikan huruf besar kandungan carian apabila terdapat kandungan carian, untuk memadankan sebanyak mungkin kandungan.

Hasil carian

Dengan cara ini, kami boleh menanyakan kandungan carian.

内容页面优化

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

无数据组件

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

试图部分

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

展示效果

总结

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

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

Atas ialah kandungan terperinci Ajar anda langkah demi langkah bagaimana untuk melaksanakan fungsi carian kandungan dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!