Bagaimana untuk menyediakan halaman pendaratan dalam uniapp

Dengan pembangunan Internet mudah alih yang mendalam, semakin banyak syarikat memilih untuk membina APP mereka sendiri untuk meningkatkan pengalaman pengguna dan imej jenama. Untuk mengurangkan kos pembangunan dan meningkatkan kecekapan pembangunan, banyak syarikat memilih untuk menggunakan rangka kerja pembangunan merentas platform untuk membina APP, dan Uniapp ialah rangka kerja sumber terbuka yang sangat baik di kalangan mereka.

Apabila membina aplikasi Uniapp, kita perlu menentukan halaman kemasukan, iaitu halaman pertama yang dimuatkan selepas aplikasi dilancarkan, biasanya dipanggil halaman pendaratan atau halaman utama. Dalam artikel ini, kami akan memperincikan cara membuat dan menyediakan halaman pendaratan untuk aplikasi Uniapp anda.

Langkah pertama: Buat projek Uniapp

Muat turun versi terkini Uniapp dari tapak web rasmi Uniapp dan pasangkannya dalam persekitaran setempat anda:

$ npm install --global @vue/cli@3.0.0-beta.10
$ vue create -p dcloudio/uni-preset-vue my-project

Masukkan di atas arahan pada baris arahan , anda boleh membuat projek uni-app.

Langkah 2: Buat halaman pendaratan

Dalam direktori src, kami boleh mencipta halaman vue halaman utama kami sendiri. Anda boleh memilih editor kegemaran anda untuk menulis Di sini kami menggunakan editor HbuilderX untuk mencipta fail index.vue adalah seperti berikut:

<template>
  <view class="container">
    <text class="text">这是我的Uniapp应用程序的落地页</text>
  </view>
</template>

<style>
  .container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 24px;
  }
</style>

Ringkasnya, kami mencipta teg bekas dan teg teks. , bekas digunakan untuk memusatkan kandungan teks dan menjadikannya kelihatan berpusat. Untuk tujuan demonstrasi di sini, kandungan teks yang kami tetapkan hanyalah "Ini adalah halaman pendaratan aplikasi Uniapp saya".

Langkah 3: Sediakan halaman pendaratan

Selepas kami membuat halaman pendaratan, kami perlu memberitahu aplikasi Uniapp bahawa ini adalah halaman kemasukan kami dan perlu dikonfigurasikan dalam pages.json fail. Buka fail pages.json dan tambah kod berikut:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  }
}

Dalam fail pages.json ini, kami mentakrifkan semua halaman aplikasi, hanya terdapat halaman "indeks" yang baru kami buat. Sifat "navigationBarTitleText" digunakan untuk menetapkan teks tajuk bar navigasi Selain itu, kita juga harus menetapkan gaya bar navigasi global.

Langkah 4: Tetapkan halaman permulaan aplikasi

Kami telah menetapkan halaman pendaratan, tetapi kami juga perlu memberitahu Uniapp apakah halaman permulaan aplikasi itu. Tambahkan kandungan berikut pada fail pages.json:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      }
    ]
  },
  "launchPage": {
    "path": "pages/index/index"
  }
}

Di sini kami menggunakan atribut tabBar dan launchPage. tabBar digunakan untuk menentukan bar navigasi bawah aplikasi, dan launchPage digunakan untuk menetapkan halaman pelancaran aplikasi. Kami menetapkan halaman permulaan kepada halaman "indeks" yang baru kami buat.

Di sini kita juga perlu menentukan beberapa sifat untuk bar navigasi bawah aplikasi Hanya satu "halaman utama" ditakrifkan di sini tentukan navigasi Ikon yang sepadan dengan bar dan ikon keadaan aktif.

Langkah 5: Lancarkan aplikasi

Sekarang kami telah menyediakan halaman pendaratan dan halaman permulaan, kami boleh melancarkan aplikasi untuk melihat kesannya. Masukkan arahan berikut dalam konsol arahan untuk memulakan aplikasi:

$ npm run dev:%PLATFORM%

%PLATFORM% di sini mewakili platform yang anda gunakan kemudian, yang boleh menjadi h5, app-plus, mp-weixin dan platform lain .

Kini, kami telah berjaya mencipta dan menyediakan halaman pendaratan aplikasi Uniapp. Sama ada anda sedang membina aplikasi web atau aplikasi mudah alih merentas platform, Uniapp ialah rangka kerja pembangunan yang berkuasa yang membolehkan anda mencipta aplikasi yang mengagumkan.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan halaman pendaratan dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!