00:00
好的,我们继续啊,那在获取完用户的唯一open唯一标识open ID啊,我接下来我们再讲一个新的知识点啊,那就是在我的小程序重点知识汇总这一章里面呢啊,第八章啊叫小程序的分包。那么这是课件里面的地方啊,那接下来呢,我给大家来说一下,在我们的官方文档里面去哪去找,嗯,首先呢,来到官网啊,在指南这一块。哎,指南这一块,指南这一块呢,里面有个呃,基础能力啊,往下翻,这有个分包加载。那么在这里边呢,是关于分包的一些介绍啊,因为这里面的东西呢比较多啊,我就直接先给大家说一下那小程序,哎,我们上来就讲了,小程序要求压缩包的体积不能大于两兆,如果大于两兆,那么我们的小程序是不是就没有办法去发布呀。哎,那这是人家微信官方的一个要求,但是我们实际开发中,往往啊,我们的项目有可能会大于两兆,那么如果说大于两兆了,我们怎么办。
01:12
那我们怎么办?那是不是就没有办法去发布了呢?我辛辛苦苦开发这么长时间发布不了,是不是很头疼呀?啊针对于这个问题呢,微信呢,也给出了一些解决方案啊,那就是分包。哎,所谓的分包是什么意思呢?假如说啊,原本你写完的小程序呢,这个包一看是五兆,哎,心想这完蛋了,发布不了了,那现在呢,我们可以将这个五兆的包拆分成多个小包,叫子包,比如说一个包是两兆,一个包是两兆,一个包是一兆,那这样的话,这三个子包是吧,都满足那个上限是两兆的要求呀,所以他们都可能那都可以去发布啊,只不过最后这些包呢,它一定是有关联的。啊,注意啊,我这说的是两兆啊,那你实真实拆包的时候,你不可能正好拆拆成两兆啊,啊就是这个意思。
02:07
啊,那这就是所谓的分包。啊,那分包的话呢,大家要注意啊,虽然说支持分包了,但是呢,不是说意味着你可以随便写,比如说我写个100兆,待会我拆100个包行不行不行。啊,这呢是它呃,对这个限制的一个描述啊,整个小程序所有分包的大小不能超过16兆,而单个分包或者主包的大小呢,不能超过两兆,单个包还是上限两兆啊,所有包的上限是16兆,那这一点呢,我们要注意一下,那么到底如何去分包呢?大家再点一下啊下边这呢有对应的使用啊说明在官网上呢,第一个叫使用分包,然后呢,还有一个叫独立分包啊,这两个有一点区别,那么在我的课件上呢,我这儿呢又给它起了个名字啊,我这里呢叫常规分包,就是它官网的使用分包啊,还有一个叫独立分包。
03:08
好的,那这是,嗯,这一点区别啊,来到官网我们往下看啊,这呢给了一个目录假设啊,你的项目目录长这个样,注意啊,那很明显最外边是我们项目的根目录。对吧,我们之前写咱们写这个项目的时候啊,所有的页面是不是都放到pages下面了。对吧,而它这呢,除了配意思呢,你看还有什么package a package b啊,这两个文件夹呢,故意叫这个啊,是想要表达package是包的意思啊,A包和B包。那么在这两个包下边呢,也有page page下边也有页面啊,这不这个吗。嗯,那这两个是啥意思呢?这两个呢,其实就是两个子包。啊,我们要拆出去的包。嗯,那目录我们看完了,我们往下如何去使用这个分包呢?首先我们需要在ABB点阶层中设置这个字段。
04:06
用于去声明我们项目分包的结构,那下边是示例啊,看着这不sub packages嘛,注意它对应的是个数组,数组里边的每一个对象是一个分包的说明。为什么是数组呢?因为我们可以拆分多个包。这里面这些字段啊,Root呀,Pages啊,这都是干嘛的呢?下边这有说明啊,我们先来看两个东西啊,第一个叫root,是分包的根目录。分包的根目录,这里呢,大家看它的root写的是package a,这个root呢写的是package b,那是不是分别就是指的是这两个分包的根目录呀。哎,什么叫分包根目录呢?如果说啊,没有分包的情况下,那么我们项目的,呃,这个根目录就是整个项目的根目录。现在呢,这两哥们呢,要独立另立山头,那么另历山头以后,这个里边找资源,它的根目录是谁就是他,他的根目录是谁就是他。
05:11
啊,也就是说这个root对应的内容不能乱写,必须是我们分包的根目录,那这个name呢,是预下载的时候用的啊,这个时候待会儿我们要讲的,我们先来看这个字段。Pages哎,分包的页面路径,注意这个页面路径呢,是相对于分包的根目录去设置的。来大家看一下pages跟一个数组,哎,这个pages扮演的角色呢,跟我们全局这个pages一模一样,那么全局这现在写的页面路径呢,是含保留在我们整个项目根目录下的这个相当于是子主包。里边的内容,而拆出去呢,叫子包啊,拆出去以后剩下的东西呢,都是主播的内容。好了,那在这个里边,大家看他这路径怎么写的啊,Pages下面的cat page下面的dog。
06:05
这个pages相对的目录就是我的分包根目录,也是从根目录出发,找什么,找pages,再找下边的页面。啊,是这样的。好的,那现在啊,我们。大概了解了这个啊,如何去拆包,那么下面还有个字段啊,是独立分包呢,这个也是接下来我们要说的啊,我们先看这个常规分包,那么看完官网的说明,来,来到我的课件里面,我给大家总结了一些重点啊。我们刚才看到呢,其实就是常规的分包啊,这我也说了啊,需要这个sum pack字段,那么常规分包的特点是什么,我们加载小程序的时候呢,要先加载主包。主包就是没有分出去那个包。必须要先加载主包,而如果是需要加载分包的时候呢,我们从主包里面的某一个页面呢,可以去跳转到分包。
07:03
嗯,那这个时候呢,分包虽然说你另立山头了,但是你还可以访问我主包里面的所有资源文件呀,数据呀,图片等。在这呢,我用一句话去描述一下它啊,叫分包不分家,说白了,我虽然哎独立出去了,但是主包有啥我还能用。啊,那这个时候我们要想一下啊,那主包里边都放什么,什么样的页面适合放到主包,什么样的页面适合猜出去呢。主包是上来要先加载的包。那也就是意味着主包里面的页面,那很有可能就是上来我们要显示出来的页面。当前我们的项目上来是不是就要显示这个table?而且呢,主页肯定要显示出来,而table对应的呃,这三个页面是不是都得上来得加载呀,所以像table bar的页面,它一定是放到主包里面的页面。
08:03
啊,还有一种情况,那就是说,假如说啊,你的项目上来不是这个table,就是一个单独的主页,那么主页必须要放到主包里边。什么样的页面适合放到分包呢?就是上来不需要加载的页面,比如说我们点击每日推荐跳转到了这个这个页面包括里面的歌曲详情页。这两个上来是不是不需要显示出来,所以它可以拆一个包,哎,刚才我们学的这个other这个页面上来也不需要加载,那么它也可以拆一个包啊,那这样的话呢,知道了这个以后啊,我们来到我们的代码里面,我们去玩一把。好的,那首先要拆包的话,我们先去整两个分包的根目录啊,我们要去分家,关于歌曲的这个包呢,我就叫他送。然后呢,Other的包呢,我就叫他一个other package吧。
09:01
啊,形象一点啊,Other package,那这个呢,我们叫它some package吧,啊重面明显啊重明明下来过来。好的啊,那现在这不让我命名啊,不让我命名不行啊,来走这个改了对吧,还有一个other package是不是也改了在这呢?那接下来我们要拆包,拆包的话就是要把页面拎出来,推荐歌曲页和歌曲详情页,我们可以拆到哪个包可以拆到啊,我们诶。稍等啊。啊,没有问题,来这个跟这个详情页,我们要拆到哪,拆到这个包里边,直接给它挪过来。好,然后other的页面,我们可以给它拆到这个包里面。嗯,那除了这两个分包啊,剩下的全部是主包的内容。好的,那现在啊,这两个包呢,我们拆出来了,那来到pack点点阶层中啊,我们需要去声明一下这个分包的目录。
10:03
那对应的我们要用到的字段叫什么啊,刚才官网我们也看了啊,叫sub package对吧,那我们写一个啊,对应呢是个数组,数组里面的每一项是分包的目录结构,首先呢,这应该有一个route,对应的是分包的这个。根目录的包名,那这个呢,必须叫它,嗯,而对应的pages我们写一下,嗯,这因为是个阶层文件啊,必须要有双引号数组呗,数组里边放置着分包当前页面的路径啊,注意它相对的目录是我们当前分包的根目录,所以呢,哎,那这的目录啊,其实还有点不对啊,我们最好是跟主包保持一致啊,这呢,我们再整一个pages。然后把这两个丢到配置里面。嗯,那这样的话呢,跟主包的结构其实一样的,这样呢,一样的道理啊,我们也整一个什么,整一个pages,哎,你说这个是不是必须这样做呢?不是的啊,我们就是为了什么我们的结构统一啊,哎,那这个是不是放错了呀,配拎出去。
11:09
嗯,我们要把这个other放到pigs下边啊,过来。啊,这个目录结构是不是跟我们主包上面这个一样的,我们这主包也有配也有页面对吧?好的,那么接下来我们要写这个路径,首先啊,我们先写一下谁啊,先写一下这个呗,那函是。Page下边,然后recommend song下面的song,那么对应的还有一个啊,那就是我们这个detail。嗯,是他呗。没问题。那这是一个分包,我们就写好了,那还有一个分包就是那个other对不对,那这个时候呢,我们这整一个other package对应的路径啊,那就other other,哎,我们有一个就够了啊,所以呢,这就删掉了,好,那现在啊,大家看这就是分包,我们就写好了,写好了以后我们要琢磨一下啊,这写完了以后,你回头再看,既然你都分家了,你都不在主包了,你说这个路径我们要不要?
12:18
那我们就不要了。对吧,啊,这个路径也不要,包括刚才我们写的other,也不应该再出现在主包里边了,你放在主包这反而会报错,因为根本找不到。来,那这个时候呢,来到我们的项啊,看看能不能正常运行好的,没有问题,而且呢,我们去呃访问一下啊,那访问之前呢,我们先来看一个东西啊,打开我们的详情本地设置,哎,在基本信息这啊大家看这。而当你分包了以后呢,本地的代码我们就可以点开了,这有说明,你看这这不是主包,算packet包,Other package包对了吧,来很明显已经分包了。
13:01
嗯,没有问题,好的,那么分包了以后呢,我们看一下能不能正常访问了啊走哎,你会发现这的路径不对了,当我们点击要跳转到这儿的时候,你会发现啊,这个路径是错的,那肯定是错的。现在我们是不是把这个页面的位置换了呀,所以呢,我们需要来到我们的主页。找一下当初跳转,那再要去找的话呢,首先我们是不是得先找到它的,从根目录出发的话,我们得先找到它的。啊,这个根目录的这个文件夹,所以这应该再加一层是它。哎,那下边这个呢,也是一样的道理,来,那这个时候呢,保存一下啊,我们再来看。来点击每日推荐走,嗯,大家看啊,跳转没有问题了,里边啊加载这个request GS是不是加载不到。啊,那这个我们应该能懂了啊,路径错了呗,下边我们找一下啊,最上边这那这个路径不对,这呢需要干嘛再上一级,那这个路径呢,我就不给大家演示了,从这出发对吧?啊上一级上一级再上一级是不是才能找到这个UT啊没有问题,那么对呢,那别忘了这要改。
14:22
对吧,那这个是改完收起了,这个是不是也得改。没问题吧,啊,同时我们看还有哪要改other下面。这也得改,嗯,OK,来,我们再看一眼。好了,来到我们的下门啊,走你。嗯,没问题,不报错了啊,来进到里面的页面走,你来这儿是不往里面跳,也得改一下这个路径啊,好的,那这个时候呢,来我们去找一下呗,呃,在哪呢,从那个。Recommend。
15:00
我们是不是要跳转到详情页啊,找到对应的那个路由跳转啊,是这那这个时候呢,我们还是要让他去找这个东西。嗯,OK,来看一眼啊,过来。嗯。走。嗯,没问题啊,那这呢,是不是就进来了啊,进来了以后这说什么,说这个东西saw the package detail啊404。对吧,哎,那这儿呢,怎么会多这个呢?哦,刚才我这个位置是不是加错了呀。是这个吧。啊,我们之前URL这要跳转啊,我们说啊在详情页里边啊,不应该在这了,哎,这这是对的,在详情页里边我们要发一个请求。啊,什么呀,他说是saw呢。Package detail,那这呢,我们看一下在哪在哪发的这个请求。
16:01
来呃,往下找,往下找在S的D哪一行呢。这。哎,Song detail里面来过来,Song detail里边我们在处理这个歌曲的时候,这哎这哥们他这他怎么会给我把这个地址也改了。对吧,我先撤销一下啊,这样肯定没问题,对吧?啊,这样没问题,那么下边啊,注意啊,这是刚才我挪包的时候,它自动的帮我改了,比较讨厌啊,那这个时候没关系啊,我们找到这个详情页没有问题,我们还得看一下当初获取音乐详情那个接口地址,我们看一下教程获取音乐详情,它不叫sound。Package叫什么叫?把这个一换就好了。嗯,OK,来,再看一眼。过来啊,分包的话就是这样啊,那因为你跟原来的目录结构都不一样了,所以啊,我们细心一点都得去改。
17:02
好过了。嗯,没有问题啊,那现在啊啊,那这现在的内容啊,这是网络慢啊显示出来来我们播放一下,这其实还不对,那说明下边这他也帮我改了。这个对的吧,啊,再往下呢,就没有了啊,那这个时候应该就对了,过来重新编译一下。来,走一波。嗯,没有问题。呃,进来了以后走,手放开。对吧,啊播放。嗯,没问题,嗯,暂停也没有问题,好了,那这样的话就好了,好了以后啊,大家看啊,我们下面这些icon。就以这个为例,我们ione呢,我们当初在哪用的呀,是不是在我们的全局样式文件中在这去引入的啊,这个呢,是我们主包的东西啊,你呢已经另立相同了,但是现在没有分家,所以它是不是能够正常使用呀?
18:07
哎,没有问题,好,那这样的话呢,我们这个分包啊,其实就成功了,大家要注意啊。首先你要写好你的目录结构,然后在abb.js中设置好你的目录结构。最后别忘了,你的目录结构一旦发生了改变啊,里边应该改的东西呢,你都得给人家改掉。啊,都得改掉啊,没有问题,好,那这节课呢,我们主要讲的叫常规分包啊,我们先讲到这里。
我来说两句