UniApp 轻松搞定主包页面到分包页面的跳转，分分钟搞定！

2022-12-29 06:31:40

从主包页面跳转至分包页面：全攻略

前言

UniApp 的分包功能为开发者提供了模块化开发的强大工具，使他们能够将大型应用程序拆分为更小的、可管理的包。分包概念对于优化加载速度和提高应用程序性能至关重要。然而，了解如何在主包页面和分包页面之间进行跳转至关重要，以确保无缝的用户体验。本文将深入探讨从主包页面跳转至分包页面时所涉及的步骤和注意事项，旨在帮助开发者轻松掌握这一关键技术。

步骤 1：创建链接

要从主包页面跳转至分包页面，我们需要创建一个特定的链接。此链接遵循以下格式：

/分包名/页面路径?参数1=值&&参数2=值

其中：

分包名： 在创建分包时指定的名称。
页面路径： 分包中要跳转到的页面的路径。
参数（可选）： 使用 & 分隔的可选参数，可以将数据传递到分包页面。

步骤 2：确定分包名

分包名是在创建分包时指定的唯一名称。在链接中使用它来标识要跳转到的分包。

步骤 3：验证链接

在使用链接之前，仔细检查分包名和页面路径是否正确非常重要。任何错误都会导致跳转失败或加载错误页面。

步骤 4：获取参数（分包页面）

在分包页面中，可以使用 this.$route.query 访问跳转链接中的参数值。这些参数可以用于自定义页面行为或加载特定数据。

步骤 5：页面跳转

一旦所有步骤都完成，就可以使用 uni.navigateTo API 执行跳转操作：

uni.navigateTo({
  url: '/分包名/页面路径'
})

注意事项

分包代码包大小限制为 2M。超过部分需要单独加载，可能会导致页面加载速度变慢。
分包页面必须在主包页面之后加载，因此可能会出现白屏现象。
分包页面中的资源文件需要单独打包，不能与主包页面中的资源文件混用。

代码示例

为了进一步说明，以下是一个从主包页面跳转到分包页面的代码示例：

主包页面

<button @click="navigateToSubpackage">跳转到分包页面</button>

<script>
export default {
  methods: {
    navigateToSubpackage() {
      uni.navigateTo({
        url: '/subpackages/subpackage-page/subpackage-page'
      })
    }
  }
}
</script>

分包页面

<template>
  <view>
    <h1>分包页面</h1>
  </view>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.query)
  }
}
</script>