практическое решение динамической маршрутизации uniapp

uni-app

Эта статья была опубликована на моем официальном аккаунте, для получения более оригинальных технических статей, пожалуйста, обратите внимание на мой официальный аккаунт "Byte Reverse Travel"

Удобнее и быстрее использовать uniapp для разработки приложений.Учебник на официальном сайтеОчень подробно, почти на все вопросы можно ответить. В Интернете также есть много вводных руководств, несколько видеоуроков есть на Tencent Classroom и B station.

В этой статье предполагается, что читатель в основном освоил вводные навыки разработки uniapp.Если вы еще не освоили uniapp, но готовы его разрабатывать, вам следует начать с официальной документации, а затем объединить собственно работу с видео. одни все хорошие. Ну и войдите в тему этой статьи -Как реализовать динамическую маршрутизацию и динамическую панель вкладок на базе uniapp framework.

Анализ ситуации

На проекте vue есть плагин маршрутизации Vue Router, все маршруты управляются единым образом, который можно перехватывать и контролировать единым образом, но на uniapp ситуация другая. В юниаппе нет плагина роутинга, а то страницы делятся на два типа: таббары и не таббары.Прыжок страницы тоже имеет свой набор API.Самое главное функция перехвата роутинга не поддерживается.Все страницы настроен заранее в файле page.json.

анализ спроса

Предположим, мы хотим сделать набор вещей, соответствующих пользовательским разрешениям в приложении, то есть разные пользователи, согласно конфигурации разрешений, определяют, какими страницами и кнопками он может пользоваться после того, как зайдет, и даже могут управлять панелью вкладок. Для этого требования необходимо контролировать содержимое и направление маршрутизации в соответствии с полномочиями, но это невозможно реализовать в текущих условиях. Тем не менее, на рынке плагинов многие люди написали плагины маршрутизации. Идеи на самом деле соответствуют vue Router на веб-стороне. Только он может полностью удовлетворить потребности.плагин маршрутизации.

Другим очень важным требованием является динамическая панель вкладок, которая является очень важным содержимым, то есть столбцом кнопок под главной страницей после входа в приложение. панель вкладок, как упоминалось выше, управляется в соответствии с разрешениями. Например, может быть не более пяти вкладок, так как же я могу контролировать, чтобы A мог видеть 5, а B мог видеть только 3? Это требование не может быть достигнуто в нативном юниапе, натив может только настраивать страницы, а tabBar — это подпункт конфигурации страниц. Тем не менее, некоторые люди на рынке плагинов реализовали компонентизацию панели вкладок, и мы можем попробовать разработку на заказ.

Подводя итог, на самом деле есть две потребности:

1. Внедрить защиту маршрутизации uniapp;

2. Реализовать динамическую панель вкладок;

Первое требование, некоторые решения были упомянуты ранее, второе требование, динамическая панель вкладок, необходимо объединитьбиблиотека компонентов uviewизtabbarкомпоненты для достижения. Проанализируем текущий фреймворк и возможности плагина, и объединим вышеуказанные требования, вот такая картина:

Некоторый контент на этом рисунке ранее не упоминался, например, управление состоянием, локальный кеш, который является ключевой частью, которая будет использоваться позже и будет упомянута в части дизайна ниже.

Дизайн

Давайте взглянем на дизайн бизнес-процессов:

1. Введите имя пользователя и пароль для входа в приложение;

2. Перехватить блокировку маршрутизации, чтобы определить, есть ли информация о маршрутизации в локальных данных при входе пользователя в систему, если нет, то перейти к шагу 3, а если да, то перейти к шагу 4;

3. Вызвать интерфейс для получения маршрута и получить данные маршрута с сервера, хранить данные маршрута локально (vuex, uniapp cache);

4. Данные уровня вкладок предлагаются и хранятся отдельно, а динамическая панель вкладок реализована в сочетании с компонентом панели вкладок uview;

5. Сохраните локально полный набор кнопок приложения (кроме панели вкладок, другие страницы перескакивают с помощью кнопок), сравните с данными, полученными сервером, и получите набор данных конфигурации о том, отображается ли кнопка или нет;

6. После того, как информация о маршрутизации будет инициализирована, введите настраиваемую пользователем начальную страницу или домашнюю страницу;

хорошо, анализ почти закончен, далее описываются конкретные практические шаги.

решение

1. Реализовать защиту маршрутизации

Плагин маршрутизации рекомендует uni-simple-router.официальная документация, написано более подробно. Ниже приводится мой простой практический урок.

Установите плагин uni-simple-router 
npm install uni-simple-router

Далее выполняем модульную настройку и создаем папку 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

Здесь я должен сказать еще одну вещь: поскольку в этом плагине нет функции динамической записи, мы должны настроить полную маршрутизацию локально, чтобы добиться управления разрешениями, и содержимое в pages.json также должно быть полностью настроено, но конфигурация таббара несколько разные скажут;

Индекс в папке модулей — это просто код, прочитанный модулем;

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;

Наконец, в файле main.js приложения вам нужно сослаться на него следующим образом:

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

Что касается следующего использования маршрутизации, посмотрите непосредственно официальную документацию, она более понятна, использование похоже на vue-router. Здесь следует особо пояснить несколько конфигураций блока, инициализируемого приведенным выше кодом: holdTabbar: false, vueRouterDev: true, первое означает, что собственный перехват таббара заменяется на стороне приложения и перехватывается в этом плагине; второе означает, что он полностью используется в h5 API vue-router отказался от собственного API, включая этот плагин и uniapp.Пожалуйста, используйте последний с осторожностью.

2. Объедините управление состоянием и кеш данных uniapp, чтобы управлять накладными расходами кеша приложений.

На самом деле здесь нет никакой сложности, и никакого кода не дается, все очень просто.

Данные, полученные с сервера, можно хранить в управлении состоянием, а вот данные vuex хранятся в памяти, которую легко потерять. Например, если приложение используется какое-то время, я переношу его в фоновый режим и сразу же могу использовать снова; но если время слишком велико, случайно очищается кеш или превышен лимит времени ожидания сервера , я могу снова открыть приложение в это время. , некоторые данные могут отсутствовать. Эта проблема должна быть решена в блоке маршрутизации.При переходе маршрута оценивается, существуют ли соответствующие данные о статусе, и если они не существуют, они будут обработаны.

Давайте представим API кеша данных uniapp, который более стабилен, особенно в приложении, это не концепция кеша, но сохраняется, пока вы не вызовете его метод очистки. Вы можете использовать эти два для хранения некоторых данных по отдельности и выполнять с ними некоторый контроль, и вы можете сами определить конкретную реализацию. Например, если вы возвращаетесь из фона, данные управления состоянием исчезли, но это время все еще находится в пределах диапазона времени ожидания сервера, тогда данные токена, время ожидания которых не истекло, должны быть сохранены в кеше данных uniapp, и я проверю соответствующие разрешения на основе этого токена.Информация о маршрутизации, присвоение значения vuex, а затем выполнение последующих операций; если он будет отозван и истечет время ожидания, он вернется прямо на страницу входа. В этой части я просто предлагаю идеи, и это успешная идея, которая эффективна для личного тестирования.

3. Реализуйте динамическую панель вкладок

Что ж, если мы сможем добраться до этого момента, мы пройдем половину Великого похода. Не смотрите на содержание ниже, на самом деле мне потребовалось больше времени, чтобы собрать соответствующую информацию, чем указано выше.

Поскольку панель вкладок настраивается отдельно, родной uniapp не имеет возможности динамически настраивать ее. Оглядевшись, я обнаружил, что компонент панели вкладок uview можно реализовать. Вот список шагов: шаг за шагом этого можно достичь!

1. Измените конфигурацию pages.json 
"tabBar": {
  "list": [{
   "pagePath": "pages/index/index"
  },{
   "pagePath": "pages/about/about"
  }]
 },

Вот так и осталось только это содержимое, что намного меньше родной конфигурации.

2. Храните информацию о панели вкладок отдельно в глобальном объекте.

Этот шаг можно сохранить в vuex, потому что он легко читается, а чтение кэша данных uniapp немного сложнее. Поставил в vuex, очень удобно брать, вот так:

this.$store.state.userInfo.tabbarlist
3. Настройте компонент панели вкладок на каждой странице панели вкладок. 
<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>

Формат части шаблона должен быть таким же, как указано выше, панель вкладок находится рядом с текстовым содержимым, код перехода следующий, возможны оба способа, подробнее см.Документация

changeTb(index) {
    // uni.switchTab({
    //  url: this.$store.state.userInfo.tabbarlist[index].pagePath
    // });
    this.$Router.pushTab(this.$store.state.userInfo.tabbarlist[index].pagePath)
   }

Следует отметить, что этот метод скрывает нативную панель вкладок uniapp, данные списка вкладок в управлении состоянием, использованные выше, представляют собой конфигурацию вкладок с полными структурными параметрами, но страница вкладок может быть неполной, что определяется разрешениями пользователя.

Что ж, в этой статье четко объяснена полная схема динамической маршрутизации и динамической панели вкладок. Детали соответствуют моим идеям и могут постепенно улучшаться в соответствии с вашими потребностями. Надеюсь, это вдохновит и поможет вам. Если это полезно для вас, пожалуйста, нажмите, чтобы поделиться, спасибо!

Для получения дополнительных технических статей, пожалуйста, обратите внимание на мой публичный аккаунт Byte Inverse Brigade

В этой статье используетсяmdniceнабор текста

Категории