Mari kita bincangkan tentang cara pemula menggunakan uniapp

Apabila pasaran aplikasi mudah alih berkembang, semakin banyak syarikat atau individu mula membangunkan aplikasi mudah alih mereka sendiri. Walau bagaimanapun, banyak pembangun dihalang oleh masalah seperti mempelajari pelbagai bahasa pengaturcaraan, menyesuaikan diri dengan pelbagai sistem telefon mudah alih dan skrin dengan saiz yang berbeza. Rangka kerja pembangunan merentas platform seperti pisau tentera Switzerland telah wujud. Ia merupakan rangka kerja pembangunan yang boleh dijalankan pada berbilang platform, membolehkan pembangun membangunkan aplikasi platform penuh yang boleh digunakan untuk berbilang platform di bawah satu kod.

uniapp adalah berdasarkan rangka kerja Vue dan menyusun kod sumbernya ke dalam aplikasi asli untuk platform yang berbeza. Platform yang disokong termasuk: iOS, Android, H5, program mini, apl pantas, apl, dsb. Artikel ini akan membimbing pemula tentang cara menggunakan uniapp.

Pasang uniapp

Pertama sekali, sebelum memasang uniapp, anda perlu memasang persekitaran Node.js dan pastikan versinya ialah 8.0 atau lebih tinggi.

Selepas memasang persekitaran Node.js, kami boleh menggunakan baris arahan npm (alat pengurusan pakej Node.js) untuk memasang alat perancah uniapp.

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

Dengan cara ini, anda boleh berjaya memasang uniapp dan mencipta projek awal my-project.

Struktur direktori uniapp

Selepas mencipta projek, mari kita lihat struktur direktori projek. Folder utama projek termasuk:

• komponen: folder komponen storan, berakhir dengan akhiran .vue.
• halaman: Folder halaman storan, berakhir dengan akhiran .vue.
• statik: Simpan fail statik, seperti gambar dan fon, dsb.
• nyahbungkus: folder yang dijana selepas projek dibungkus.
• App.vue: Halaman utama keseluruhan aplikasi.
• main.js: fail kemasukan keseluruhan aplikasi.

Menulis aplikasi uniapp

Kami telah berjaya memasang uniapp dan mencipta projek awal, jadi seterusnya, mari tulis beberapa kod mudah.

Buat halaman

Buat fail vue baharu dalam folder halaman projek, seperti home.vue. Tulis kod berikut dalam fail:

<template>
  <view class="content">
    <text>{{ greeting }}</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        greeting: 'Hello uniapp!'
      }
    }
  }
</script>

Dengan cara ini, kami telah mencipta halaman baharu.

Navigasi ke halaman lain

Seterusnya, katakan kita mahu mengklik butang di halaman 1 dan melompat ke halaman 2. Kita boleh menambah kod berikut pada halaman 1:

<button @click="goToPage2">Go to page 2</button>

Apabila butang diklik, kita perlu menambah kod berikut pada teg skrip halaman 1:

methods: {
  goToPage2() {
    uni.navigateTo({
      url: '/pages/page2.vue'
    })
  }
}

Dalam dengan cara ini, kita boleh Lompat dari halaman 1 ke halaman 2.

Pengenalan gambar

Andaikan kita perlu memperkenalkan gambar ke dalam halaman anda perlu menyimpan gambar dalam folder statik dahulu, dan kemudian menggunakan laluan relatif untuk merujuknya dalam .vue. fail.

<template>
  <view>
    <image :src="`/static/${image}`" mode="aspectFit"></image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        image: 'image.jpg'
      }
    }
  }
</script>

Mulakan permintaan rangkaian

Dapatkan permintaan:

uni.request({
  url: 'https://www.xxx.com/api/list',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

Permintaan siaran:

uni.request({
  url: 'https://www.xxx.com/api/list',
  method: 'POST',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

Jalankan uniapp

Selepas melengkapkan penulisan kod di atas, kita perlu menjalankan arahan berikut dalam baris arahan:

npm run dev:%PLATFORM%

%PLATFORM% mewakili platform yang diperlukan, anda boleh mengisi iOS, Android, dsb. di sini. Selepas menjalankan arahan di atas, anda boleh pratonton kesan projek pada simulator atau mesin sebenar.

Ringkasan

uniapp menyediakan pembangun dengan penyelesaian pembangunan merentas platform, mengurangkan kos pembangunan dan meningkatkan kecekapan pembangunan. Menggunakannya, pembangun hanya perlu menguasai satu bahasa pengaturcaraan untuk membangunkan aplikasi platform penuh pada berbilang platform, membantu pembangun menjalankan operasi pembangunan dengan lebih cekap.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara pemula menggunakan uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!