Analisis ringkas tentang cara membangunkan komponen senarai kandungan dalam program mini

Artikel ini akan berkongsi dengan anda aplikasi praktikal pembangunan program kecil dan memperkenalkan cara membangunkan komponen senarai kandungan Saya harap ia akan membantu semua orang!

Kami membangunkan 搜索输入框 biasa untuk halaman utama, tetapi kodnya ditulis terus dalam fail halaman utama, jadi ia tidak boleh dipanggil komponen. Dalam artikel ini, kami akan memperkenalkan cara menulis komponen program kecil yang lengkap. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]

Komposisi komponen

Struktur komponen

Pertama sekali, komponen adalah serupa dengan halaman dan mempunyai folder berasingan untuk penyelenggaraan. Kami mula-mula mencipta direktori components dalam projek program mini untuk menyimpan komponen kami, dan kemudian mencipta direktori bernama search-bar untuk digunakan sebagai komponen 搜索框 kami.

Seperti yang dinyatakan di atas, komponen sebenarnya sangat serupa dengan halaman dan terdiri daripada direktori, jadi secara semula jadi kandungan yang akan dipaparkan juga ditulis oleh index.wxml. Jadi kami terus tampal bahagian sebelumnya tentang 搜索框.

Selepas menampalnya ke dalam components/search-bar/index.wxml, format kod mungkin tidak begitu baik Anda boleh mengklik kanan pada ruang kosong kandungan fail, atau pilih kod, kemudian klik 格式化文档 untuk pemformatan automatik.

Apa yang perlu diperhatikan di sini ialah jika terdapat rujukan lokasi sumber dalam fail struktur kami, selepas mengubah suai lokasi fail, kami mesti mengesahkan sama ada lokasi yang diubah suai merujuk sumber dengan betul. Sebagai contoh, di sini, kami menampal kandungan asal di bawah pages/index/index.wxml ke dalam components/search-bar/index.wxml, di mana teg image merujuk fail di bawah assets/images Kami perlu mengesahkan bahawa laluan rujukan imej di lokasi baharu masih sah.

Gaya komponen

Begitu juga, kami menampal gaya komponen yang kami tulis sebelum ini

Pengisytiharan komponen

Dengan cara ini, kami telah melengkapkan struktur dan takrif gaya komponen, tetapi alat pembangun tidak menganggap ia sebagai komponen lagi, jadi kami perlu Cipta index.json dalam direktori komponen untuk mengisytiharkan bahawa direktori ini adalah komponen yang sah Kaedahnya adalah seperti berikut.

Pertama, kita perlu menggunakan index.json dalam "component": true untuk mengisytiharkan bahawa ini ialah komponen

Kedua, kita perlu menggunakan global dalam index.js Kaedah Component() kaedah mendaftarkan komponen Parameter kaedah ini ialah objek, yang boleh mentakrifkan pelbagai kandungan yang serupa dengan halaman Untuk butiran, sila rujuk dokumen rasmi

Penggunaan komponen

Selepas melengkapkan definisi asas komponen, komponen kami boleh digunakan. Hanya memperkenalkannya di mana anda perlu menggunakan komponen Sebagai contoh, kaedah pengenalan diisytiharkan seperti berikut dalam fail konfigurasi halaman utama kami

Antaranya,

mentakrifkan komponen Nama teg adalah sama dengan komponen terbina dalam program mini "search-bar" dan input yang kami gunakan, dan kandungan berikut sepadan dengan kedudukan relatif komponen kepada perujuk semasa adalah sama seperti imej dalam teg image Carian lokasi. image

Selepas pengisytiharan rujukan komponen di atas, kita boleh menggunakan komponen dalam fail struktur halaman

Semasa proses ini, jika anda menghadapi ralat dalam konsol di penjuru kanan sebelah bawah, anda boleh menyusun semula projek dengan mengklik butang kompil di bahagian tengah atas alat pembangun untuk menulis semula dan menghuraikan pelbagai fail. Jika masih terdapat ralat selepas penyusunan, di satu pihak, anda boleh menyemak sama ada memang terdapat ralat dalam kod, dan sebaliknya, anda boleh mencuba dengan memulakan semula alat pembangun (kerana alat pembangun itu sendiri juga mempunyai pepijat tertentu, dan kadangkala masalah pelik berlaku)

Selain itu, saya telah membuat beberapa tetapan tersuai dalam tetapan alat pembangun mengikut tabiat pembangunan peribadi saya, seperti penyimpanan automatik dan lekukan kod, untuk rujukan.

Komponen Senarai Kandungan

Selepas memperkenalkan komponen tersuai yang lengkap, mari selesaikan pembangunan 内容列表组件.

Senarai kandungan jelas lebih rumit daripada kotak input carian di atas, tetapi kaedah pembangunan komponen adalah sama Kami hanya perlu membangunkan komponen mengikut peraturan ini.

Pertama, kami mencipta empat fail teras yang membentuk komponen seperti berikut, dengan index.js dan index.json adalah sama seperti yang ditulis sebelum ini.

Seterusnya, kami melengkapkan definisi elemen index.wxml dengan menulis index.wxss dan 列表组件.

Memandangkan ia adalah senarai, sintaks 循环遍历 dalam program mini akan digunakan Untuk bahagian ini, anda boleh merujuk kepada Dokumen Rasmi untuk mempelajari penggunaan khusus mengikuti.

Kemudian, kami mentakrifkan data masuk luaran yang diterima oleh komponen dalam index.js seperti berikut

Dengan cara ini , Apa yang dilalui menggunakan index.wxml dalam wx:for ialah senarai data yang dihantar secara luaran yang diterima melalui atribut index.js dalam properties. Kemudian kami segera memperkenalkan komponen pada halaman utama dan menyerahkannya kepada senarai data sebenar. Kaedah penggunaan masih dengan mengisytiharkan rujukan kepada komponen dahulu dalam index.json, dan kemudian menggunakan nama teg yang diisytiharkan semasa rujukan dalam fail halaman.

Di sini kami menghantar data untuk items yang kami takrifkan dengan mengisytiharkan atribut 内容列表组件 dan data itu datang daripada listData ditakrifkan di dalam halaman utama, ini memerlukan kami untuk mengisytiharkan data dalam index.js halaman utama data.

data dan sifat

Di sini kita bercakap tentang perbezaan antara data dan properties digunakan Ia digunakan untuk menentukan datanya sendiri di dalam halaman atau komponen, manakala data digunakan untuk menerima data masuk luaran, jadi hanya komponen yang mempunyai atribut ini. properties

Sebagai contoh, untuk

, ia memerlukan data senarai sebenar untuk dihantar secara luaran, jadi dalam 内容列表组件 ia adalah bersamaan dengan menyesuaikan parameter komponen, dan kemudian apabila menggunakan komponen secara luaran, parameter yang diisytiharkan oleh komponen boleh dihantar kepada data masuknya. properties

Data dihantar dalam

Oleh itu, kita perlu memahami apakah struktur data yang diperlukan untuk parameter komponen Sebagai contoh,

yang kita takrifkan di sini perlu dihantar dalam senarai Data, dan setiap item dalam senarai data mengandungi teks dan gambar, jadi kami mentakrifkan data berikut dalam 列表组件 pada halaman utama listData

Anda boleh melihatnya setiap item dalam senarai Satu item mesti betul-betul mematuhi struktur data yang digunakan oleh komponen kami, iaitu, setiap item data mempunyai medan

untuk memaparkan kandungan teks dan medan text untuk memaparkan imej yang disertakan teks. image

Kemudian kembali ke dalam komponen kami, kami menggunakan medan

yang mewakili setiap item data untuk mengakses item data senarai dan memaparkannya mengikut sintaks wx:for. Parameter item teg terbina dalam image juga digunakan untuk mengisytiharkan gaya saiz paparan imej. mode

dan ditulis dalam satu siri gaya

Kesan akhir halaman adalah seperti yang ditunjukkan di bawah

Akhir sekali, kami melihat perkembangan kami setakat ini melalui mesin sebenar. kesan program mini dan perbandingan dengan laman utama program mini Zhihu adalah seperti berikut.

Sebelah kiri ialah laman utama program mini Zhihu, dan sebelah kanan ialah program mini yang kami bangunkan sendiri, bukankah kesannya cukup bagus?

Ringkasan

Akhir sekali, mari kita ringkaskan apa yang kita pelajari hari ini. Malah, anda boleh melihat dengan jelas melalui direktori Hari ini kami memperkenalkan proses pembangunan 自定义组件 seperti berikut:

• Penciptaan komponen
• Takrifan dan pengisytiharan komponen
• Petikan Komponen
• data komponen dihantar ke

Melalui kaedah di atas, digabungkan dengan kaedah 页面开发 yang dinyatakan sebelum ini, kami telah meningkatkan kemahiran teras pembangunan program kecil. Selepas itu, kami boleh membangunkan halaman program kecil yang bertanggungjawab untuk fungsi yang berbeza mengikut reka bentuk kami sendiri, dan membangunkan satu siri komponen tersuai berdasarkan fungsi dan ciri setiap halaman untuk mencapai kesan gabungan fleksibel.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara membangunkan komponen senarai kandungan dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!