Rumah >applet WeChat >Pembangunan program mini >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]
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.
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.
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.
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.
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 .
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.
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
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
, 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. 内容列表组件
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!