uniapp开发小程序加载不同页面

Uniapp是一个基于Vue.js的框架，可以跨多个平台进行开发，包括小程序、移动端、H5以及桌面端等。在Uniapp中，我们可以通过路由进行页面之间的跳转。在小程序中，由于文件数量和体积有限制，我们需要对页面进行分离打包。下面，我将详细介绍Uniapp开发小程序如何加载不同页面。

### 一、路由

在Uniapp中，我们可以通过路由进行页面之间的跳转。路由是一种可以在不同页面之间切换的机制。我们可以使用uni-app中的`uni.navigateTo`、`uni.redirectTo`、`uni.switchTab`、`uni.reLaunch`等方法进行路由跳转。

其中，`uni.navigateTo`和`uni.redirectTo`都是会保留原页面的，只是会把新页面压在原页面上或者替换原页面上的，适用于非tabbar页面之间的跳转；`uni.switchTab`可以跳转到tabbar页面，并关闭其它非tabbar页面；`uni.reLaunch`可以关闭所有页面，打开新的非tabbar页面。以上方式都需要传递一个url参数，拉起对应的页面。例如：

```

uni.navigateTo({

url: '/pages/home/home'

});

```

### 二、页面分包

在Uniapp的小程序开发中，我们需要注意文件数量和体积的大小限制。根据小程序开发文档，单个压缩后的包体大小不超过2M，并且如果分包后，则主包不能超过1M，分包也不能超过2M。

因此，我们需要将小程序中的页面进行分包，将不同的页面放在不同的包中。通过分包可以降低小程序的主包体积，提高小程序的加载速度。

### 三、页面的加载

在小程序中，对于页面的加载，我们需要分别在App.vue、pages.json以及$manifest.json文件中进行配置。

#### 1. App.vue

在App.vue中，我们需要监听页面进入事件，并通过`uni.loadSubPackage`方法加载分包。代码示例如下：

```vue

```

通过`uni.loadSubPackage`方法可以加载我们分包中需要用到的页面文件及其依赖的其他文件。其中，root参数是分包根目录的路径，相对于uni-app默认的根目录。

#### 2. pages.json

在pages.json文件中，我们需要配置所有的页面信息，并将每个页面所属的分包进行指定。代码示例如下：

```json

{

"pages": [

{

"path": "pages/index/index",

"style": {

"navigationBarTitleText": "首页"

},

"packageName": "main"

},

{

"path": "pages/other/other",

"style": {

"navigationBarTitleText": "其他"

},

"packageName": "subpackage"

}

],

"subPackages": [

{

"root": "subpackage",

"name": "subpackage",

"pages": [

{

"path": "pages/other/other",

"style": {

"navigationBarTitleText": "其他"

}

}

]

}

]

}

```

在这个示例中，我们可以看到pages数组中包含了所有的页面信息，其中每个页面都需要指定所属的分包。

另外，在subPackages数组中，我们还可以对分包进行更加细致的配置，指定分包的根路径、分包的名称以及每个页面所在的路径。

#### 3. $manifest.json

在$manifest.json中，我们需要指定我们的小程序需要使用到哪些资源文件。代码示例如下：

```json

{

"pages": [

{

"path": "pages/index/index",

"style": {

"navigationBarTitleText": "首页"

},

"packageName": "main"

},

{

"path": "pages/other/other",

"style": {

"navigationBarTitleText": "其他"

},

"packageName": "subpackage"

}

],

"subPackages": [

{

"root": "subpackage",

"name": "subpackage",

"pages": [

{

"path": "pages/other/other",

"style": {

"navigationBarTitleText": "其他"

}

}

]

}

],

"networkTimeout": {},

"debug": false,

"tabBar": {},

"usingComponents": {},

"preloadRule": {

"pages/home/home": {

"network": "all",

"packages": [

"main"

]

},

"pages/user/user": {

"network": "all",

"packages": [

"subpackage"

]

}

}

}

```

在这个示例中，我们可以看到preloadRule字段表示预加载规则，指定了哪些页面需要在小程序中预加载。

### 四、总结

通过以上步骤，我们就可以在Uniapp的小程序开发中成功加载不同的页面。从中我们可以看到，小程序的开发与传统Web开发有一定的区别，需要通过不同的配置文件来协助开发人员进行开发。希望这篇文章对初学Uniapp的开发者有所帮助。