Comment uniapp implémente-t-il le préchargement de plusieurs autres pages TabBar ?

Ces dernières années, les applications mobiles sont devenues un élément essentiel de la vie des gens. Avec le développement des applications mobiles, de plus en plus d'applications adoptent le design TabBar, notamment dans les applications, TabBar est devenu la principale méthode de navigation pour de nombreuses applications. Parmi eux, le framework Uniapp peut être considéré comme le framework de développement multiplateforme léger le plus populaire à l'heure actuelle. Cependant, de nombreux développeurs rencontreront un problème courant lorsqu'ils utiliseront Uniapp pour développer des applications TabBar : Comment précharger plusieurs autres pages TabBar ?

Pendant le processus de développement d'Uniapp, TabBar peut être créé en configurant la page dans pages.json. Par exemple, définissez la page suivante dans pages.json :

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/category/category",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/me/me",
      "style": {}
    }
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tabbar/category.png",
        "selectedIconPath": "static/tabbar/category_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart_active.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "static/tabbar/me.png",
        "selectedIconPath": "static/tabbar/me_active.png"
      }
    ]
  }
}

Dans ce fichier de configuration, nous définissons 4 pages et créons une TabBar. Parmi eux, chaque page correspond à un élément de menu dans la TabBar. Lorsque nous cliquons sur différents éléments du menu, Uniapp passera à la page correspondante.

Cependant, dans ce processus, Uniapp ne préchargera la page actuelle que lors de son chargement, et ne préchargera pas les autres pages. Par conséquent, lorsque nous passons d’une page TabBar à une autre, la page peut se charger lentement, affectant l’expérience utilisateur. Alors, comment résoudre ce problème ?

Méthodes pour précharger d'autres pages TabBar :

Dans Uniapp, nous pouvons précharger d'autres pages TabBar en utilisant uni.request. Cette méthode peut obtenir les données de la page spécifiée en envoyant une requête GET et mettre les données en cache. Lorsque nous cliquons sur l'élément de menu TabBar correspondant, le système vérifiera d'abord si les données existent dans le cache, si elles existent dans le cache, il affichera les données directement. Si elles n'existent pas, il enverra à nouveau la demande et le mettra en cache. les données.

Dans pages.json, ajoutez un champ de préchargement pour définir l'URL de la page qui doit être préchargée :

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/category/category",
      "style": {},
      "preload": true
    },
    {
      "path": "pages/cart/cart",
      "style": {},
      "preload": true
    },
    {
      "path": "pages/me/me",
      "style": {},
      "preload": true
    }
  ],
  "tabBar": {
    ...
  }
}

Dans le fichier de configuration ci-dessus, nous avons ajouté l'attribut de préchargement pour les pages de catégorie, de panier et moi et l'avons ajouté défini sur true . Cela signifie que lorsque la page d'accueil de l'application est chargée, Uniapp chargera automatiquement ces pages et les mettra en cache localement.

Ensuite, nous appelons uni.request dans App.vue pour implémenter la fonction de préchargement de page :

<template>
  <div class="app">
    <uni-tab-bar :list="tabBar.list" :color="tabBar.color" :selected-color="tabBar.selectedColor" :background-color="tabBar.backgroundColor" :border-style="tabBar.borderStyle" @change="onTabChange"></uni-tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabBar: uni.getStorageSync('tabBar') || {
        color: '#999999',
        selectedColor: '#000000',
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        list: []
      },
      currentTab: 0
    }
  },
  onLoad() {
    uni.request({
      url: '/pages/me/me',
      method: 'GET',
      success: (res) => {
        uni.setStorageSync('/pages/me/me', res.data)
      }
    })
    uni.request({
      url: '/pages/cart/cart',
      method: 'GET',
      success: (res) => {
        uni.setStorageSync('/pages/cart/cart', res.data)
      }
    })
    uni.request({
      url: '/pages/category/category',
      method: 'GET',
      success: (res) => {
        uni.setStorageSync('/pages/category/category', res.data)
      }
    })
  },
  methods: {
    onTabChange(e) {
      const url = this.tabBar.list[e.index].pagePath
      this.currentTab = e.index
      uni.setStorageSync('currentTab', e.index)
      let pageData = uni.getStorageSync(url)
      if (!pageData) {
        uni.showLoading()
        // 发送请求获取数据
        uni.request({
          url: url,
          method: 'GET',
          success: (res) => {
            uni.hideLoading()
            pageData = res.data
            // 将获取的数据缓存到本地
            uni.setStorageSync(url, pageData)
          }
        })
      }
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons uni.request dans la méthode onLoad d'App.vue pour obtenir la catégorie, le panier et les données de ma page est mise en cache localement.

Lorsque vous cliquez sur un élément de menu TabBar, nous obtiendrons l'URL de la page correspondante en fonction de l'index de l'élément de menu et vérifierons si la page a été mise en cache localement. Si elle est mise en cache, les données sont lues directement à partir du cache et la page est rendue ; si elle n'est pas mise en cache, une requête GET est envoyée pour obtenir les données et mises en cache localement, puis la page est rendue.

Ce qui précède explique comment précharger d'autres pages TabBar dans Uniapp. En préchargeant les pages, nous pouvons afficher rapidement la page correspondante lorsque l'utilisateur clique sur l'élément de menu TabBar pour changer de page, améliorant ainsi l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!