小程序内的分包与数据共享

一:数据共享

小程序内的数据共享和vue当中不一样,vue当中的vue实例可以使得所有的组件都能this.store

但是小程序它只有page对象,和组件实例对象.对于vue而言,vue实例可以使得添加的组件都有.

但是page对象页面对象,不能使得页面内部有.只能使得这个页面内能访问.vue实例,会使得执行组件时,添加store属性.但是page对象不可以.

每个对象添加只能顾着自己.

因此如果需要在某个页面/组件内添加共享数据,需要自行每个页面和组件都添加

1)页面内添加

导入函数,导入store对象.

导入的对象可以第一个时添加到哪里,第二个是数据源添加那些数据.会添加到this上,这些其实都是新的存储在新的内存上的变量,只不过当修改mutations的时候,会指向同一个对象的.因此当修改其中一个的时候,有更新的效果.所有的都会变.添加绑定后返回的对象可以解绑.

执行这个函数就能执行store对象共享,什么时候执行呢?数据还未绑定前,onloading.绑定的时候就有,当页面卸载进行解绑,不需要了,不要占用空间.

2)组件内共享数据绑定

组件内没有能组件一开始就的生命周期函数,因此这里写属性,会自动绑定.

上面的方法卸载时,得到的对象内的方法会解绑所有.包括组件.

主包内会一开始就加载第一个路径的地址的页面,以及下载主包内的其他页面.

因此tabbar一般都是首页.就写tabbar/首页路径到主包内

二:分包

1.使用分包的原因

当不使用分包时,加载小程序时会将所有的页面和资源都下载下来.分包,分为主包和分包,小程序一开始只会下载主包的内容,首页1更快渲染.

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

2.如何使用分包呢?

在app.json下,pages原本是所有页面的路径,现在只是主包的路径.

在subpackages所写的是其他分包,每个分包内都有多个页面的路径.

root是根目录下的文件夹

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

分包内不能再谢谢分包,只能写路径,页面.

全局样式等打包到主包上,如果再分包商不能被所有分包使用.

当加载分包内的某一页面,只会按需下载相关的四个文件.

三:独立分包

像上述分包和主包,即使一开始不跳转到主包,只是打开分包,也会加载主包的内容.

但是独立分包,不同于普通的分包,内部有完整的文件,不需要下载主包,主包内的全局样式等也不会对独立分包内的页面起作用.这是独立分包.

1)开启独立分包

subpackages即可,则执行的时候这个就是独立分包.

{
  "root": "moduleB",
  "pages": [
    "pages/pear",
    "pages/pineapple"
  ],
  "independent": true
}

如果是分包内的页面则一定会加载主包,如果是独立分包的页面,只会加载独立分包的内容.分包做到了按需下载.减少下载的内容.

分包内写有公共样式的多个分包.

独立分包,只有自己的.

进入哪个页面,下载哪个页面的文件,不是整个分包,下载主包也是与页面相关的文件.

四:分包预下载

app.json内

这样写会当加载这个页面的内容时,也会加载相关的文件.packages可以写name.

整个项目内,可以分包预下载的体积大小限制是2M.