Ajar anda langkah demi langkah cara melaksanakan penghalaan dinamik dan bar tab dinamik berdasarkan rangka kerja uniapp

Bagaimana untuk melaksanakan penghalaan dinamik dan bar tab dinamik berdasarkan rangka kerja uniapp? Artikel ini akan memperkenalkan anda kepada pertempuran sebenar penghalaan dinamik uniapp dan mengajar anda langkah demi langkah cara melaksanakan penghalaan dinamik dalam uniapp.

uniapp agak mudah dan pantas untuk membangunkan apl Tutorial tapak web rasmi sangat terperinci dan anda boleh menemui jawapan kepada hampir semua soalan. Terdapat juga banyak tutorial pengenalan di Internet Terdapat beberapa tutorial video tentang Bilik Darjah Tencent dan Bilibili.

Artikel ini menganggap bahawa pembaca pada dasarnya telah menguasai kemahiran pembangunan pengenalan uniapp Jika anda masih belum menguasai uniapp, tetapi anda sudah bersedia untuk menjalankan pembangunan yang berkaitan, mulakan sahaja dengan dokumentasi rasmi dan gabungkannya dengan. operasi video sebenar yang disyorkan di atas semuanya bagus. Okey, mari kita ke topik artikel ini - Cara melaksanakan penghalaan dinamik dan bar tab dinamik berdasarkan rangka kerja uniapp.

Analisis Situasi

Terdapat Vue Router pemalam penghalaan pada vue projek, dan semua laluan adalah Ia adalah pengurusan bersatu, yang boleh memintas dan mengawal tindakan seterusnya secara seragam, tetapi pada uniapp, keadaannya berbeza. Tiada pemalam penghalaan pada uniapp, dan halaman dibahagikan kepada bar tab dan bukan bar tab juga mempunyai set API mereka sendiri Fungsi pemintasan laluan yang paling penting tidak disokong terlebih dahulu page.json fail.

Analisis Keperluan

Andaikan kita ingin membuat satu set fungsi yang sepadan pada app Perkara tentang kebenaran pengguna ialah pengguna yang berbeza, mengikut konfigurasi kebenaran, menentukan halaman dan butang yang boleh mereka gunakan selepas masuk, dan juga mengawal bar tab. Keperluan ini memerlukan kawalan kandungan penghalaan dan panduan berdasarkan kebenaran, tetapi ini tidak boleh dicapai dalam keadaan semasa. Walau bagaimanapun, ramai orang dalam pasaran pemalam telah menulis pemalam penghalaan. Idea ini sebenarnya selaras dengan Penghala vue di bahagian web Satu-satunya yang dapat memenuhi keperluan sepenuhnya ialah pemalam penghalaan ini .

Satu lagi keperluan yang sangat penting ialah bar tab dinamik Ini adalah lajur butang di bawah halaman utama selepas log masuk ke apl ini capai bar tab dinamik Bar tab dikawal berdasarkan kebenaran seperti yang dinyatakan di atas. Sebagai contoh, paling banyak hanya lima bar tab, jadi bagaimana saya boleh mengawal A untuk melihat 5 bar tab dan B untuk hanya melihat 3? Keperluan ini tidak boleh direalisasikan pada uniapp asli hanya boleh mengkonfigurasi halaman TabBar ialah sub-konfigurasi halaman. Walau bagaimanapun, seseorang dalam pasaran pemalam telah melaksanakan komponenisasi tabbar dan kami boleh mencuba pembangunan tersuai.

Ringkasnya, sebenarnya terdapat dua keperluan:

1. Laksanakan pengawal penghalaan uniapp;

2 , beberapa penyelesaian telah dinyatakan sebelum ini; keperluan kedua, bar tab dinamik, perlu direalisasikan bersama dengan komponen

tabbar

pustaka komponen uview. Mari analisa rangka kerja semasa dan keupayaan pemalam, dan gabungkan keperluan di atas, kami mempunyai gambar ini:

Terdapat beberapa kandungan dalam gambar ini yang tidak dinyatakan sebelum ini, seperti pengurusan negeri , Cache tempatan, ini adalah bahagian penting yang akan digunakan kemudian, dan akan disebut dalam bahagian reka bentuk di bawah.

Reka Bentuk ProjekMari kita lihat reka bentuk proses perniagaan:

1. Masukkan nama pengguna dan kata laluan dalam aplikasi untuk log masuk;

2 , pergi ke langkah 3, jika ya, pergi ke Langkah 4; 🎜>

4. Tukar bar tab Data hierarki disimpan secara berasingan dan digabungkan dengan komponen bar tab uview untuk melaksanakan bar tab dinamik; 5. Simpan koleksi penuh butang aplikasi secara setempat (kecuali untuk bar tab, halaman lain; melompat melalui butang), dan berkomunikasi dengan pelayan Bandingkan data yang diperoleh untuk mendapatkan set data konfigurasi yang menunjukkan sama ada butang dipaparkan atau tidak

6 Selepas maklumat penghalaan dimulakan, masukkan yang disesuaikan pengguna halaman awal atau halaman utama;

ok, analisis Itu hampir sahaja.

Penyelesaian

1 . Laksanakan pengawal laluan

Pemalam penghalaan mengesyorkan uni-simple-router Untuk tutorial tertentu, anda boleh merujuk kepada dokumen rasminya, yang ditulis dengan lebih terperinci. Berikut ialah tutorial praktikal mudah saya.

Pasang pemalam uni-simple-router

npm install uni-simple-router

Seterusnya teruskan ke Konfigurasi modul, buat penghala folder, kandungan folder adalah seperti berikut:

Fail rumah mengandungi konfigurasi penghalaan semua halaman, seperti ini:

const home = [
 {
      path: '/pages/login/login',
      aliasPath:'/app/login',  //对于h5端适用
      name: 'login',
        meta: {
         title: '登录',
     }
    },
 {
      path: '/pages/index/index',
      aliasPath:'/app/index',  //对于h5端适用
      name: 'index',
        meta: {
         title: '首页',
     }
    }]
export default home

Saya mesti menyatakan satu perkara lagi di sini, memandangkan pemalam ini tidak mempunyai fungsi penulisan dinamik, jadi jika kita ingin melaksanakan pengurusan kebenaran, kita mesti mengkonfigurasi penghalaan lengkap secara setempat dan kandungan dalam pages.json mesti juga dikonfigurasikan sepenuhnya, tetapi konfigurasi bar tab agak berbeza. Ia akan disebut kemudian; kandungan indeks di bawah direktori akar penghala terutamanya pengawal laluan:

Akhir sekali, anda perlu memetiknya seperti ini dalam main.js apl:

const files = require.context('.', false, /\.js$/)
const modules = []

files.keys().forEach(key => {
  if (key === './index.js') return
  const item = files(key).default
  modules.push(...item)
})

export default modules

Sebagai untuk penggunaan penghalaan seterusnya, anda boleh terus membaca dokumentasi rasmi, yang lebih jelas, dan penggunaannya serupa dengan vue-router. Apa yang memerlukan penjelasan khas di sini ialah beberapa konfigurasi blok yang dimulakan oleh kod di atas: holdTabbar: false, vueRouterDev: yang pertama bermaksud bahawa pemintasan bar tab asli digantikan pada bahagian aplikasi dan dipintas dalam pemalam ini bahawa ia digunakan sepenuhnya dalam h5 API vue-router telah meninggalkan API asli termasuk pemalam dan uniapp ini. Sila gunakan yang terakhir dengan berhati-hati.

import modules from './modules/index.js'
import Vue from 'vue'
import Router from 'uni-simple-router'
import store from '@/store/store.js'

Vue.use(Router)
//初始化
const router = new Router({
 APP: {
  holdTabbar: false //默认true
 },
 h5: {
  vueRouterDev: true, //完全使用vue-router开发 默认 false  
 },
 routes: [...modules] //路由表
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {
 // 首先判断是否存在路由信息
 //不存在就先调用接口得到数据
   //具体内容可以参照上文的方案设计内容
})
// 全局路由后置守卫
router.afterEach((to, from) => {})
export default router;

import router from './router/index.js'
import { RouterMount } from 'uni-simple-router'
...

//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
 RouterMount(app,'#app');
// #endif

//为了兼容小程序及app端必须这样写才有效果
// #ifndef H5
 app.$mount(); 
// #endif

2. Menggabungkan overhed apl pengurusan cache data dan pengurusan negeri

Di sini Malah, ia tidak sukar, dan tiada kod yang diberikan Ia sangat mudah. Saya boleh menyimpan data yang diperoleh daripada pelayan dalam pengurusan negeri, tetapi data vuex disimpan dalam memori dan mudah hilang. Sebagai contoh, jika saya menggunakan aplikasi untuk seketika, saya menariknya ke latar belakang, dan jika saya mengkliknya sekali lagi, ia boleh digunakan Walau bagaimanapun, jika masa terlalu lama, cache dikosongkan secara tidak sengaja atau tamat masa had pelayan telah melebihi, kemudian saya klik aplikasi sekali lagi, beberapa data mungkin hilang. Masalah ini perlu dikendalikan oleh pengawal laluan Apabila laluan melompat, ia akan dinilai sama ada data status yang berkaitan wujud, dan jika ia tidak wujud, ia akan diproses semula.

Biar saya memperkenalkan API caching data uniapp, yang lebih stabil, terutamanya dalam apl Ia bukan konsep cache, tetapi wujud secara berterusan, melainkan anda memanggil kaedah pembersihannya. Anda boleh menggunakan kedua-dua ini untuk menyimpan beberapa data secara berasingan dan melakukan beberapa kawalan bersama-sama Anda boleh memikirkan sendiri pelaksanaan tertentu. Sebagai contoh, jika anda menariknya kembali dari latar belakang dan data pengurusan status hilang, tetapi masa masih dalam julat tamat masa pelayan, maka data token yang tidak ditetapkan masa akan disimpan dalam cache data uniapp, saya akan menyemak kebenaran yang berkaitan pada token ini, tetapkan nilai kepada vuex, dan kemudian lakukan operasi seterusnya jika tamat masa selepas menariknya kembali, ia akan kembali terus ke halaman log masuk. Dalam bidang ini, saya hanya memberikan idea, dan ia adalah idea yang berjaya. Saya sendiri telah mengujinya untuk menjadi berkesan.

3. Laksanakan bar tab dinamik

Baiklah, kita boleh sampai ke tahap ini. Perarakan panjang beribu batu hanya separuh berlalu. Jangan lihat kandungan berikut, sebenarnya saya mengambil masa yang lebih lama untuk mengumpulkan maklumat yang berkaitan daripada di atas. Memandangkan bar tab dikonfigurasikan secara berasingan, uniapp asli tidak mempunyai cara untuk mengkonfigurasinya secara dinamik. Selepas mencari, saya mendapati bahawa komponen tabbar uview boleh dilaksanakan. Mari senaraikan langkah di sini: langkah demi langkah, ia boleh dicapai!

1 Ubah suai konfigurasi pages.json

Seperti ini, cuma Mengekalkan kandungan ini bermakna terdapat lebih sedikit kandungan daripada konfigurasi asli.

"tabBar": {
  "list": [{
   "pagePath": "pages/index/index"
  },{
   "pagePath": "pages/about/about"
  }]
 },

2 Simpan maklumat bar tab secara berasingan dalam objek global

Langkah ini Ia. boleh disimpan dalam vuex kerana ia mudah dibaca Cache data Uniapp sedikit lebih menyusahkan untuk dibaca. Letakkannya dalam vuex, ia sangat mudah untuk mendapatkan semula, seperti ini:

this.$store.state.userInfo.tabbarlist

3. Konfigurasikan komponen tabbar pada setiap halaman bar tab

Format bahagian templat hendaklah seperti di atas, dengan bar tab dan kandungan teks sebelah menyebelah adalah seperti berikut, kedua-dua kaedah boleh dilakukan , lihat dokumentasi< untuk butiran 🎜>

<template>
 <view>
  <view class="content">
   ...
  </view>
  <u-tabbar :list="$store.state.userInfo.tabbarlist" @change="changeTb" :inactive-color="inactiveColor" :active-color="activeColor"></u-tabbar>
 </view>
</template>

Perlu diambil perhatian bahawa kaedah ini menyembunyikan tabbar asli uniapp data senarai tab dalam pengurusan keadaan yang digunakan di atas ialah konfigurasi bar tab dengan struktur lengkap parameter, tetapi Halaman bar tab mungkin tidak lengkap, bergantung pada kebenaran pengguna.

Baiklah, artikel ini telah menerangkan dengan jelas penyelesaian penghalaan dinamik dan bar tab dinamik Anda boleh mengikuti idea saya dan memperbaik butiran secara beransur-ansur mengikut keperluan anda sendiri. Jika ia berguna untuk anda, sila klik untuk berkongsi, terima kasih!

Disyorkan: "tutorial uniapp"

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara melaksanakan penghalaan dinamik dan bar tab dinamik berdasarkan rangka kerja uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!