小程序全局数据共享/分包

小程序全局数据共享

全局数据共享(状态管理)是为了解决组件之间数据共享的问题
开发中常用全局共享方案有:vuex、redux、mobx等
在小程序中,可以使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局共享:
mobx-miniprogram:创建Store实例对象
mobx-miniprogram-bindings:把Store中的共享数据或方法,绑定到组件或页面中使用
安装mobx相关包:

npm insatll --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意安装成功后,先删除,再重新构建npm

使用

1.新建store文件夹,在文件夹中新建store.js文件

//创建Store实例对象
import {observable} from 'mobx-miniprogram'
export const store = observable({
  //数据字段
  numA:1,
  numB:2,
  //计算属性
  get sum(){
    return this.numA+this.numB
  },
  //actions方法,用来修改store里面数据
  updateNum1:action(function(step){
    this.numA+=step
  }),
  updateNum2:action(function(step){
    this.numB+=step
  }),
})

2.在页面中使用 .js(在onload生命周期进行绑定,在onUnload生命周期函数中清理)

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from 'store/store'
Page({
  onLoad:function(){
    this.storeBindings=createStoreBindings(this,{//this是页面实例,第二个参数page对象
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },
  onUnload:function(){
    this.storeBindings.destoryStoeBindings()
  },
  //事件方法
  btn(e){
    this.updateNum1(e.target.dataset.step)
  }
})

在wxml页面用法

<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="default" bindtap="btn" data-step="{{1}}">默认按钮</van-button>

将Store中的成员绑定到组件中

新建Components文件夹,在里面建组件所需文件

import {StoreBindingsBehavios} from 'mobx-miniprogram-bindings'
import {store} from 'store/store'
Component({
  behaviors:[StoreBindingsBehavios],//建一个behaviors数组
  storeBindings:{ //建一个page对象,进行绑定
      store,//数据源
      fields:{
        numA:()=>store.numA,
        numB:()=>store.numB,
        sum:'sum'
      }
      actions:{
        updateNum1:'updateNum1'
      }
  },
  methods:{
    btn2(e){
    this.updateNum1(e.target.dataset.step)
  }
  }
})

在wxml页面用法

<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="default" bindtap="btn2" data-step="{{1}}">默认按钮</van-button>

分包

指把一个完整的小程序项目,按照需求划分成不同的子包,在构建时打包成不同的分包,用户在使用的时按需加载。
1.分包前,项目中所有的页面和资源都被打包到了一起,导致了项目体积过大,影响小程序的首次启动下载时间
2.分包后,包括一个主包+多个分包组成
主包:一般包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公告资源
分包:只包含和当前分包有关的页面和私有资源
3.分包下载规则
启动时,默认会下载主包并启动主包包含的页面
tabbar页面放在主包中
当用户进入分包页面,客户端会把对应分包下载下来,下载完成后展示
非tabbar页面可以按照功能不同,划分不同的分包之后,按需加载
4.分包体积限制
整个小程序所有分包的大小不超过16M
单个分包/主包大小不超过2M
5.配置
在这里插入图片描述
5.打包
打包原则
小程序会按subpackages的配置进行打包,subpackages之外目录打包到主包
主包也有自己的pages
tabBar页面必须在主包内
分包之间不能相互嵌套
6.引用原则
在这里插入图片描述

独立分包

独立分包本质上也是分包,只不过比较特殊,可以独立于主包和其他分包而独立运行
独立分包和普通分包的区别:是否依赖于主包才能运行
1.应用场景
开发者可以按需,将一些具有一定独立性的页面配置到独立分包中,原因如下
当小程序从普通分包页面启动时,需要先下载主包;而独立分包不依赖于主包即可运行,很大程度上提高了分包页面的启动速度
一个小程序可以有多个独立分包
2.配置方法:通过加上”indepeendent“:true节点配置
3.引用原则
独立分包和普通分包以及主包之间,是相互隔绝的,也不能相互引用彼此的资源
注意:独立分包也不能引用主包内的公共资源

分包预下载

分包预下载:当小程序进入到某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面的启动速度
1.配置
分包预下载,会在进入指定的页面时触发。在app.json中,使用preloadRule节点定义分包的预下载规则
在这里插入图片描述
2,分包预下载限制
同一个分包中的页面享有共同的预下载大小限额2M
预下载分包的页面加起来不超过2M

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值