读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

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

2020年07月01日 209点热度 0人点赞 0条评论

由于受到微信的限制,小程序的文件不能大于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是不限定网络

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
redux flutter 随笔 闲谈 react mysql CSS Echarts vue git node 悦读 小程序 Nginx taro hook canvas 阅读 JavaScript
推荐文章
  1. 微信小程序中自定义导航和地图定位
  2. 微信小程序分包加载设置
  3. 小程序全局和局部自定义导航栏样式
  4. react-router路由传参数
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号