小程序组件,分包随笔

1. 查看小程序的组件中的data的数据:

3__#$!@%!#__Pasted Graphic.png

1. 分包

Pasted Graphic 4.png

1.1 分包的创建,在app.json中

 "subPackages": [
    {
      "root": "pkgA",
      "name": "name_p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog",
        "pages/fenbao/fenbao"
      ]
    }
  ],

会创建一个分包pkgA,它的名称,命名为name_p1 ,在这个分包中创建了三个文件

1.2 分包的大小的查看

Pasted Graphic 5.png

1.3 如何把已经搭建的文件放入到某一个分包中(以上面的pkgA为例)
1.3.1 第一步是把对应的文件夹拖入到 pkgA下的pages里面;

Pasted Graphic 6.png

1.3.2 第二步是把app.json中的pages下的之前的生成的路径,移动到分包pkgA下

Pasted Graphic 7.png

1.3.3 然后是需要检查所有引用了fenbao的跳转,都需要更改;fenbao内,跳转到其他界面的路径也需要进行调整;这些报错在我们移动后,重新进入到这个fenbao界面后,验证功能能够发现报错;一一修改即可

1.4 分包的预加载方式配置
通过在app.json中配置:

"preloadRule": {
    "pages/contact/contact": {
      "packages": [
        “name_p1"
      ],
      "network": "wifi"
    }
  },

其中的pages/contact/contact是某一个触发界面,当进入到这个界面时,会触发分包的预加载;加载的分包是name_p1,加载的方式是在WiFi下才会进行下载;

独立分包,只是添加了"independent": true,完全独立,可不依赖主包;

1.6 资源引用原则：
独立分包和普通分包以及主包之间是相互隔绝的，不能相互引用彼此资源例如：
1 主包无法引用独立分包内的私有资源
2 独立分包之间不能相互引用私有资源
3 独立分包和普通分包之间不能相互引用私有资源
4 独立分包中不能引用主包内的公共资源