小程序分包使用

本文详细介绍了微信小程序中使用分包目录结构的方法,包括在app.json中如何正确配置subpackages字段,以及如何设置pages和root路径。通过实例展示了分包在实际项目中的应用,帮助开发者理解并掌握小程序分包技巧。
摘要由CSDN通过智能技术生成

分包目录结构示例:
在这里插入图片描述
在app.json中添加subpackages字段,如下:
在这里插入图片描述

参照官方app.json配置实例及目录结构:

{
  "pages": [
    "page/tabBar/component/index",
    "page/tabBar/API/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "page/tabBar/component/index",
      "iconPath": "image/icon_component.png",
      "selectedIconPath": "image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "page/tabBar/API/index",
      "iconPath": "image/icon_API.png",
      "selectedIconPath": "image/icon_API_HL.png",
      "text": "接口"
    }]
  },
  "subPackages": [
    {
      "root": "page/component/",
      "pages": [
        "pages/view/view",
        "pages/scroll-view/scroll-view",
        "pages/swiper/swiper",
        "pages/text/text",
        "pages/icon/icon",
        "pages/progress/progress",
        "pages/button/button",
        "pages/checkbox/checkbox",
        "pages/form/form",
        "pages/input/input",
        "pages/label/label",
        "pages/picker/picker",
        "pages/radio/radio",
        "pages/slider/slider",
        "pages/switch/switch",
        "pages/textarea/textarea",
        "pages/navigator/navigator",
        "pages/navigator/navigate",
        "pages/navigator/redirect",
        "pages/image/image",
        "pages/audio/audio",
        "pages/video/video",
        "pages/map/map",
        "pages/canvas/canvas"
      ]
    },
    {
      "root": "page/API/",
      "pages": [
        "pages/login/login",
        "pages/get-user-info/get-user-info",
        "pages/request-payment/request-payment",
        "pages/share/share",
        "pages/share-button/share-button",
        "pages/custom-message/custom-message",
        "pages/template-message/template-message",
        "pages/set-navigation-bar-title/set-navigation-bar-title",
        "pages/navigation-bar-loading/navigation-bar-loading",
        "pages/navigator/navigator",
        "pages/pull-down-refresh/pull-down-refresh",
        "pages/animation/animation",
        "pages/action-sheet/action-sheet",
        "pages/modal/modal",
        "pages/toast/toast",
        "pages/get-network-type/get-network-type",
        "pages/on-network-status-change/on-network-status-change",
        "pages/get-system-info/get-system-info",
        "pages/on-compass-change/on-compass-change",
        "pages/make-phone-call/make-phone-call",
        "pages/scan-code/scan-code",
        "pages/request/request",
        "pages/web-socket/web-socket",
        "pages/upload-file/upload-file",
        "pages/download-file/download-file",
        "pages/image/image",
        "pages/voice/voice",
        "pages/file/file",
        "pages/on-accelerometer-change/on-accelerometer-change",
        "pages/canvas/canvas",
        "pages/background-audio/background-audio",
        "pages/video/video",
        "pages/get-location/get-location",
        "pages/open-location/open-location",
        "pages/choose-location/choose-location",
        "pages/storage/storage"
      ]
    }
  ],
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": false
}

在这里插入图片描述
subpackages中的pages路径是相较于root字段的,
root字段相较于根目录
此后的路由跳转还是要写完全路径,比如我个人项目结构:
在这里插入图片描述
跳转写法:

tapToMember(){
    wx.navigateTo({
      url: "/pages/litePage/pages/member/member"
    })
  },

app.json配置:
在这里插入图片描述

官方文档中可以下载示例源码:[https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值