使用uniapp编写的微信小程序进行分包

简介:

由于小程序发布的时候每个包最多只能放置2MB的东西,所以把所有的代码资源都放置在一个主包当中不显示,所以就需要进行合理分包,,但是分包后整个小程序最终不能超过20MB。

一般情况下,我习惯将tabbar页面都放置在主包中,其余的相关页面都放置到对应的分到当中。

比如:在我的界面可以点击之后进入到个人中心页面、订单页面、地址管理页面等等,那么这些页面我就会放置在package_home的分包当中。

首先设置主包的页面:

  • pages/index/index.vue
  • pages/message/message.vue
  • pages/mine/mine.vue

其余的页面分别放置到与之对应的:

  • package_home
  • package_message
  • package_mine

设置路径【pages.json】:

首先设置主包的:

主包的就正常写到pages中即可

javascript 复制代码
"pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "主页"
      }
    },
    {
      "path": "pages/message/message",
      "style": {
        "navigationBarTitleText": "消息中心"
      }
    },
    {
      "path": "pages/mine/mine",
      "style": {
        "navigationBarTitleText": "个人中心"
      }
    }]

然后设置分包:

javascript 复制代码
"subPackages": [
{
    "root": "package_mine",//分包的根目录
    "pages": [
      {
        "path": "addressAdd/addressAdd",
        "style": {
          "navigationBarTitleText": "新增地址"
        }
      },
      {
        "path": "addressManage/addressManage",
        "style": {
          "navigationBarTitleText": "地址管理"
        }
      }
    ]
  }
],

注意:主包和分包是平级的,不要写成嵌套关系。

上边展示的分包代码,我只是拿了其中一个包做演示,其余的跟上边的规格相同。

使用分包下的页面:

javascript 复制代码
const handleClick = () = >{
    uni.navigateTo({
        url: '/package_mine/addressManage/addressManage'
    })
}

注意:引用页面的时候路径最前边要加上 / ,其规格为 '/分包根目录/要引入的分包下的页面'

相关推荐
2501_916007477 小时前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆12 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
江城开朗的豌豆12 小时前
嘿,别想那么复杂!我的第一个微信小程序长这样
前端·javascript·微信小程序
2501_9160088913 小时前
iOS 不上架怎么安装?多种应用分发方式解析,ipa 文件安装、企业签名、Ad Hoc 与 TestFlight 实战经验
android·macos·ios·小程序·uni-app·cocoa·iphone
卷Java13 小时前
uni-app 模板语法修复说明
java·数据库·spring boot·uni-app·mybatis
iOS阿玮15 小时前
国庆假期 iOS 开发者守好邮箱 “防线”,严防恶意投诉避免产品下架
uni-app·app·apple
CRMEB定制开发15 小时前
PHP多商户接入阿里云识图找商品
android·阿里云·小程序·php·商城系统·微信商城·crmeb
00后程序员张15 小时前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
isixe17 小时前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
说私域18 小时前
基于开源AI智能名片与链动2+1模式的S2B2C商城小程序研究:构建“信息找人”式精准零售新范式
人工智能·小程序·开源