uniapp 프레임워크를 기반으로 동적 라우팅 및 동적 탭바를 구현하는 방법을 단계별로 가르칩니다.

uniapp 프레임워크를 기반으로 동적 라우팅 및 동적 탭바를 구현하는 방법은 무엇입니까? 이 기사에서는 uniapp 동적 라우팅의 실제 전투를 소개하고 uniapp에서 동적 라우팅을 구현하는 방법을 단계별로 설명합니다.

uniapp은 앱 개발이 상대적으로 편리하고 빠릅니다. 공식 웹사이트 튜토리얼은 매우 상세하며 거의 모든 질문에 대한 답변을 찾을 수 있습니다. 인터넷에는 Tencent Classroom과 Bilibili에 대한 소개 튜토리얼도 많이 있습니다. 괜찮은 것 같습니다(사실 더 실용적이어서 시도해 볼 수 있습니다).

이 글은 독자들이 기본적으로 uniapp의 입문 개발 기술을 마스터했다고 가정합니다. 아직 uniapp을 마스터하지 않았지만 관련 개발을 수행할 준비가 되었다면 공식 문서부터 시작하여 실제 비디오 작업과 결합하세요. 이전 추천은 모두 좋습니다. 자, 이제 이 기사의 주제인 uniapp 프레임워크를 기반으로 동적 라우팅 및 동적 탭바를 구현하는 방법으로 넘어가겠습니다.

현재 상황 분석

vue 프로젝트에는 모든 경로가 통일적으로 관리되며 다음 단계에서 차단 및 제어가 가능합니다. 유니앱에서는 상황이 다릅니다. uniapp에는 라우팅 플러그인이 없으며 페이지가 탭바와 비탭바로 구분되어 있습니다. 페이지 점프에도 자체 API 세트가 있습니다. 가장 중요한 경로 차단 기능은 모든 페이지에서 미리 구성되어 있지 않습니다. page.json 파일이 좋습니다.

요구 사항 분석

그런 다음 앱의 사용자 권한에 해당하는 일련의 항목을 만들고 싶다고 가정합니다. 즉, 권한 구성에 따라 다른 사용자가 어떤 페이지와 버튼을 결정하는지 결정합니다. 를 입력한 후 사용할 수 있으며 탭바를 제어할 수도 있습니다. 이 요구 사항에는 권한에 따라 라우팅 콘텐츠 및 지침을 제어해야 하지만 현재 상황에서는 이를 달성할 수 없습니다. 그러나 플러그인 시장의 많은 사람들이 라우팅 플러그인을 작성했습니다. 그 아이디어는 실제로 웹 측의 vue Router와 일치합니다. 이 요구 사항을 완벽하게 충족할 수 있는 유일한 것은 이 라우팅 플러그인입니다.

또 다른 매우 중요한 요구 사항은 동적 탭바입니다. 이는 앱에 로그인한 후 홈페이지 아래에 있는 버튼 열로, 기본적으로 앱의 주요 콘텐츠를 구현하는 방법입니다. 위에서 언급한 권한을 기반으로 제어하는 ​​것과 같습니다. 예를 들어, 탭바는 최대 5개까지만 있을 수 있는데, A가 5개의 탭바를 보고 B가 3개만 보도록 제어하려면 어떻게 해야 할까요? 이 요구 사항은 기본 uniapp에서는 실현될 수 없습니다. 기본 구성은 페이지의 하위 구성만 가능합니다. 그런데 플러그인 시장의 누군가가 탭바의 컴포넌트화를 구현해줬고, 우리도 맞춤형 개발을 시도할 수 있게 됐다.

요약하자면 실제로 두 가지 요구 사항이 있습니다.

2. 동적 탭바 구현

첫 번째 요구 사항, 두 번째 요구 사항, 동적 탭바가 필요합니다.

의 tabbar 구성 요소와 함께 구현됩니다. 현재 프레임워크와 플러그인 기능을 분석하고 위의 요구 사항을 결합하면 다음과 같은 그림이 됩니다.

이 그림에는 상태 관리 및 로컬 캐시와 같이 이전에 언급되지 않은 일부 내용이 있습니다. 이 중 핵심 부분은 아래 디자인 섹션에서 언급하겠습니다.

프로젝트 디자인 비즈니스 프로세스 디자인을 살펴보겠습니다.

1. 앱에 로그인하려면 사용자 이름과 비밀번호를 입력하세요.

2. 사용자가 로그인할 때 로컬 위치를 확인합니다. 데이터에 라우팅 정보가 있는지 여부, 없으면 3단계로 이동하고, 있으면 4단계로 이동하여 경로를 가져옵니다. 서버의 라우팅 데이터를 로컬에 저장합니다(vuex, uniapp 캐시).

4. 탭바 수준 데이터를 별도로 저장하고 이를 uview의 탭바 구성 요소와 결합하여 전체 컬렉션을 저장합니다. 앱 버튼을 로컬에서(탭바 제외) 버튼을 통해 다른 페이지로 건너뛰고(전송) 서버에서 얻은 데이터와 비교하여 버튼 표시 여부를 나타내는 구성 데이터 세트를 가져옵니다.

6. 이후 라우팅 정보가 초기화되면 사용자 정의 초기 페이지 또는 홈 페이지를 입력하세요.

ok, 분석은 거의 동일합니다. 구체적인 실제 단계는 다음과 같습니다.

Solution

1. 루트 가드 구현

라우팅 플러그인은 uni-simple-router를 권장합니다. 자세한 내용은 공식 문서를 참조하세요. 다음은 간단한 실습 튜토리얼입니다.

npm install uni-simple-router

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

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

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

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

this.$store.state.userInfo.tabbarlist

<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>

추천: "uniapp 튜토리얼"

위 내용은 uniapp 프레임워크를 기반으로 동적 라우팅 및 동적 탭바를 구현하는 방법을 단계별로 가르칩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!