Analisis ringkas beberapa kaedah penulisan biasa UniApp

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js, yang boleh membangunkan aplikasi untuk berbilang platform seperti iOS, Android, H5 dan applet. Dalam pembangunan UniApp, terdapat beberapa kaedah penulisan yang lebih penting yang perlu kita ambil perhatian dan kuasai Mari kita ketahui lebih lanjut mengenainya di bawah.

1. Struktur rangka kerja

Kod sumber UniApp terutamanya terdiri daripada tiga bahagian: perpustakaan asas, pengkompil dan kod platform. Antaranya, perpustakaan asas terdiri daripada dua bahagian: uni-core dan uni-helpers, yang bertanggungjawab menyediakan sokongan logik yang diperlukan untuk UniApp Pengkompil terutamanya membina dan membungkus projek, manakala kod platform menyediakan API yang sepadan, perpustakaan komponen dan. rangka kerja UI dsb.

2. Struktur direktori

Dalam pembangunan UniApp, kami harus memberi keutamaan kepada struktur direktori projek. Dalam UniApp, anda boleh mencipta projek UniApp dengan cepat dengan mengklik "HbuilderX -> Projek UniApp Baharu" dan menambah struktur direktori secara automatik, seperti berikut:

├── App.vue
├── biasa
│ ├── api.js
│ ├── config.js
│ ├── mixin.js
│ └─── config.js
│ ├── mixin.js
│ └─── utils.js ── halaman utama.js
├── manifes.json
├── halaman
│ └── indeks
│ ├── index.vue├── pages.json
├── statik
│ └── logo.png
└── uni.scss

Antaranya, App.vu ; Direktori biasa ialah sumber awam, termasuk api.js (permintaan antara muka), config.js (maklumat konfigurasi), mixin.js (campuran), utils.js (kelas alat) dan komponen lain ialah perpustakaan komponen yang boleh menyimpan beberapa komponen pakej anda sendiri main.js ialah fail JS entri, manifest.json ialah fail konfigurasi projek, halaman ialah koleksi halaman, termasuk setiap sub-halaman dan komponen, dan pages.json ialah konfigurasi halaman fail. Folder statik ialah direktori sumber statik, yang mengandungi beberapa gambar, gaya, JS, dsb.

3. Komponen

Dalam UniApp, penggunaan komponen sangat serupa dengan yang terdapat dalam Vue.js Anda hanya perlu menggunakan teg templat untuk menentukan templat komponen. Pada masa yang sama, UniApp juga menyediakan beberapa pustaka komponen yang biasa digunakan, seperti ikon-uni (ikon), senarai-uni (senarai), bentuk-bentuk (bentuk), bar-uni-tab (bar menu bawah), dll., yang juga boleh disesuaikan mengikut keperluan.

4. Penghalaan

Dalam pembangunan UniApp, penghalaan juga merupakan bahagian yang sangat penting. Anda boleh mengkonfigurasi penghalaan dalam pages.json, seperti berikut:

{

}

"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页"
        }
    },
    {
        "path": "pages/detail/detail",
        "style": {
            "navigationBarTitleText": "详情页"
        }
    }
]

Dua laluan ditakrifkan di sini, menunjuk ke "halaman/indeks/indeks" halaman " dan "halaman/perincian/perincian". Apabila melompat, anda boleh menggunakan API seperti uni.navigateTo dan uni.redirectTo untuk melengkapkan lompatan halaman.

5 Pembolehubah dan kaedah global

Dalam pembangunan UniApp, kami biasanya perlu menentukan beberapa pembolehubah dan kaedah global untuk memudahkan pembangunan kami. Anda boleh melaksanakan panggilan global dengan mentakrifkan pembolehubah dan kaedah awam dalam App.vue dan kemudian memasangnya melalui Vue.prototype.$xxx. Seperti berikut:

<view>
    <!-- 这里是页面内容 -->
</view>

export default {
    onLoad() {
        console.log(this.globalData) //获取全局变量
    },
    globalData: {
        uname: 'admin',
        age: 20
    },
    onShow() {

    }
}
//挂载全局方法
Vue.prototype.$myfunc = function () {
    console.log('This is a global function!')
}

Salin selepas log masuk

6 Pembangunan dan penyahpepijatan

Apabila membangunkan UniApp, kami boleh menggunakan IDE HbuilderX untuk pembangunan dan penyahpepijatan. Selepas melengkapkan menulis dan menyimpan kod, anda boleh menjalankan dan nyahpepijat projek dengan mengklik "Jalankan -> Jalankan ke telefon mudah alih atau simulator". Selain itu, anda juga boleh mendayakan mod penyahpepijatan pada masa jalan dan nyahpepijat dalam alat pembangun.

Ringkasan

Di atas adalah beberapa kaedah penulisan biasa UniApp Dengan menguasai kaedah penulisan ini, kami boleh membangunkan UniApp dengan lebih cekap dan membangunkan aplikasi yang lebih baik.

Atas ialah kandungan terperinci Analisis ringkas beberapa kaedah penulisan biasa UniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!