Bagaimana untuk melompat ke pusat membeli-belah dari halaman log masuk uniAPP

Dalam era Internet mudah alih hari ini, peningkatan APP telah menjadi trend dan ramai orang menggunakan APP untuk memudahkan kehidupan mereka. Bagi pembangun, adalah sangat penting untuk memilih alat pembangunan yang baik uniAPP ialah pilihan pertama banyak pembangun APP Ia menyokong pembangunan berbilang platform, mudah digunakan dan mempunyai fungsi yang lengkap. Walau bagaimanapun, pembangun akan menghadapi beberapa masalah apabila menggunakan uniAPP untuk membangunkan APP, seperti cara membuat halaman log masuk melompat ke halaman pusat beli-belah. Dalam artikel ini, kami akan memperkenalkan secara ringkas cara uniAPP melaksanakan fungsi log masuk dan melompat ke pusat membeli-belah.

1. Cara melaksanakan lompat log masuk ke pusat membeli-belah

1. Prinsip pelaksanaan

Prinsip melaksanakan lompat masuk ke halaman pusat membeli-belah di uniAPP adalah untuk use Vue Routing dilaksanakan dengan mencetuskan acara lompatan berdasarkan peristiwa pengguna, dan kemudian memutuskan halaman mana yang hendak dilompat berdasarkan penghalaan.

2. Langkah pelaksanaan

Mula-mula kami menambah butang untuk melompat ke pusat beli-belah pada halaman log masuk Apabila pengguna mengklik butang, lakukan operasi berikut:

(1) Mula-mula, anda perlu memperkenalkan modul penghalaan Vue. Boleh diperkenalkan dalam fail main.js:

import Penghala daripada 'vue-router';

Vue.use(Router);

(2) dalam penghala folder Cipta fail index.js untuk menentukan laluan.

(3) Dalam fail index.js, cipta laluan, tetapkan atribut laluan kepada "/mall", dan atribut komponen kepada nama komponen halaman pusat membeli-belah.

penghala const = Penghala baharu({

laluan: [

{

laluan: '/mall',

nama: 'mall',

komponen: Mall

}

]

});

(4) diperkenalkan dalam halaman log masuk Modul Vue-router dan gunakan kaedah $router.push() untuk melompat ke pusat membeli-belah.

eksport lalai {

kaedah: {

toMall() {

this.$router.push('/mall');

}

}

}

2. Cara menerima parameter pada halaman pusat membeli-belah

Apabila halaman log masuk melompat ke pusat membeli-belah, anda mungkin perlu membawa beberapa parameter. Pada masa ini, anda boleh lulus parameter dalam alamat lompat dan menerima parameter dalam halaman pusat membeli-belah. Kaedah pelaksanaan khusus adalah seperti berikut:

(1) Lulus parameter apabila melompat ke halaman log masuk.

ini.$router.push({

nama: 'mall',

params: {

id: 1,

nama: 'Mall',

}

});

(2) Terima parameter dalam halaman pusat beli-belah.

eksport lalai {

props: ['id', 'name '],

}

3. Bagaimana untuk mendapatkan maklumat log masuk di halaman pusat membeli-belah

Dalam pembangunan sebenar, pusat membeli-belah keperluan halaman Hanya dengan mendapatkan maklumat log masuk pengguna anda boleh melakukan beberapa operasi, seperti mendapatkan maklumat troli beli-belah pengguna, pesanan, dsb. Pada masa ini, kami boleh menyimpan maklumat pengguna dalam cache tempatan semasa log masuk, dan kemudian mendapatkan maklumat log masuk melalui cache tempatan pada halaman pusat membeli-belah.

Kaedah pelaksanaan khusus adalah seperti berikut:

(1) Apabila log masuk berjaya, simpan maklumat pengguna dalam cache setempat.

uni.setStorageSync('userInfo', JSON.stringify(userInfo));

(2) Dapatkan maklumat pengguna daripada halaman pusat beli-belah.

eksport lalai {

data() {

pulangan {

maklumat pengguna: null,

}

},

dicipta() {

this.getUserInfo();

},

kaedah: {

getUserInfo() {

let userInfo = uni.getStorageSync('userInfo');

if (userInfo) {

this.userInfo = JSON.parse(userInfo);

}

}

}

}

Melalui langkah di atas, kita boleh merealisasikan fungsi melompat dari halaman log masuk uniAPP ke halaman pusat membeli-belah, dan pada masa yang sama menyelesaikan masalah bagaimana untuk menerima parameter dan mendapatkan log masuk maklumat dalam halaman pusat membeli-belah. Saya harap artikel ini dapat membantu pembangun uniAPP.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke pusat membeli-belah dari halaman log masuk uniAPP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!