关注互联网应用及运维技术的个人博客

微信小程序的路由以及分包的使用

由于受到微信的限制,小程序的文件不能大于2M,有时候就不得不使用分包预下载,根据需求进行加载。

微信小程序页面跳转(路由)

组件:navigator

以组件的形式嵌套在页面内,实现跳转,类似于HTML中的a标签。常见的属性:

target:在哪个目标上发生跳转,属性值为self,默认值,在当前小程序内部跳转;miniProgram其他小程序。

open-type:跳转的形式,属性值为:navigate,实现了wx.navigateTo或者是wx.navigateToMiniProgram的功能;redirect、switchTab、reLaunch、navigateBack、exit

API: wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack。

wx.switchTab:跳转到tabBar页面,并且关闭其他非tabBar页面。路径为app.json里面配置的tabBar字段定义的页面;路径后不能带有参数。

wx.reLaunch:关闭所有页面,跳转到小程序内的某一个页面,路径后可以带有参数,如:‘path?key=value&key1=value1’;

wx.redirectTo:关闭当前页面,跳转到小程序内的某一个页面,但是不允许跳转到tabBar页面,路径后面可以带有参数;

wx.navigateTo:保留当前页面,跳转到小程序内部的某一个页面,不能跳转到tabBar页面,通过wx.navigateBack返回上一页面。

wx.navigateBack:关闭当前页面,返回上一页面或者多级页面,通过getCurrentPages获取当前的页面栈,设置需要返回几层页面。

分包加载
{
  "pages": ["pages/index", "pages/logs"],//主包
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["pages/cat", "pages/dog"]
    },
    {
      "root": "packageB",
      "name": "pack2",
      "pages": ["pages/apple", "pages/banana"]
    }
  ]
}

subpackages:设置分包,每个分包的配置有:

root: 分包的根目录

name: 分包的别名,在分包预下载时可以使用

pages:分包的页面路径,相对于分包根目录

independent:是否是独立分包(Boolean值)

独立分包

可以独立于主包和其他分包运行,从独立分包进入小程序时是不需要下载主包,用户进入主包或者普通页面时才下载主包。

分包预下载是在进入某个页面时触发,通过app.json的配置项preloadRule来进行控制。如下:

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"]
    },
    {
      "root": "sub1",
      "pages": ["index"]
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

key为sub3/index时页面路径,value为”packages”: [“hello”, “sub3”]是进入页面后预下载包的root或者是name;

“network”:”wifi”是指定了网络下下载,默认是wifi,all是不限定网络

赞(0)
未经允许不得转载:飞天狒狒 » 微信小程序的路由以及分包的使用

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址