uni-app开发小程序项目分包实现

    开发小程序,由于资源大小的限制以及需求的扩大,常常因为这个冲突导致小程序项目轻易的超过了2MB大小的限制。为了解决这个问题,特意研究了一下小程序的分包功能,即subpackages.

    通过subpackages, 可以使小程序项目的主包降到2MB之内,并且可以扩展多个分包,这样就满足了小程序项目对项目大小的需求。

    这样,我们的小程序项目中可以分为主包和分包,一个项目默认只有一个主包,是在小程序启动的时候,主动默认加载的就是主包,主包中可以放一些如tab和主页等需要立即呈现到页面上的内容。分包就可以根据功能模块进行划分,划分成不同的几个分包,并且分包是按需加载的,也就是通过主页路由跳转到分包中的页面的时候,这个分包才会进行加载,才会去加载其中的内容,这样不仅加快了启动小程序的速度。并且根据不同功能模块划分,我们可以轻松的根据功能解耦,实现协同开发。

具体操作:

1 创建分包目录:

    分包目录可以根据功能划分,创建一个或者多个包。在开发文档有这样的解释:

    由此可见,我们最多可以创建9个分包,包括一个主包(假设每个包都是正好2MB大小的话)


    我们根据功能来创建不同的分包,分包中的目录,与pages中大致是一样的,而且,如果几个分包共享一个资源如图片资源的话,可以将此资源放到主包中,这样就每个分包都可以访问主包中的资源了。

    分包是可以访问主包中的资源的,分包与分包之前似乎资源是不能正常访问的。


    所以,根据这个原则,我们如果有几个分包共享的资源,统一都放在主包中,如果是自己独有的,那么就将资源放到自己的分包中,实现解耦。


2 修改pages.json文件   

修改pages.json文件,分包后,需要在pages.json文件中创建subpackages属性,并且,将分包中的目录根据分包设计,放到不同的subpackages中


    在subPackages属性中,每一条都需要添加root属性,值为其分包的名称,而pages属性中的写法和主包中的写法完全一样。

    在完成subPackages属性修改之后,接下来,就需要去修改路由跳转的问题了,这个问题比较复杂。所以,我们应该在每次开发之前,就设计好主包与分包的区别和内容,如果是开发完毕后再去重构,由此引起的工作量非常巨大,因此好的设计对一个项目来说非常的重要。

3 路由跳转

    分包之后,路由跳转就不能再像只有一个主包的时候那样跳转了,虽然我们还是使用navigateTo()方法,但是url还是需要修改一下的。

    我们看到在pages.json中,为每个分包都定义了root属性,因此在这里这个root就起作用了!没错,在触发路由跳转的时候,我们需要添加这个root来识别我们的分包,并导航到相应的页面之上。

    举例: 假如有个页面userInfo.vue, 那么在使用分包之前,我们是这样跳转到userInfo页面的

        uni.navigateTo({ url: 'userInfo' })

    但是, 现在我们userInfo.vue放到packagesUser分包中去以后,这样就访问不到了,因此我们需要加上root属性来查找我们userInfo页面的位置才可以正常访问:

    uni.navigateTo({ url: '/packagesUser/pages/userInfo' })

这样就可以正常访问到了。

    另外,如果从一个分包跳转到另一个分包页面上的话,就直接添加root属性即可。

    例:packageUser中userInfo.vue页面要跳转到packageMsg中的message.vue页面上,那么我们就这样写就可以

    uni.navigateTo({ url: '/packagesMsg/pages/message' })

    如果分包中的页面想访问主包页面的话,就写上/pages即可。例:packageUser中的userInfo.vue页面跳转到index.vue页面

    uni.navigateToe({ url: '/pages/index' })

        经过我们的分包,可以在小程序项目的基本信息中看到,我们的分包内容可以大大的减少,我们将相应的页面和资源分配到了不同的分包中,这样我们的小程序在启动的时候,就可以更快的展现在用户面前了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容