Bagaimana untuk membuat projek uni-app? Penerangan proses
Bagaimana untuk membuat projek uni-app? Artikel ini akan memberi anda penjelasan sistematik tentang proses membuat uni-app. Saya harap ia akan membantu anda!
Proses membuat uni-app:
Mengandungi sejumlah besar kemahiran penting bahagian hadapan semasa, seperti vue, applet WeChat , enkapsulasi komponen, enkapsulasi gerak isyarat mudah alih, paging data, aksios, momen, reka letak fleksibel, sass, main balik video, muat turun video dan fungsi lain. [Cadangan berkaitan: "tutorial uniapp"]
1.1.1.1. - app
uni-app ialah rangka kerja yang menggunakan sintaks vue.js untuk membangunkan semua aplikasi bahagian hadapan boleh membangunkan pelbagai perkara
juga dipanggil rangka kerja Pembangunan penuh2. >
Pengalaman pertama uni-appPengenalan kepada struktur projekGaya dan sass
Sintaks asasAcara Komponen
Kitaran hayat- 3 Asas dahulu, kemudian projek
- Timbunan teknologi yang diperlukan ialah
- html
- css
- JavaScript
WeChat applet
uni-appuni-ui- uni-api
- moment.js
- Pengenkapsulan gerak isyarat
- 4. Bina projek dengan perancah
- 1. Situasi keseluruhan Pasang
- 2 Cipta projek
- 3. Mulakan projek (WeChat applet)
Ingat untuk memasuki direktori akar
Direktori Projek 4.1npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project
npm run dev:mp-weixin
Sokongan rpx program mini dan vw dan vh h5 mempunyai sass terbina dalam konfigurasi. Anda hanya perlu memasang kebergantungan yang sepadan "npm install sass-loader node-sass "
Dalam komponen vue, tambahkan atribut "
5. Sintaks asasSintaks asas Vue
- Seperti v-bind, v-if, v-show, v-for dan seterusnya
- 6 Penggunaan acara v-on
Komponen
Komponen Penggunaan mudah Penglaluan parameter komponenSlot komponen
7.1 Penggunaan komponen yang mudah
- Takrifan komponen
- Pengenalan komponen
- Pendaftaran komponen
7.11 Komponen Takrif
- Buat komponen folder baharu dalam direktori src untuk menyimpan komponen
- Buat komponen baharu *.vue terus dalam direktori komponen
- 7.12 Pengenalan komponen
Perkenalkan komponen ke dalam halaman "import nama komponen dari'laluan komponen'"
- 7.13 Daftar Komponen
Komponen atribut ialah objek, masukkan komponen dan daftar
- 7.14 Penggunaan komponen
Dalam teg halaman, gunakan terus komponen yang diimport " "
- 7.2 Parameter lulus komponen
Ibu bapa menghantar parameter kepada anak melalui atribut
- Anak Ibu bapa melepasi parameter melalui mencetuskan acara
menggunakan data global untuk menghantar parameter dengan memasang prototaip vue
pada- Melalui globalData
- 7.21 Hantar data daripada ibu bapa kepada anak
- Halaman induk kepada anak Komponen ul-com
- menghantar data tatasusunan melalui nama atribut senarai
props
- 7.22 Kanak-kanak menghantar data kepada ibu bapa
- Komponen anak menghantar data kepada komponen induk dengan mencetuskan acara
- Komponen induk menerima data dengan peristiwa mendengar
<ul-com : list="[1,2,3,4]"> props: { list: Array },
Menulis
- ditetapkan pada acara Klik komponen anak
- Tetapkan parameter yang diluluskan dalam kaedah
Tetapkan acara mendengar dalam induk -pertemuan anak
methods: { handleclick(){ this.$emit("textchange",'来自子组件的数据');} }
<ul-com :list="[1,2,3,4]" @textChange="handleTextchange">
- Terima parameter dalam kaedah ibu bapa
- 7.3 Data kongsi global
- Kongsi data melalui prototaip Vue (dapatkan dengan ini )Kongsi data melalui globalData (gunakan getapp selepas definisi)
- vuexStoran tempatan
Slot Komponen 7.4
- Teg
- sebenarnya adalah sejenis data Jika anda ingin memindahkan teg ke sub-komponen secara dinamik, anda boleh menggunakan slot
- untuk melaksanakan ruang letak
- digunakan dalam halaman onLoad
- atau onShow bermaksud apabila halaman dimuatkan dan apabila halaman dipaparkan masing-masing adalah digunakan dalam komponen
- dilekapkanApabila komponen dipasang
- Artikel ini diterbitkan semula daripada: https://juejin.cn/post/6996561691639037983 Lagi Untuk pengetahuan berkaitan pengaturcaraan, sila lawati:
Ringkasnya, buang teg halaman induk ke halaman anak
8 >8.1 Pengenalan
Kitaran hayat rangka kerja uni-app menggabungkan kitaran hayat vue dan applet WeChat Digunakan dalam APP globalsedang dilancarkan
bermaksud apabila aplikasi bermula! !
Atas ialah kandungan terperinci Bagaimana untuk membuat projek uni-app? Penerangan proses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

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)

Topik panas



Bagaimana untuk membangunkan uni-app dalam VSCode? Artikel berikut akan berkongsi dengan anda tutorial tentang membangunkan uni-app dalam VSCode Ini mungkin tutorial terbaik dan paling terperinci. Datang dan lihat!

Bagaimana untuk menggunakan uniapp untuk membangunkan navigasi peta yang mudah? Artikel ini akan memberi anda idea untuk membuat peta mudah saya harap ia akan membantu anda!

Bagaimana untuk menggunakan uniapp untuk membangunkan permainan ular? Artikel berikut akan membimbing anda langkah demi langkah dalam melaksanakan permainan Snake dalam uniapp. Saya harap ia akan membantu anda!

antara muka uni-app, enkapsulasi kaedah global 1. Cipta fail api dalam direktori akar, buat fail api.js, baseUrl.js dan http.js dalam folder api 2.baseUrl.js kod fail exportdefault"https://XXXX .test03.qcw800.com/api/"3.http.js kod fail exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

Artikel ini akan membimbing anda langkah demi langkah dalam membangunkan pemalam kalendar uni-apl dan memperkenalkan cara pemalam kalendar seterusnya dibangunkan dari pembangunan hingga keluaran saya harap ia akan membantu anda!

Artikel ini membawa anda pengetahuan yang berkaitan tentang uniapp, yang terutamanya mengatur isu berkaitan melaksanakan fungsi pilih-semua kotak berbilang pilihan Sebab mengapa ia tidak dapat mencapai fungsi pilih-semua ialah apabila medan yang ditandakan pada kotak pilihan adalah diubah suai secara dinamik, status pada antara muka boleh berubah masa nyata, tetapi acara perubahan kumpulan kotak semak tidak boleh dicetuskan. Saya harap ia akan membantu semua orang.

Bagaimanakah uniapp melaksanakan pemuatan lungsur turun paparan skrol? Artikel berikut bercakap tentang pemuatan lungsur turun applet WeChat scroll-view Saya harap ia akan membantu semua orang.

Artikel ini membawakan anda pengetahuan yang berkaitan tentang uniapp terutamanya cara menggunakan uniapp untuk membuat panggilan dan menyegerakkan rakaman. Saya harap ia dapat membantu semua orang.
