Bagaimana untuk mengubah suai tajuk halaman dalam uniapp

Dalam uniapp, kita selalunya perlu mengubah suai tajuk halaman. Sebagai contoh, apabila melaksanakan fungsi perkongsian WeChat, anda perlu menetapkan tajuk perkongsian dengan mengubah suai tajuk halaman. Di bawah ini saya akan memperkenalkan secara terperinci bagaimana untuk mengubah suai tajuk halaman dalam uniapp.

Pertama sekali, dalam uniapp, kami boleh menggunakan pemalam vue-meta-info untuk mengubah suai tajuk halaman, penerangan, kata kunci dan maklumat meta yang lain. Penggunaan pemalam ini adalah sama seperti dalam projek Vue biasa. Selepas pemasangan, dalam komponen yang perlu mengubah suai tajuk, kita boleh menggunakan kod berikut untuk menetapkan tajuk halaman:

export default {
  name: 'MyComponent',
  metaInfo() {
    return {
      title: '页面标题'
    }
  }
}

Antaranya, nama mewakili nama komponen, yang digunakan sebagai awalan tajuk halaman, dan kaedah metaInfo() mengembalikan objek yang mengandungi maklumat meta Kita boleh menetapkan atribut tajuk dalam objek ini untuk mengubah suai tajuk halaman.

Perlu diambil perhatian bahawa apabila menggunakan pemalam vue-meta-info, anda perlu mendaftarkan pemalam secara global dalam main.js:

import Vue from 'vue'
import VueMeta from 'vue-meta-info'
Vue.use(VueMeta)

Selain daripada vue-meta-info plug-in, kami Anda juga boleh mengubah suai tajuk halaman menggunakan bar navigasi tersuai dan konfigurasi halaman yang disediakan oleh uni-app. Kaedah khusus adalah seperti berikut:

1. Bar navigasi tersuai

Dalam uni-app, kami boleh mengubah suai tajuk halaman dengan menetapkan bar navigasi tersuai. Kami boleh menambah kod berikut pada templat teratas komponen halaman:

<template>
  <view>
    <custom-navigation :title="title"></custom-navigation>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import CustomNavigation from '@/components/custom-navigation'
export default {
  components: { CustomNavigation },
  data() {
    return {
      title: '页面标题'
    }
  }
}
</script>

Dalam kod ini, kami memperkenalkan komponen bar navigasi tersuai dan menggunakan atribut tajuk untuk menetapkan tajuk halaman. Perlu diingatkan bahawa atribut tajuk di sini ialah atribut komponen bar navigasi tersuai dan perlu ditakrifkan dalam definisi komponen:

export default {
  name: 'CustomNavigation',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 自定义返回事件
    handleClickBack() {
      uni.navigateBack()
    }
  }
}

Dalam komponen bar navigasi tersuai ini, kami mentakrifkan tajuk atribut props , digunakan untuk menerima tajuk halaman yang diluluskan oleh komponen induk. Pada masa yang sama, kami juga boleh menambah kod perniagaan kami sendiri pada komponen bar navigasi tersuai ini, seperti butang pulang tersuai, dsb.

2. Konfigurasi halaman

Kami juga boleh menetapkan maklumat konfigurasi bebas untuk setiap halaman dalam fail pages.json dalam uni-app. Sebagai contoh, kami boleh menambah kod berikut pada fail pages.json untuk menetapkan tajuk halaman:

{
  "path": "pages/my-page/my-page",
  "style": {
    "navigationBarTitleText": "页面标题"
  }
}

Dalam maklumat konfigurasi ini, kami mengubah suai tajuk halaman dengan menetapkan atribut navigationBarTitleText. Perlu diingatkan bahawa kaedah ini hanya digunakan pada halaman asal uni-app Untuk komponen halaman uni-app, anda perlu menggunakan pemalam vue-meta-info atau bar navigasi tersuai untuk mengubah suainya.

Ringkasnya, kami boleh mengubah suai tajuk halaman dalam uniapp melalui pemalam vue-meta-info, bar navigasi tersuai dan konfigurasi halaman. Dalam pembangunan sebenar, kita boleh memilih kaedah yang berbeza mengikut senario tertentu untuk meningkatkan kecekapan pembangunan kita.

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