微信小程序分包,分包与主包之间的页面跳转

本文详细介绍了微信小程序的打包原则和页面引用规则,强调了tabBar页面必须在主包内,以及分包的配置和资源管理。同时,文章阐述了分包与主包间的页面跳转方法,包括wx.switchTab和wx.reLaunch的使用场景。通过实例展示了如何正确配置分包,确保页面跳转的顺畅性。
摘要由CSDN通过智能技术生成

打包原则

  • 声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到 app(主包) 中
  • app(主包)也可以有自己的 pages(即最外层的 pages 字段)
  • subpackage 的根目录不能是另外一个 subpackage 内的子目录
  • tabBar 页面必须在 app(主包)内

引用原则

  • packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件
  • packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template
  • packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源

以我的目录结构作为示例: 

看页面来说有一个登录页面和tabbar页面,这几个页面是要分成主包的,tabBar 页面必须在 app(主包)内

"pages": [
    "pages/index/index",
    "pages/pay/pay",
    "pages/my/my",
    "pages/login/login"
  ],

分包使用subpackages字段来设置分包

我的分包是首页里的小页面(二级目录页面)分成一个分包,支付里的小页面(二级目录页面)分成一个分包,以此类推。root是根路径也是分包名称,彼此之间不可以重复,还有一个分包要注意的一点,静态资源哪个模块的就放哪个包下,不要共享,共享就会变成主包里的资源。像这样就好了:

 "subpackages": [
    {
      "root": "templates/home",
      "pages": [
        "news/news"
      ]
    },
    {
      "root": "templates/pay",
      "pages": [
        "pay-qrcode/pay-qrcode"
      ]
    },
    {
      "root": "templates/my",
      "pages": [
        "my-perdata/perdata"
      ]
    }
  ],

分包成功:

分包与主包之间的页面跳转:

分包跳转到主包(方法很多种,我这里说两种):

wx.switchTab(Object object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数。

此方法跳转的页面必须是在tabBar定义过的页面

wx.switchTab({
  url: '/index'
})

wx.reLaunch(Object object)

关闭所有页面,打开到应用内的某个页面,路径后面可带参数。

wx.reLaunch({
  url: 'test?id=1'
})

主包跳转到分包(方法也很多种,我这只说注意的点):

跳转的路径要带上分包里配置的root这一级,不然它找不到路径就会报错。

  • 9
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值