uniapp melompat dan melepasi parameter untuk menukar tajuk

Dengan peningkatan aplikasi mudah alih dan peningkatan dalam bilangan pengguna, semakin ramai pembangun memilih untuk menggunakan uniapp sebagai rangka kerja pembangunan merentas platform. Dalam proses pembangunan sebenar, kita sering menghadapi keperluan untuk melompat ke halaman dan lulus parameter Pada masa yang sama, kita juga perlu menukar tajuk mengikut kandungan halaman yang berbeza. Jadi, artikel ini akan memperkenalkan cara melaksanakan fungsi parameter melompat dan menukar tajuk dalam uniapp.

1 Lompatan laluan dalam uniapp

Uniapp ialah rangka kerja berdasarkan Vue.js, dan lompatan laluannya pada asasnya sama dengan lompatan Vue.js. Dalam uniapp, kita boleh menggunakan kaedah uni.navigateTo() untuk melompat ke halaman, dan kita juga boleh menggunakan kaedah uni.navigateBack() untuk kembali ke halaman sebelumnya. Perlu diingat bahawa apabila menggunakan simulator uni-app di bahagian H5 (halaman web), kaedah uni.navigateBack() tidak boleh digunakan.

Berikut ialah contoh kod untuk melompat ke halaman sasaran:

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

2 Lulus parameter

Dalam pembangunan sebenar, kita selalunya perlu menghantar data antara halaman. Sebagai contoh, selepas log masuk, kami perlu memaparkan nama pengguna dan avatar pengguna pada halaman pusat peribadi. Dalam uniapp, lulus parameter adalah sangat mudah, kita hanya perlu menambah parameter dalam pautan lompat.

Berikut ialah kod sampel untuk menghantar parameter:

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john'
});

Dalam halaman sasaran (iaitu targetPage), kita boleh menggunakan kaedah uni.getStorageSync() untuk mendapatkan parameter yang diluluskan. Berikut ialah kod sampel untuk mendapatkan parameter:

onLoad: function (options) {
    console.log(options.id);    // 输出：123
    console.log(options.name);  // 输出：john
}

Perlu diambil perhatian bahawa apabila menghantar parameter, adalah disyorkan untuk menggunakan kaedah encodeURIComponent() untuk pengekodan bagi mengelakkan aksara bercelaru. Dalam halaman sasaran, kita boleh menggunakan kaedah decodeURIComponent() untuk menyahkod.

3. Tukar tajuk

Dalam uniapp, kami boleh memaparkan kandungan halaman dengan lebih baik dengan menetapkan tajuk halaman, membolehkan pengguna memahami kandungan yang dibentangkan pada halaman semasa dengan lebih mudah. Anda boleh menetapkan sifat "navigationBarTitleText" dalam fail page.json atau gunakan kaedah uni.setNavigationBarTitle().

Berikut ialah contoh kod untuk menetapkan tajuk halaman:

// 在page.json文件中设置页面标题
{
  "navigationBarTitleText": "页面标题"
}

// 使用uni.setNavigationBarTitle方法设置页面标题
uni.setNavigationBarTitle({
  title: '页面标题'
});

Perlu diambil perhatian bahawa:

1. Jika anda menetapkan tajuk bar navigasi dalam fail page.json, Akan menulis ganti set tajuk melalui kaedah uni.setNavigationBarTitle() dalam fail js.
2. Ia hanya berkuat kuasa pada halaman semasa Anda perlu menetapkan semula tajuk setiap kali anda memasuki halaman baharu.

4 Laksanakan parameter lompat dan tukar tajuk

Untuk keperluan melepasi parameter dan menukar tajuk semasa melompat ke halaman, kita boleh mencapainya dengan cara berikut: <.>

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john',
  success: function () {
    uni.setNavigationBarTitle({
      title: '目标页面标题'
    });
  }
});

Perlu diingatkan bahawa tajuk halaman sasaran harus ditetapkan dalam fungsi panggil balik lompat yang berjaya, jika tidak, tajuk mungkin tidak berjaya diubah suai.

5. Ringkasan

Artikel ini memperkenalkan cara melaksanakan operasi asas lompat halaman, hantaran parameter dan perubahan tajuk dalam uniapp. Pembangun boleh memperibadikan kod selanjutnya mengikut keperluan dalam projek sebenar. Semasa pembangunan, tidak kira apa keperluannya, anda boleh mencari cara untuk melaksanakannya dalam uniapp.

Atas ialah kandungan terperinci uniapp melompat dan melepasi parameter untuk menukar tajuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!