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

• 应用的生命周期
  • 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 miniprogram-api-promise@1.0.4

• 构建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: "...",
  },
  onLoad() {
    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介绍

• 这个自定义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)