使用vant、promise封装回调、全局状态共享、分包

标签：vant promise 分包 tabbar 组件 pages store 页面

应用的生命周期
- onLaunch：启动应用时调用
- onShow：显示时调用，可能调用多次
- onHide：隐藏时调用（进入到后台），可能调用多次
- onError：整个应用如果某个部分有报错就调用
页面的生命周期
- onLoad：页面加载调用，类似于以前的created。我们可以在这里做初始化操作（发请求），跳转到这个页面携带的参数才是在这拿，拿形参就是参数
- onReady：页面结构渲染完毕调用，类似于以前的mounted
- onShow：显示时调用
- onHide：隐藏时调用
- onUnload：页面要销毁时调用
组件的使用
- 如何创建组件
  - 一般放在components文件夹
  - 建议一个组件再一个文件夹，然后对着它右键新建component
  - 组件也有四部分：js、wxss、wxml、json
- 如何使用？
  - 局部使用
    - 哪个页面要用，就去哪个页面的json文件，在usingComponents里添加

"usingComponents": {
    "组件名": "组件路径"
}

    - 全局使用
        - 写到`app.json`，写法跟上面一样

创建的函数
- App()：创建整个应用的函数，入口文件（app.js）就是调用这个函数才能得到一个小程序
- Page({})：创建页面
- Component({})：创建组件
- 创建组件里的写法跟页面里面的写法其实很像，组件里的方法要放在methods里，页面的方法，直接写到跟data平级
组件的样式隔离
- 默认情况下页面写的样式不影响组件，组件写的样式不影响页面（标签选择器除外，推荐用类选择器）
- 可以修改

options: {
    styleIsolation: 'isolated'
}

    - isolated：默认值，样式隔离
    - apply-shared： 页面可以影响组件，组件不能页面
    - shared：双向影响

小程序里跟vue有一点点不一样
- properties跟data，其实完全一样，用法也一样
- 但是应用场景不一样，properties里定义父传递过来的数据，data声明自己定义的数据
组件的父子通信
- 父传子
  - 子要

properties:{
    数据名: {
        type: 类型,
        value: 默认值
    }
}

    - 父给

<组件 数据名="{{数据}}"></组件>

- 子传父
    - 子通知

this.triggerEvent('自定义的事件名', 参数)

    - 父接收通知

<子组件 bind自定义的事件名="方法"></子组件>

        - 方法的参数还是事件对象e。但是通过`e.detail`就有子组件传递过来的数据

组件里数据监听器
- 类似于以前的watch
- 语法

observers: {
    数据 (newVal) {
        
    },
    // 同时侦听多个
    "数据1,数据2" (newVal1, newVal2) {
        
    }
}

wxs：
- 微信提供的一套脚本语法
- 跟js的语法差不多，但是用不了js的那些es6语法
- 用来解决在 wxml里无法调用js里函数的问题
- 内嵌：

<wxs module="m1">
  function 函数 (形参) {
    
    }
    
    module.exports = {
      函数名: 函数
    }
</wxs>

m1.函数名(实参)

- 外联
    - 写到一个独立的`wxs`文件上，写法跟上面一样，用的时候要先导入

<wxs module="m2" src="wxs的路径"></wxs>

m2.函数名(实参)

组件的生命周期

组件的生命周期

官方文档

生命周期	参数	描述	最低版本
created	无	在组件实例刚刚被创建时执行	1.6.3
attached	无	在组件实例进入页面节点树时执行	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
detached	无	在组件实例被从页面节点树移除时执行	1.6.3
error	`Object Error`	每当组件方法抛出错误时执行	2.4.1

组件所在页面的生命周期

生命周期	参数	描述	最低版本
show	无	组件所在的页面被展示时执行	2.2.3
hide	无	组件所在的页面被隐藏时执行	2.2.3
resize	`Object Size`	组件所在的页面尺寸变化时执行	2.4.0

修改对象的另外一种方式与监听所有属性

修改对象的另外一种方式

this.setData({
    "对象名.属性名": 要修改的值
})

这样修改无法直接侦听对象，侦听不到改变
要想侦听对象里任意属性的改变，用**

observers: {
    "对象名.**" () {
        
    }
}

思考，如果我仅仅只是想改数组的下标3的数据，怎么写？

this.setData({
    "数组[3]": 数据
})

回忆添加数组

this.setData({
    数组: [ ...数组, 新数据 ]
})

插槽

有的时候我们封装的组件里面某一块页面结构不想写死，所以可以使用 插槽，让使用自己传递进来
小程序里的用法跟 vue的用法是一样的
区别在于：vue里面的默认插槽可以写多个，而小程序里只能写一个，小程序里不能设置插槽默认值
语法
- 组件里不想写死的部分写一个 slot

<slot></slot>

- 外面用时直接传递

<组件>
  内容会放到插槽里    
</组件>

多个插槽

小程序里的组件默认只允许放一个 slot，如果要放多个slot需要做两步
1. 开启多个插槽功能

options: {
  multipleSlots: true
},

2. 给插槽起名字（也就是加name属性）

<slot name="before"></slot>
<slot name="after"></slot>

如何传递？通过slot属性传递

<组件>
 <view slot="before">我将出现在before</view>
 <view slot="after">我将出现在after</view>
 <view slot="after">我将出现在after2</view>
</组件>

传递时如果写了多个在同一个slot，他们也会按顺序出现在对应的slot上

behaviors

类似于vue里的mixins，也就是组件混入
功能：可以把多个组件都需要用的东西放到 behaviors里，然后做混入，那么这些组件就都有了
一般情况下都是用一个js文件定义一个混入器，一般分为三大部分： lifetimes、data、methods

module.exports = Behaviors({
    // 写混入的内容
    // 一般分为
    lifetimes: {
        
    },
    data: {
        
    },
    methods: {
        
    }
})

例：在根目录新建behaviors的文件夹，新建behaviorA.js，代码如下

module.exports = Behavior({
  // 给组件用的
  lifetimes: {
    created () {
      console.log('混入A的created')
    }
  },

  data: {
    msg: 'A的msg'
  },

  methods: {
    say () {
      console.log('saysaysay')
    }
  }
})

来到需要使用的组件里，做导入并注册

const behaviorA = require('路径')

Component({
    
    behaviors: [behaviorA]
})

调用规则
- 如果是生命周期函数，会依次调用先所有混入器的，再调用自己的
- 如果是同名的data和methods，会后面的混入器覆盖前面的，但是如果自己有就是用自己的
- 不同名就混入到一起

小程序项目下载npm包

目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。
但是，在小程序中使用 npm 包有如下 3 个限制：
1. 不支持依赖于 Node.js 内置库的包
  - nodejs有内置模块例如，path就是一个内置模块，但凡这个包里用了path，那么小程序不能用
2. 不支持依赖于浏览器内置对象的包
  - 例如这个包里用到了document、window，小程序也不能用
3. 不支持依赖于 C++ 插件的包
总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却不多
下面通过给小程序下载vant体验，如何把npm下载的包用到小程序里
大概步骤：
- 先要给小程序的项目进行npm的初始化（一次就够）

npm init -y

- 然后下自己想要的包
- 下完后要来小程序开发工具里，点`工具->构建npm`

Vant WeApp介绍与使用到小程序里

地址：https://vant-contrib.gitee.io/vant-weapp/#/home

注意：vant组件库有多个版本，vue2版，vue3版，react版、微信小程序版、支付宝小程序版，所以不要选错，进上面的网址，就是微信小程序版
因为接下来要学习的内容就在同一个文件夹里，方便学习。所以大家先导入准备好的代码（在02-其他资料的资料文件夹里）
导入的时候，记得一定要选择自己的AppId
此时要想下载vant，先来到代码文件夹，npm init -y 做初始化
下包

npm i @vant/weapp -S --production

去app.json删掉v2版样式

"style": "v2" // 把这句话删掉

点开发工具里的工具->构建npm
想用什么组件，就去 app.json 导入组件，例如我要用button，就如下
- 引入组件的路径不用背，官网可复制

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

然后就可以在页面中愉快的使用 van-button
注：app.json，代表全局导入，所以所有地方都可以用

原生css里的变量

css也可以声明变量
- 语法

--变量名: 变量值;

- 使用

样式: var(--变量名, 默认值);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            /* 这里可以放全局变量 */
        }
        
        .box {
            width: 300px;
            height: 300px;
            /* 声明变量 */
            --my-size: 24px;
            /* --my-color: purple; */
        }

        .box1 {
            background-color: #f00;
            /* 变量是有作用域，你声明在哪它就代表只能在哪个范围内使用 */
            --my-weight: 700;
        }

        .box2 {
            background-color: #0f0;
        }

        p {
            font-size: var(--my-size);
            /* 如果有my-color这个变量，就使用这个变量的值，如果没有就用orange */
            color: var(--my-color, orange);
            font-weight: var(--my-weight)
        }
    </style>
</head>
<body>
    <div class="box box1">
        <p>放了个p</p>
    </div>
    <div class="box box2">
        <p>放了个p</p>
    </div>
</body>
</html>

注意：变量是有作用域的，你在哪个选择器里声明，就代表这个变量用它的范围里
如果希望声明全局变量，网页就写到 body里，小程序要想声明全局就找小程序最外面的界面（page）

自定义Vant里的样式

一般来说，要定制vant的主题色，是全局都需要改。所以一般是来到 app.wxss，然后写一个page的选择器
page相当于是微信小程序里的根标签，而根据作用域的原则，变量想哪里都能用，就应该写到根标签里

page {
    --button-primary-background-color: #13a7a0;
}

如果只是想在某个页面定制主题怎么办？
- 那么来到这个页面对应的wxss文件，给这个页面的所有内容包一个大view，然后把变量写到这个大view里面
变量大全：
- https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

添加编译模式（一部分）

API Promise化

API指的小程序给我们提供好的一些功能（方法）
但是这些方法大部分是用回调函数实现的
例如：之前学的 wx.request()

wx.request({
    url: '',
    success: res =>{
        
    }
})

而我们知道使用回调函数，不利于阅读，有可能容易造成回调地狱
所以我们之前都是把这些代码封装成promise来解决回调
但是我们自己封装麻烦，而且小程序里很多API都是回调函数，那就意味着都要封装
自己一个一个来就累死了，所以这么累的东西，早就有大牛帮我们封装好了对应的插件，我们调用即可
下载插件

npm i --save [email protected]

构建npm
到app.js执行代码

// 导入插件里的一个函数，这个函数叫promisifyAll
// 这个函数的作用就是可以把wx这个对象里提供的方法全部promise化
import {
  promisifyAll
} from 'miniprogram-api-promise'

// wx是小程序里的顶级对象
// 既然是对象就可以动态添加属性，所以这里相当于给wx加了p属性，对应的是一个空对象
wx.xx = {}

// 调用导入的插件函数
// 这句话的意思相当于是把wx这个对象里所有的方法
// 放到wx.p里去，并且把这些所有方法promise化
// 所以这一步以后，wx.request还是跟以前的用法一样
// 但是你可以用 wx.p.request() 这时候这个request就是被promise封装过的方法，可以进行`.then`
promisifyAll(wx, wx.p)

全局数据共享是什么？

把数据存到一个共享中心里，所有组件都可以访问
它可以有效解决复杂组件之间传值
vue实现store的方案： vuex、 pinia
react实现 store 的方案： redux mobx
微信小程序的方案： mobx小程序版（mobx-miniprogram）

小程序的数据共享方案
- 小程序文档说明：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/utils/computed.html
- 插件地址：https://github.com/wechat-miniprogram/mobx-miniprogram-bindings
- 插件地址（gitee加速版）：https://gitee.com/xpzll/mobx-miniprogram-bindings
下载

npm install --save mobx-miniprogram mobx-miniprogram-bindings

构建npm
去创建store对象
- 在根目录新建 store文件夹，里面放一个 index.js
- 里面放如下代码

// observable用来创建store对象（全局数据共享对象）
// action用来创建用来修改数据的函数
import { observable, action } from "mobx-miniprogram";

// 
export const store = observable({
  // 共享数据
  numA: 1,
  numB: 2,

  // store里的计算属性
  // 声明了一个计算属性就叫sum，它的值依赖了numA和numB，由他们相加得到
  // 前面的get是用来修饰这个计算属性是只读的
  get sum () {
    return this.numA + this.numB;
  },

  // actions
  // 方法名叫update， action()是一个函数，调用它必须传入一个函数（不能用箭头函数）
  // 这样包装的函数才是一个可以用来修改数据的函数
  // 专门用来修改数据的方法
  // 参数就是调用方法传递过来的数据
  updateNumA: action(function (step) {
    this.numA += step
  }),

  updateNumB: action(function (step) {
    this.numB += step
  }),
});

将store用在页面和组件中

import {
  storeBindingsBehavior
} from "mobx-miniprogram-bindings";
// 导入我们自己创建的store对象
import {
  store
} from "../../store/index.js";

Page({
  // 混入store的支持
  behaviors: [storeBindingsBehavior],
  // 把store里的数据和方法映射到当前对象里
  storeBindings: {
    store,
    // 把这个store里的numA挂载到当前data里的numA
    // 换句话说，相当于给当前声明了一个属性叫numA，他的值是store里的numA
    fields: {
      numA: () => store.numA,
      numB: () => store.numB,
      // 把store里的计算属性sum，映射到当前对象里的sum
      sum: "sum",
    },
    // 把store里的update这个方法挂载到当前对象里，起名叫 buttonTap方法
    actions: {
      buttonTap: "updateA",
    },
  },
  
})

来到wxml做渲染

<view>
  <van-button bindtap="buttonTap">调用action里的updateA方法</van-button>
  {{ numA }} -- {{ numB }} --- {{ sum }}
</view>

这个组件默认看不到，要跑去contact页面做导入和使用
然后就能出store是否正常工作，以及是否全局共享
注：如果用的小程序基础库为2.9.5以前的版本，用在Page的写法要如下面写

import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "./store";

Page({
  data: {
    someData: "...",
  },
  onl oad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["numA", "numB", "sum"],
      actions: ["update"],
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
  myMethod() {
    this.data.sum; // 来自于 MobX store 的字段
  },
});

分包介绍

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

小程序对每个包有严格限制，一个包不能超过 2m，所有如果我们把所有东西放到一个包里，如果超过2m了不给通过
解决办法：
- 把大包拆分成不同的多个小包，这就叫分包
分包的项目，一定有主包，其他的包就叫分包
- 主包：一般是指包含了启动页或者tabbar的包，而且它里面包含分包所需要用到的公共资源
- 分包：分出去的包
即使分包了，所有包加起来也不能超过 20m
为什么说小程序里开发时图片最好不要放在本地？
- 因为打包时图片会一起打包，有可能会超过包的限制容量
- 对于图片建议：上传到图床服务器，小程序里是用它的地址
分包好处
1. 解决小程序对每个包大小限制的问题
2. 加快第一次的加载速度
3. 解耦

分包前后项目构成对比

分包前

分包后

分包之间的资源不共享，但是所有分包都可以访问主包的资源

使用分包

项目结构与配置
- 结构如下

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

- 配置如下：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      // 这个包根文件夹
      "root": "packageA",
      // 这个文件夹里的页面
      "pages": [
         // 这里写的pages是指在 `packageA`文件夹里的`pages`
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple/apple",
        "pages/banana/banana"
      ]
    }
  ]
}

打包原则
- 小程序打包时它会根据app.json里设置的subpackages来进行分包，subpackages里的内容有几个就会出几个分包，例如上面有2个分包，但是整体起来加是3个包，因为还有一个主包
- tabbar必须放在主包里
- 分包里不能再相互嵌套
引用原则
- 主包不能引用分包里的私有资源
- 分包之间也不能互相引用彼此的私有资源
- 但是分包可以引用主包里的公共资源
查看分包大小
- 右上角点详情,然后点 基本信息 ，然后点 本地代码 展开信息就可以看到各包的大小

独立分包

独立分包其实也是分包，但是跟普通分包最大的区别在于，不依赖主包能独立运行

如何把一个分包变为 独立分包
- 就是在 subpackages 的某个分包配置里加一个 "independent": true
- 例

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

限制
- 独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。
- 此外，使用独立分包时要注意：
  - 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用分包异步化时 js 文件、自定义组件、插件不受此条限制）
  - 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
  - App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
  - 独立分包中暂时不支持使用插件。

分包预下载

指的是进入到某个页面后，可以预先把一些分包下载下来，就可以提升用户的体验（切换变快）
如何才能配置分包预下载？
- 就是在 app.json 跟 subpackages平级的位置加 preloadRule选项

"preloadRule": {
  // 左边的键代表进入哪个页面才开始预下载
  "pages/contact/contact": {
    // 在哪个网络模式里才下载，all代表不管是wifi还是流量都下载
    // 如果设置wifi只能在wifi下下载
    "network": "all",
    // 预下载哪几个包
    "packages": ["packageA", "packageB"]
  }
},

分包预下载限制：包加来不能超过2m

案例：自定义tabbar介绍

screenshots

这个自定义tabbar用的是vant里提供的tabbar，再来改功能和样式
用到的知识点：
- 自定义组件
- vant的组件库
- mobx数据共享
- 样式隔离知识
- 数据监听器
- 自定义vant的样式

案例：自定义tabbar的配置和文件夹准备

官网文档-自定义tabbar

来到 app.json 找到 tabbar这一栏，加一个 "custom": true的选项
- 原本tabbar的那些配置还得保留（为了兼容低版本）

"tabBar": {
  "custom": true,
   .....
}

来到 项目根目录 新建一个文件夹 custom-tab-bar，要对着它右键新建component，输入名字叫 index
以后 index.wxml里布局成什么样子，那么tabbar就长什么样子

案例：自定义tabbar之使用vant的tabbar

来到 app.json做一个导入

"usingComponents": {
  "van-button": "@vant/weapp/button/index",
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
},

来到 custom-tab-bar/index.wxml里复制官网的tabbar基本用法到页面中即可
记得还得复制 active变量和对应的事件方法到methods里

案例：自定义tabbar之自定义图标

就是把 van-tabbar-item里面的icon属性先删掉，然后用插槽自定义图标

<van-tabbar-item>
  <image
    slot="icon"
    src="/images/tabs/home.png"
    mode="aspectFit"
    style="width: 25px; height: 25px;"
  />
  <image
    slot="icon-active"
    src="/images/tabs/home-active.png"
    mode="aspectFit"
    style="width: 25px; height: 25px;"
  />
  首页
</van-tabbar-item>

案例：自定义tabbar之循环渲染item

因为官方推荐，即使用自定义也要把tabbar的那些选项保留，这是为了兼容低版本，既然如此，那么我们自定义的tabbar也应该是根据配置文件里的``tabbar去产生对应的 tabbar-item，所以把配置文件里的``tabbar里的 list复制到 index.js 的data里，然后去 index.wxml里做wx:for渲染
代码如下

data: {
  active: 0,

  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }
  ]
},

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="pagePath">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{ item.text }}
  </van-tabbar-item>
</van-tabbar>

案例：自定义tabbar之美化徽标样式

如何加徽标？
- 给 van-tabbar-item 加 info 属性即可有徽标
默认情况下，每一项的图标有一个 margin-bottom，会拉出距离，让徽标突出去
所以我们要把 margin-bottom这个值改为0
来到 index.wxss里，声明对应的变量

.van-tabbar-item {

  --tabbar-item-margin-bottom: 0;
}

发现没效果，所以根据文档提示发现，没效果是因为样式隔离导致的，所以可以给组件禁用样式隔离，使用双向的方式

options: {
  styleIsolation: 'shared'
},

案例：自定义tabbar之把store中的sum渲染到徽标

因为sum是在 store，所以我们自定义tabbar的组件要绑定store

import { storeBindingsBehavior} from "mobx-miniprogram-bindings";
import { store} from "../store/index";

behaviors: [storeBindingsBehavior],
storeBindings: {
  store,
  fields: {
    // 计算属性就是左边是新名字，右边就是store里的计算属性名
    sum: "sum",
  }
},

然后来到 index.wxml里做渲染

info="{{ sum }}"

案例：自定义tabbar之按需渲染数字徽标

此时发现，如果sum为0，它也显示徽标，所以要做处理

info="{{ sum ? sum : '' }}"

案例：自定义tabbar之实现页面切换

来到 van-tabbar绑定的 change事件（因为这个事件会在点击切换tabbar后触发），并且参数.detail就有选中的下标，我们根据下标就可以取出对应要去的页面的路径，进行编程式导航即可
代码如下

// 跳转路径
wx.switchTab({
  url: '/' + this.data.list[event.detail].pagePath,
})

注意：我们读取到的 pagePath 里前面没有加 / ，那就代表找当前目录里的 pages，但是此时tabbar文件夹里有pages吗？没有，所以我们得前面加一个 /，代表找根目录里的pages

案例：自定义tabbar之解决选中项不准确问题

原因：
- 本来tabbar就自带设置选中项的效果，而用 wx.switchTab做切换也会去设置选中项
- 两个一起设置冲突了
解决办法：
- 让 switchTab跳转时无法设置选中项
- 问题：如何让他无法自动设置？使用store里的数据去记录 active（也就是选中项的下标）
- 因为如果这个数据是存到 store，只能通过 action定义的函数来改，别的地方无法修改
步骤
- 把custom-tab-bar文件夹里的index.js里data里的active删掉
- 然后来到 store/index.js里声明一个 active，默认值为0，并且提供一个修改它的actions方法

{
    active: 0,
        
        
    updateActive: action(function (active) {
        this.active = active
    })
}

- 来到 `custom-tab-bar`里做一个映射

fields: {
  active: () => store.active,
  // 计算属性就是左边是新名字，右边就是store里的计算属性名
  sum: "sum",
},
actions: {
  'updateActive': 'updateActive'
}

- 然后在tabbar的切换事件里，修改`store`里的`active`的值即可

// event.detail 的值为当前选中项的索引
this.updateActive(event.detail)

标签：vant,promise,分包,tabbar,组件,pages,store,页面
From： https://www.cnblogs.com/strundent/p/17078311.html

使用vant、promise封装回调、全局状态共享、分包

组件的生命周期

组件所在页面的生命周期

修改对象的另外一种方式与监听所有属性

插槽

多个插槽

behaviors

小程序项目下载npm包

Vant WeApp介绍与使用到小程序里

原生css里的变量

自定义Vant里的样式

添加编译模式（一部分）

API Promise化

全局数据共享是什么？

将store用在页面和组件中

分包介绍

分包前后项目构成对比

使用分包

独立分包

分包预下载

案例：自定义tabbar介绍

案例：自定义tabbar的配置和文件夹准备

案例：自定义tabbar之使用vant的tabbar

案例：自定义tabbar之自定义图标

案例：自定义tabbar之循环渲染item

案例：自定义tabbar之美化徽标样式

案例：自定义tabbar之把store中的sum渲染到徽标

案例：自定义tabbar之按需渲染数字徽标

案例：自定义tabbar之实现页面切换

案例：自定义tabbar之解决选中项不准确问题

相关文章

赞助商

阅读排行

使用vant、promise封装回调、全局状态共享、分包

组件的生命周期

组件所在页面的生命周期

修改对象的另外一种方式与监听所有属性

插槽

多个插槽

behaviors

小程序项目下载npm包

Vant WeApp介绍与使用到小程序里

原生css里的变量

自定义Vant里的样式

添加编译模式（一部分）

API Promise化

全局数据共享是什么？

将store用在页面和组件中

分包介绍

分包前后项目构成对比

使用分包

独立分包

分包预下载

案例：自定义tabbar介绍

案例：自定义tabbar的配置和文件夹准备

案例：自定义tabbar之使用vant的tabbar

案例：自定义tabbar之自定义图标

案例：自定义tabbar之循环渲染item

案例：自定义tabbar之美化徽标样式

案例： 自定义tabbar之把store中的sum渲染到徽标

案例：自定义tabbar之按需渲染数字徽标

案例：自定义tabbar之实现页面切换

案例：自定义tabbar之解决选中项不准确问题

相关文章

赞助商

阅读排行

案例：自定义tabbar之把store中的sum渲染到徽标