Ringkasan sintaks templat WXML applet WeChat

Artikel ini membawa anda pengetahuan yang berkaitan tentang Program Mini WeChat, yang terutamanya memperkenalkan kandungan yang berkaitan tentang sintaks templat WXML, termasuk pengikatan data, pengikatan peristiwa, pemaparan bersyarat, Penyajian senarai dan isu-isu lain, mari kita ambil lihat di bawah, saya harap ia akan membantu semua orang.

[Cadangan pembelajaran berkaitan: Tutorial Pembelajaran Program Mini]

WXML Sintaks Templat- Pengikatan Data

1. Prinsip asas pengikatan data

① Takrifkan data dalam data

② dalam WXML Menggunakan data

2 dalam data mentakrifkan data halaman

dalam fail .js yang sepadan dengan halaman, tentukan data Just go kepada objek data :

3 Format tatabahasa

Untuk memaparkan dalam halaman, gunakan Misai sintaks (tanda kurung dua) untuk membalut pembolehubah . Sama seperti ungkapan interpolasi dalam vue, format sintaks ialah: 4 🎜>Senario aplikasi tatabahasa

Ikatan kandunganIkatan atributOperasi (operasi ternari, operasi aritmetik dll.)

1. 5. 🎜> Data halaman
adalah seperti berikut:
3. 🎜>
 

6. Sifat pengikat dinamik

Data pada halaman adalah seperti berikut:

                                                                                                                                                                                                 🎜>

7. >Data pada halaman adalah seperti berikut:

                                                                                                                               >

8 >

Sintaks Templat-

Pengikatan acara :

1.

Apakah itu acara

 

Acara ialah

kaedah komunikasi daripada lapisan pemaparan ke lapisan logik. Melalui peristiwa, gelagat pengguna dalam lapisan pemaparan boleh disalurkan semula ke lapisan logik untuk pemprosesan perniagaan.

2 Acara yang biasa digunakan dalam program mini

TaipIkat Kaedah penentuan

Penerangan acara

ketik

bindtap

atau ikat:ketik

Jari menyentuh dan meninggalkan serta-merta, serupa dengan

klik >Acara
input	bindinput atau ikat:input	Acara input kotak teks
ubah	bindchange atau ikat:ubah	Dicetuskan apabila status berubah

3 Senarai harta objek acara

Apabila acara panggilan balik dicetuskan, objek acara acara akan diterima Atribut terperincinya adalah seperti yang ditunjukkan dalam jadual berikut:

.

Atribut	Jenis	Penerangan
taip	String	Jenis Acara
timeStamp	Integer	halaman dibuka Bilangan milisaat berlalu sehingga acara dicetuskan
sasaran	Objek	Himpunan beberapa nilai sifat komponen yang mencetuskan peristiwa
Sasaran semasa	Objek	A koleksi beberapa nilai atribut ​​​​dari komponen semasa
perincian	Objek	Maklumat tambahan
menyentuh	Array	Acara sentuh, susunan maklumat titik sentuh yang kekal pada skrin
changedTouches	Array	Acara sentuh, susunan maklumat titik sentuh yang diubah pada masa ini

4. Perbezaan antara sasaran dan Sasaran semasa

🎜>sasaran ialah komponen sumber yang mencetuskan acara dan Sasaran semasa ialah > komponen yang terikat dengan peristiwa semasa. Contohnya:

Apabila anda mengklik butang di dalam, acara klik akan menggelembung

dalam bentuk Penyebaran luaran juga akan mencetuskan ketik pengendali acara pandangan luar. Pada masa ini, untuk bahagian luar

pandangan : 1

. sasaran

menunjuk kepada komponen sumber yang mencetuskan acara oleh itu, e.target ialah komponen butang dalaman 2

.currentTarget

menunjuk kepada komponen yang sedang mencetuskan acara, oleh itu, e.currentTarget ialah semasa lihat Komponen

5 format sintaks bindtap

dalam program mini tidak wujud HTML

onclick acara klik tetikus, tetapi balas kepada gelagat sentuhan pengguna melalui acara ketik . ①Melalui

bindtap

, anda boleh mengikat komponen ketik acara sentuh, sintaksnya adalah seperti berikut:

②

dalam halaman Fail

.js

mentakrifkan fungsi pemprosesan acara yang sepadan dan parameter acara diteruskan melalui parameter rasmi

acara (biasanya disingkatkan sebagai e) untuk menerima:  

6 dalam fungsi pengendali acara ialah data Penugasan data dalam

 Dengan memanggil kaedah this.setData(dataObject) , anda boleh memberikan halaman data Data dalam ditugaskan semula Contohnya adalah seperti berikut:

7.

Melalui parameter acara

Melalui parameter acara dalam program mini adalah istimewa, tidak boleh digunakan dalam Apabila mengikat acara, lulus parameter kepada fungsi pengendali acara. Contohnya, kod berikut tidak akan berfungsi dengan betul:

           

kerana applet akan mengikat

bindtap dianggap seragam sebagai nama acara, yang setara dengan memanggil fungsi pemprosesan acara bernama

btnHandler(123)

. Anda boleh menyediakan data-*

parameter atribut tersuai untuk komponen, di mana

* mewakili nama parameter Kod sampel adalah seperti berikut: Akhir:

1

maklumat

akan dihuraikan sebagai

nama parameter

2 nilai 2 akan dihuraikan sebagai nilai

parameter

dalam fungsi pengendali acara, lulus event.target.dataset. Nama parameter

boleh mendapatkan nilai

parameter khusus Kod sampel adalah seperti berikut:

8

bindinput

format sintaks Dalam program mini, balas acara input kotak teks melalui acara input

. Format sintaks adalah seperti berikut:

① Melalui bindinput , anda boleh mengikat peristiwa input ke kotak teks:

②Tentukan fungsi pengendali acara dalam fail .js

pada halaman:

9 Laksanakan kotak teks dan data <. penyegerakan data antara>

 

Langkah pelaksanaan:

①

Tentukan data

②

Struktur rendering

③

Gaya pengindahan

④

Mengikat input Fungsi pengendali acara

Data definisi:

Rendering struktur:

 

Gaya kecantikan:

 

Ikat input Pengendali acara:

🎜>WXML

Sintaks templat - Perenderan bersyarat:1. wx:if

Dalam program mini, gunakan wx:if="{{keadaan}}" untuk menentukan sama ada blok kod perlu diberikan:

Anda juga boleh menggunakan

wx:elif

dan wx:else untuk menambah lain Penghakiman:

Gunakan wx:if ">

2.

Gunakan wx:if  Jika anda mahu Untuk mengawal paparan dan menyembunyikan berbilang komponen pada satu masa , anda boleh menggunakan teg

untuk membalut berbilang komponen dan Gunakan wx:if atribut kawalan pada teg

 

Nota: bukan Komponen hanyalah bekas pembalut, tidak akan melakukan apa-apa pemaparan dalam halaman.

3 disembunyikan

 Dalam program mini, gunakan tersembunyi terus ="{{ keadaan }}" juga boleh mengawal paparan dan penyembunyian elemen:

4. wx:jika dan tersembunyi

①

beroperasi dalam cara yang berbeza

1 wx:if Kawal paparan dan penyembunyian elemen dengan mencipta dan mengalih keluar elemen secara dinamik

2 tersembunyi Gunakan untuk menukar gaya ( paparan: tiada/sekat; ) untuk mengawal paparan dan menyembunyikan elemen

②

Cadangan penggunaan

1 Kerap bertukar Ia disyorkan untuk menggunakan tersembunyi

2 keadaan kawalan Apabila kompleks , disyorkan untuk menggunakan wx:if Padanan wx:elif, wx:else Tukar antara menunjukkan dan menyembunyikan

WXML Sintaks templat- Perenderan senarai

1. Melalui wx:untuk

, anda boleh menggelung dan menghasilkan struktur komponen berulang berdasarkan tatasusunan yang ditentukan Contoh sintaks adalah seperti berikut:  

   Secara lalai, indeks item gelung semasa diwakili oleh indeks ; > pada masa ini Item gelung diwakili oleh item .

2 Tentukan indeks dan nama pembolehubah item semasa * 1

Gunakan

wx:for-index untuk menentukan indeks item gelung semasa >Nama pembolehubah 2 Gunakan

wx:for-item untuk menentukan item semasa Nama pembolehubah adalah seperti berikut:

3 >

🎜>

:key dalam pemaparan senarai Apabila applet melaksanakan pemaparan senarai, ia juga disyorkan untuk menyatakan a nilai kunci , dengan itu

meningkatkan kecekapan pemaparan

, kod sampel adalah seperti berikut:       [Cadangan pembelajaran berkaitan: Tutorial Pembelajaran Program Mini]

Atas ialah kandungan terperinci Ringkasan sintaks templat WXML applet WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!