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

打包原则

  • 声明 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 内的资源

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

微信小程序分包,分包与主包之间的页面跳转_第1张图片微信小程序分包,分包与主包之间的页面跳转_第2张图片

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

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

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

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

微信小程序分包,分包与主包之间的页面跳转_第3张图片

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

分包成功:

微信小程序分包,分包与主包之间的页面跳转_第4张图片

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

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

wx.switchTab(Object object)

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

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

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

wx.reLaunch(Object object)

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

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

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

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

微信小程序分包,分包与主包之间的页面跳转_第5张图片

你可能感兴趣的:(微信小程序,前端)