applet WeChat
Pembangunan program mini
Ajar anda langkah demi langkah bagaimana untuk melaksanakan fungsi carian kandungan dalam program mini
Ajar anda langkah demi langkah bagaimana untuk melaksanakan fungsi carian kandungan dalam program mini
Nov 16, 2021 pm 07:03 PM
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('搜索內(nèi)容', 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 真機(jī)調(diào)試 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
akan dikemas kini pada masa yang sama untuk mencapai kesan pengubahsuaian segerak. searchValue
daripada semua rekod dalam pangkalan data Sudah tentu, hanya 20 rekod akan dikembalikan pada satu masa, dan pemuatan tarik naik juga boleh disokong . text
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
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
內(nèi)容頁面優(yōu)化
最后，我們優(yōu)化一下首頁的展示效果。
無數(shù)據(jù)組件
很多頁面都有可能是數(shù)據(jù)列表的形式，而其各自在加載完所有數(shù)據(jù)后需要展示在底部的“沒有更多內(nèi)容”字樣可能不同，所以我們將這部分展示封裝成一個可供復(fù)用的自定義組件。
試圖部分
<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;
}組件參數(shù)
Component({
properties: {
text: {
type: String,
value: '沒有更多內(nèi)容了'
}
}
})展示效果
總結(jié)
這篇，我們實(shí)現(xiàn)了搜索框功能，將搜索框中輸入的內(nèi)容作為搜索關(guān)鍵字，從而在數(shù)據(jù)庫中查找包含關(guān)鍵字的記錄進(jìn)行展示。另外，我們還將“沒有更多內(nèi)容”封裝可供復(fù)用的組件。
更多編程相關(guān)知識，請?jiān)L問：編程入門??！
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!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bangunkan applet WeChat menggunakan Python
Jun 17, 2023 pm 06:34 PM
Dengan populariti teknologi Internet mudah alih dan telefon pintar, WeChat telah menjadi aplikasi yang sangat diperlukan dalam kehidupan orang ramai. Program mini WeChat membenarkan orang ramai menggunakan program mini secara langsung untuk menyelesaikan beberapa keperluan mudah tanpa memuat turun dan memasang aplikasi. Artikel ini akan memperkenalkan cara menggunakan Python untuk membangunkan applet WeChat. 1. Persediaan Sebelum menggunakan Python untuk membangunkan applet WeChat, anda perlu memasang perpustakaan Python yang berkaitan. Adalah disyorkan untuk menggunakan dua perpustakaan wxpy dan itchat di sini. wxpy ialah mesin WeChat
Laksanakan kesan flip kad dalam program mini WeChat
Nov 21, 2023 am 10:55 AM
Melaksanakan kesan flipping kad dalam program mini WeChat Dalam program mini WeChat, melaksanakan kesan flipping kad ialah kesan animasi biasa yang boleh meningkatkan pengalaman pengguna dan daya tarikan interaksi antara muka. Yang berikut akan memperkenalkan secara terperinci cara melaksanakan kesan khas flipping kad dalam applet WeChat dan memberikan contoh kod yang berkaitan. Pertama, anda perlu menentukan dua elemen kad dalam fail susun atur halaman program mini, satu untuk memaparkan kandungan hadapan dan satu untuk memaparkan kandungan belakang Kod sampel khusus adalah seperti berikut: <!--index.wxml-. ->&l
Alipay melancarkan program mini 'Chinese Character Picking-Rare Characters' untuk mengumpul dan menambah pustaka aksara yang jarang ditemui
Oct 31, 2023 pm 09:25 PM
Menurut berita dari laman web ini pada 31 Oktober, pada 27 Mei tahun ini, Ant Group mengumumkan pelancaran "Projek Pemilihan Watak Cina", dan baru-baru ini membawa kemajuan baharu: Alipay melancarkan program mini "Pemilihan Watak Cina-Watak Biasa" untuk mengumpul koleksi daripada masyarakat Watak nadir menambah pustaka aksara jarang dan memberikan pengalaman input yang berbeza untuk aksara jarang untuk membantu memperbaik kaedah input aksara jarang dalam Alipay. Pada masa ini, pengguna boleh memasukkan applet "Watak Tidak Biasa" dengan mencari kata kunci seperti "Pengambilan aksara Cina" dan "aksara jarang". Dalam program mini, pengguna boleh menghantar gambar aksara jarang yang belum dikenali dan dimasukkan oleh sistem Selepas pengesahan, jurutera Alipay akan membuat entri tambahan ke dalam perpustakaan fon. Laman web ini mendapati bahawa pengguna juga boleh mengalami kaedah input pemisahan perkataan terkini dalam program mini Kaedah input ini direka untuk perkataan yang jarang dengan sebutan yang tidak jelas. Pembongkaran pengguna
Bolehkah program kecil menggunakan tindak balas?
Dec 29, 2022 am 11:06 AM
Program mini boleh menggunakan react. Cara menggunakannya: 1. Laksanakan pemapar berdasarkan "react-reconciler" dan jana DSL 2. Buat komponen program mini untuk menghuraikan dan membuat DSL 3. Pasang npm dan laksanakan Build; npm dalam alat; 4. Perkenalkan pakej ke halaman anda sendiri, dan kemudian gunakan API untuk menyelesaikan pembangunan.
Cara uniapp mencapai penukaran pantas antara program mini dan H5
Oct 20, 2023 pm 02:12 PM
Bagaimana uniapp boleh mencapai penukaran pantas antara program mini dan H5 memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet mudah alih dan populariti telefon pintar, program mini dan H5 telah menjadi bentuk aplikasi yang sangat diperlukan. Sebagai rangka kerja pembangunan merentas platform, uniapp boleh dengan cepat merealisasikan penukaran antara program kecil dan H5 berdasarkan set kod, meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan cara uniapp boleh mencapai penukaran pantas antara program mini dan H5, dan memberikan contoh kod khusus. 1. Pengenalan kepada uniapp unia
Ajar anda cara menggunakan mesej templat akaun awam dalam program mini (dengan idea terperinci)
Nov 04, 2022 pm 04:53 PM
Artikel ini membawakan kepada anda beberapa isu berkaitan tentang program mini WeChat terutamanya cara menggunakan mesej templat akaun dalam program mini. Saya harap ia dapat membantu semua orang.
Tutorial menulis program sembang mudah dalam Python
May 08, 2023 pm 06:37 PM
Idea pelaksanaan x01 Penubuhan pelayan Pertama, pada bahagian pelayan, soket digunakan untuk menerima mesej Setiap kali permintaan soket diterima, utas baharu dibuka untuk menguruskan pengedaran dan penerimaan mesej Pada masa yang sama, terdapat pengendali untuk menguruskan semua Thread, dengan itu merealisasikan pemprosesan pelbagai fungsi ruang sembang Penubuhan pelanggan x02 adalah lebih mudah daripada pelayan Fungsi pelanggan hanya untuk menghantar dan menerima mesej, dan untuk memasukkan aksara tertentu mengikut peraturan tertentu. Ini membolehkan penggunaan fungsi yang berbeza, di sisi pelanggan, anda hanya perlu menggunakan dua utas, satu didedikasikan untuk menerima mesej, dan yang lain didedikasikan untuk menghantar mesej adalah kerana, hanya
Kedudukan geografi dan paparan peta menggunakan PHP dan program mini
Jul 04, 2023 pm 04:01 PM
Kedudukan geolokasi dan paparan peta PHP dan program mini Kedudukan geolokasi dan paparan peta telah menjadi salah satu fungsi yang diperlukan dalam teknologi moden. Dengan populariti peranti mudah alih, permintaan orang ramai untuk kedudukan dan paparan peta juga meningkat. Semasa proses pembangunan, PHP dan applet adalah dua pilihan teknologi biasa. Artikel ini akan memperkenalkan anda kepada kaedah pelaksanaan kedudukan lokasi geografi dan paparan peta dalam program PHP dan mini, serta melampirkan contoh kod yang sepadan. 1. Geolokasi dalam PHP Dalam PHP, kita boleh menggunakan geolokasi pihak ketiga
