Bagaimana untuk melaksanakan lompat halaman dan memindahkan nilai dalam uniapp

Dengan pembangunan Internet mudah alih, pembangunan APP telah mendapat populariti tertentu Terdapat banyak kesukaran teknikal dalam pembangunan APP, antaranya lompatan halaman dan pemindahan parameter merupakan salah satu teknologi yang mesti dikuasai. Sebagai rangka kerja pembangunan berbilang terminal, uniapp mempunyai pelaksanaan lonjakan halaman dan pemindahan nilai yang lebih mudah dan mudah. Artikel ini akan menumpukan pada kaedah melompat dan menghantar nilai pada halaman uniapp.

1. Lompat halaman Uniapp

Terdapat dua cara untuk melompat ke halaman uniapp Satu ialah melompat ke halaman melalui bar tab di bahagian bawah, dan satu lagi ialah melompat ke halaman melalui perubahan kod.

1. Lompat halaman melalui bar tab bawah

Dalam rangka kerja uniapp, lompatan halaman boleh dicapai melalui bar tab bawah terbina dalam uniapp. Konfigurasikan bar tab bawah dalam fail pages.json, dan tambahkan laluan halaman yang hendak dilompat dalam bar tab untuk mencapai lompatan halaman.

Berikut ialah fail pages.json yang mudah untuk mengkonfigurasi kod untuk bar tab bawah:

{
  "pages": [
    //tab栏页面
    {
      "path": "pages/index/index",
      "name": "index",
      "iconPath": "static/img/tab-home.png",
      "selectedIconPath": "static/img/tab-home-selected.png"
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "iconPath": "static/img/tab-mine.png",
      "selectedIconPath": "static/img/tab-mine-selected.png"
    }
  ],
  "globalStyle": {
    "navigationBarTitleText": "uni-app"
  },
  "tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#333",
    "selectedColor": "#007aff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/img/tab-home.png",
        "selectedIconPath": "static/img/tab-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/img/tab-mine.png",
        "selectedIconPath": "static/img/tab-mine-selected.png"
      }
    ]
  }
}

2. Laksanakan kod lompat halaman

Keperluan untuk lompat halaman kod Gunakan kaedah uni.navigateTo dan uni.redirectTo yang disediakan oleh rangka kerja uniapp. Yang pertama menyimpan halaman semasa dan melompat ke halaman tertentu dalam aplikasi, manakala yang terakhir menutup halaman semasa dan melompat ke halaman tertentu dalam aplikasi.

Berikut ialah contoh kod untuk melaksanakan kod lompat halaman:

//保留当前页面，并跳转到某个页面
uni.navigateTo({
    url: 'pages/detail/detail?id=123'
});

//关闭当前页面，并跳转到某个页面
uni.redirectTo({
    url: 'pages/login/login'
});

//返回上一页面
uni.navigateBack();

2 Melepasi nilai dari halaman uniapp

Dalam beberapa senario, kami perlu memindahkan data. daripada halaman Dilalui ke halaman lain. Untuk pemindahan nilai halaman uniapp, dua kaedah biasa pada bahagian hadapan sering digunakan: Pemindahan parameter URL dan pengurusan keadaan Vuex.

1. Parameter penghantaran URL

Dalam uniapp, kami juga boleh menyambungkan data yang perlu dihantar sebagai parameter semasa melompat ke halaman sasaran alamat URL, dan kemudian dapatkannya melalui objek $Route dalam halaman sasaran.

Berikut ialah contoh kod mudah untuk menghantar parameter URL:

//Lompat ke halaman sasaran dan lulus id sebagai parameter
uni.navigateTo({
url : '/pages/detail/detail?id=12'
});

//Dapatkan parameter dalam halaman sasaran
eksport lalai {
data () {

rreee

},
onLoad (pilihan) {

return {
  id: ''
}

}
}

this.id = options.id

Dalam kod di atas, objek kedai global pertama kali ditakrifkan dan keadaan ditakrifkan Pembolehubah dan kaedah mutasi untuk mengemas kini data dalam keadaan. Apabila halaman yang perlu memindahkan data perlu mengubah suai data, panggil kaedah mutasi untuk mengemas kini data dalam keadaan. Apabila halaman yang perlu mendapatkan data perlu mendapatkan data, kaedah mapState dipanggil melalui atribut yang dikira untuk mendapatkan data dalam keadaan.

Ringkasan:

Di atas ialah dua kaedah untuk lompatan halaman uniapp dan pemindahan nilai, penghantaran parameter URL dan pengurusan keadaan Vuex Semasa proses pembangunan aplikasi, kaedah yang sesuai harus dipilih mengikut perniagaan Melaksanakan lompatan halaman dan pemindahan data untuk mencapai aplikasi yang cekap, stabil dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompat halaman dan memindahkan nilai dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!