uniapp フレームワークに基づいて動的ルーティングと動的タブバーを実装する方法を段階的に説明します。

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

ここに必ず存在します もう 1 つ、このプラグインには動的書き込み機能がないため、権限管理を実装したい場合は、完全なルーティングをローカルで構成する必要があり、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.前者は、ネイティブのタブバー インターセプトがアプリ側で置き換えられ、このプラグインでインターセプトされることを意味し、後者は意味します。 vue-router の API は本プラグインを含むネイティブ API と uniapp を廃止しているため、後者は注意して使用してください。

2. 状態管理とユニアプリ データ キャッシュ管理との組み合わせによるアプリ キャッシュのオーバーヘッド

実際のところ、これは難しいことではなく、コードも指定されておらず、非常に単純です。

サーバーから取得したデータは状態管理に保存できますが、vuexのデータはメモリ上に保存されるため紛失しやすいです。例えば、アプリをしばらく使用するとバックグラウンドに引き、すぐにもう一度クリックすると使用できるようになりますが、時間がかかりすぎると誤ってキャッシュがクリアされたり、タイムアウトが発生したりすることがあります。サーバーの制限を超えた後、再度アプリをクリックすると、一部のデータが欠落している可能性があります。この問題はルートガードで対応する必要があり、ルートジャンプ時に該当ステータスデータが存在するか判定し、存在しない場合は再度処理を行うことになります。

特にアプリ上でより安定した uniapp のデータ キャッシュ API を紹介します。これはキャッシュの概念ではありませんが、クリア メソッドを呼び出さない限り永続的に存在します。これら 2 つを使用して、いくつかのデータを個別に保存し、いくつかの制御を一緒に行うことができ、具体的な実装を自分で理解することができます。例えば、バックグラウンドから引き戻してステータス管理データがなくなってしまったが、その時間がまだサーバーのタイムアウト範囲内であれば、タイムアウトしていないトークンデータが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)
   }