Ajar anda langkah demi langkah cara membangunkan komponen kotak input carian dalam program mini

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

Mari kita bercakap tentang perkembangan 组件 kali ini. Memandangkan program mini mungkin terdiri daripada banyak halaman, dan halaman yang berbeza mungkin mempunyai bahagian 相似, kita perlu membahagikan halaman tersebut kepada komponen yang berbeza secara munasabah, sama seperti sekeping 积木, dan kemudian melengkapkannya dengan menggabungkan komponen yang berbeza. pemasangan muka surat satu demi satu, inilah sebabnya wujudnya konsep pembangunan komponen. [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Latihan Praktikal

Jadi tanpa berlengah lagi, mari kita mulakan pertempuran sebenar secara langsung. Cara membahagikan halaman kepada komponen berpandukan pengalaman yang terkumpul selepas membangunkan satu siri halaman Mari kita buat beberapa halaman dahulu untuk merasainya.

Sebagai contoh, mari buat halaman utama program kecil dahulu, kebanyakan halaman utama aplikasi biasa kami adalah senarai kandungan, sebenarnya, ia mempunyai nama yang lebih profesional yang dipanggil "aliran suapan".

Sebagai contoh, dalam gambar di atas, mereka adalah laman utama program mini Weibo, Zhihu, Meituan dan Boss Direct Recruitment. Seperti yang anda lihat, ia pada asasnya terdiri daripada 搜索输入框 di bahagian atas dan senarai kandungan di bahagian utama yang boleh terus ditatal ke atas.

Pembangunan Laman Utama

Jadi mengikut idea ini, kami mula membangunkan laman utama program mini kami sendiri.

Pertama, kami membuka fail app.json, di mana item pertama yang dikonfigurasikan dalam pages ialah halaman utama program mini.

Seterusnya, kami membuka fail index.wxml halaman utama dan mengosongkannya, kemudian mula menulis kandungan halaman utama kami sendiri.

Sebelum membersihkan

Selepas membersihkan

Kita boleh menukar yang ditunjukkan dalam gambar di atas 热重载Buka, supaya anda boleh melihat kesan pengubahsuaian dalam masa nyata setiap kali anda mengubah suai kandungan halaman, tanpa perlu mengklik kompil secara manual setiap kali.

Selain itu, kami mendapati bahawa halaman utama empat program mini arus perdana di atas tidak mempunyai kandungan tajuk, jadi kami turut menukar medan app.json dalam navigationBarTitleText kepada rentetan kosong.

Komponen kotak carian

Seperti yang kami nyatakan di atas, halaman utama terdiri daripada kotak input carian di bahagian atas dan senarai di bahagian utama, yang secara semula jadi memisahkan halaman utama . Ia terbahagi kepada dua komponen 搜索输入框 内容列表, kerana kedua-dua elemen mungkin 重复使用 digunakan oleh halaman lain.

Kemudian mari kita bangunkan kotak input carian dahulu Mari kita ambil bentuk yang paling mudah sebagai contoh, seperti yang ke-2 dan ke-4 dalam applet arus perdana di atas. Iaitu, 圆角 kotak input, terdapat 搜索图标 di hujung kiri dalam kotak input, dan terdapat baris lalai 提示文字 di dalam kotak input.

Input komponen terbina dalam

Kotak input Kami akan menggunakan komponen dalaman input yang disediakan oleh program mini, dokumen boleh dilihatinput

Apabila kita membangunkan halaman atau komponen, kita harus cuba menggunakan tag view sebagai bekas pada setiap peringkat elemen untuk membungkus elemen, supaya lebih mudah untuk mengawal elemen dalam reka letak nanti.

Sebagai contoh, jika kita menulis kod di atas dalam pages/index/index.wxml, halaman akan kelihatan seperti sebelah kiri.

Di sini kami menggunakan komponen terbina dalam program mini input dan menetapkan teks gesaan lalai untuknya melalui atribut placeholder.

Seterusnya, kita perlu menggunakan beberapa kod gaya untuk menggayakan kotak carian.

Kami menambah atribut gaya pada teg elemen

Kemudian kosongkan kandungan asal dalam index.wxss, dan kemudian Menambah kod gaya kami sendiri.

Penyahpepijatan Gaya

Berikut ialah petua pembangunan yang sangat praktikal Seperti yang ditunjukkan dalam gambar di atas, kita boleh menggunakan 调试器 yang disediakan oleh alat pembangun untuk melihat struktur yang diberikan sebenar. daripada halaman dan atribut gaya, dan kami boleh mengubah suai gaya elemen halaman secara langsung di sini dan melihat kesannya dalam masa nyata. Walaupun untuk atribut warna, kita boleh mengklik pada warna semasa untuk memaparkan panel pemilihan warna dan melaraskan warna elemen seperti yang ditunjukkan di atas.

Kemudian, selepas kami melaraskan gaya halaman kepada kesan terbaik, terus pilih dan salin kod gaya dalam penyahpepijat, dan kemudian tampalkannya ke dalam index.wxss Kami sahaja .

Pengenalan ikon

Akhir sekali, kami juga perlu memaparkan ikon gaya carian di bahagian paling kiri di dalam kotak input, kemudian Mula-mula kita perlu mencari gambar gaya carian dari Internet. Adalah disyorkan untuk menggunakan iconfont laman web ini untuk menapis ikon

Selepas kami memilih ikon, kami boleh mengubah suai warna dan saiz ikon seperti yang ditunjukkan di bawah, dan kemudian muat turun.

Seterusnya, kami meletakkan gambar yang dimuat turun ke dalam folder projek program mini Terdapat banyak cara untuk membuka folder projek program mini. Contohnya, anda boleh klik kanan mana-mana fail dalam 资源管理器 dalam alatan pembangun dan pilih 在资源管理器中显示, atau klik panel butiran di penjuru kanan sebelah atas dan klik item 本地目录.

Kemudian kami mencipta folder assets baharu untuk menyimpan fail statik program mini, seperti gambar, gaya awam, dll.

Kami akan meletakkan imej carian yang baru kami muat turun ke dalam direktori assets dalam images, dan menukar nama imej kepada nama Inggeris (biasanya disyorkan untuk gunakan penamaan bahasa Inggeris untuk mengelakkan beberapa ralat penghuraian atur cara)

Kemudian kami kembali ke alat pembangun dan anda dapat melihat bahawa ikon carian yang baru disalin sudah sedia. Seterusnya, kami menggunakan kod gaya untuk memaparkannya dalam kotak input

Pertama, kita boleh menggunakan kaedah yang ditunjukkan dalam gambar di atas dan klik pada ikon di sebelah kiri atas sudut penyahpepijat untuk Lihat struktur elemen semasa halaman kami. Kaedahnya ialah dengan terlebih dahulu mengklik ikon paparan di sudut kiri atas penyahpepijat, dan kemudian gerakkan tetikus ke mana-mana kedudukan dalam pratonton program mini di sebelah kiri Anda boleh melihat bahawa panel kanan akan menyerlahkan elemen yang dipilih mengikut kedudukan dipilih di sebelah kiri Kawasan kod yang sepadan.

Melalui kaedah ini, kami dapat memahami secara intuitif struktur kod semasa halaman kami, untuk menentukan lapisan kontena mana elemen ikon kami yang baru ditambah harus diletakkan.

Susun atur kedudukan

Selepas operasi di atas, kami akhirnya mencipta kedudukan baharu dalam baris pertama di dalam bekas lapisan search-bar, iaitu tahap yang sama dengan input Satu lagi komponen terbina dalam image ditambah, dan kedudukan imej yang akan dipaparkan ditentukan melalui atribut src. Di sini, apabila anda menetapkan atribut image dalam teg src, alatan pembangun akan secara automatik menggesa anda untuk laluan yang boleh anda pilih. Memandangkan lokasi imej kami berada di luar direktori di mana fail semasa berada, kami hanya perlu memasukkan .. untuk pergi ke direktori peringkat atas pada permulaan Kemudian alat pembangun akan meminta kami fail yang berada di bahagian atas -direktori peringkat.

Akhir sekali, kami menggunakan sintaks CSS untuk menulis gaya yang munasabah dalam index.wxss untuk memaparkan ikon carian dalam kedudukan tengah menegak di sebelah kiri kotak input. Untuk sintaks tertentu, sila rujuk Dokumen berkaitan untuk pembelajaran

Pratonton peranti sebenar

Jadi selepas pembangunan di atas, halaman utama kami telah mula mengambil bentuk. Di sini kami memperkenalkan satu lagi fungsi berkuasa yang disediakan oleh alat pembangun-fungsi pratonton mesin sebenar.

Seperti yang ditunjukkan dalam rajah, klik butang 预览 di bahagian atas panel Alat pembangun akan menyusun projek program mini semasa ke dalam keadaan boleh pratonton, dan kemudian gunakan Akaun WeChat pembangun yang melog masuk ke program mini Imbas kod QR untuk melihat kesan program mini semasa pada peranti sebenar

Ringkasan<.>

Baiklah, Akhir sekali, mari kita ringkaskan apa yang kita bincangkan hari ini. Hari ini kami mula-mula memperkenalkan konsep pembangunan komponen dan mengapa pemisahan komponen diperlukan, dan memperkenalkan beberapa teknik pembangunan yang digunakan dalam membangunkan komponen melalui contoh, termasuk

Menggunakan komponen terbina dalam
Kaedah penyahpepijatan gaya
• Pengenalan sumber imej
• Pratonton peranti sebenar

Sudah tentu, artikel ini sebenarnya belum dijalankan lagi

, kerana kami Kami masih membangunkan elemen secara langsung dalam fail halaman Dalam artikel seterusnya, kami akan membahagikan halaman utama mengikut 组件开发 搜索输入框组件 untuk memperkenalkan secara terperinci kaedah membangunkan komponen program mini. 内容列表组件

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan! !

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara membangunkan komponen kotak input carian dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!