class13：分包、自定义tabbar案例

最新推荐文章于 2024-08-19 21:45:24 发布
最新推荐文章于 2024-08-19 21:45:24 发布
阅读量2.2k 收藏 4
点赞数
分类专栏： # 小程序开发 文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51667621/article/details/125072388
版权

目录

一、分包

链接: https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

1.分包加载

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

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

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
在这里插入图片描述

2.使用分包

链接: https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
在 app.json 的subpackages 字段声明项目分包结构：

// app.json
{
  "subpackages": [
    {
        "root": "packageA",
        "name": "pkA",
        "pages": [
            "pages/a1/a1",
            "pages/a2/a2"
        ]
    },
    {
        "root": "packageB",
        "name": "pkB",
        "pages": [
            "pages/b1/b1",
            "pages/b2/b2"
        ]
    }
  ],
}

在这里插入图片描述

1.打包原则

  • 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到主包中；
  • 主包也可以有自己的 pages，即最外层的 pages 字段；
  • subpackage 的根目录不能是另外一个 subpackage 内的子目录；
  • tabBar 页面必须在主包内。

注：

  • 主包不能访问分包的私有资源；
  • 分包之间不能相互引用私有资源；
  • 分包可以引用主包内的公共资源。

2.独立分包

用户打开小程序，先下载主包，展示主包内的页面。从主包跳到分包页面时下载分包资源。用户想进入分包页面，需要先下载主包，在下载分包。

特殊情况： 用户要直接进入分包页面，只下载分包：使用独立分包。链接: https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。
一个小程序中可以有多个独立分包。

通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

// app.json
{
  "subpackages": [
    {
      "root": "packageA",
      "name": "pkA",
      "pages": [
          "pages/a1/a1",
          "pages/a2/a2"
      ]
      "independent": true
    }
  ]
}

3.限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。此外，使用独立分包时要注意：

  • 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）；
  • 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
  • App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
  • 独立分包中暂时不支持使用插件。

3.分包预下载

链接: https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。
分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成。

预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。

{
    "subpackages": [
    {
      "root": "packageA",
      "pages": [
          "pages/a1/a1",
          "pages/a2/a2"
      ],
    },  
  "preloadRule": {
        "pages/home/home":{
            "network": "wifi" // all
            "packages": ["packageA"]        
        }
  }
}

分包预下载提示：
在这里插入图片描述
在这里插入图片描述

限制
同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。

二、自定义tabbar案例

1.配置

链接: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

该自定义tabbar需要先配置相关npm包和vant weapp框架，具体参照前几节。

在自定义 tabBar 模式下
为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。

与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效。
每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。

先配置默认的tabbar页面，当自定义页面未显示时默认为配置的tabbar页面：

// app.json
{
  "pages":[
    "pages/home/home",
    "pages/categories/categories",
    "pages/cart/cart",
    "pages/me/me"
  ],
  "subpackages": [
    {
        "root": "packageA",
        "name": "pkA",
        "pages": [
            "pages/a1/a1",
            "pages/a2/a2"
        ]
    },
    {
        "root": "packageB",
        "name": "pkB",
        "pages": [
            "pages/b1/b1",
            "pages/b2/b2"
        ],
        "independent": true
    }
  ],
  "preloadRule": {
    "pages/home/home":{
        "network": "all",
        "packages": ["packageA"]        
    }
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "custom": true,
    "list": [
        {
            "pagePath": "pages/home/home",
            "text": "首页",
            "iconPath": "/images/tabbarhome.png",
            "selectedIconPath": "/images/tabbarhome-active.png"
        },
        {
            "pagePath": "pages/categories/categories",
            "text": "分类",
            "iconPath": "/images/tabbar.png",
            "selectedIconPath": "/images/tabbar-active.png"
        },
        {
            "pagePath": "pages/cart/cart",
            "text": "购物车",
            "iconPath": "/images/icontabbarshoppingup.png",
            "selectedIconPath": "/images/icontabbarshoppingup-active.png"
        },
        {
            "pagePath": "pages/me/me",
            "text": "我的",
            "iconPath": "/images/icontabbarmyup.png",
            "selectedIconPath": "/images/icontabbarmyup-active.png"
        }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

2. 配置信息

1.在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

 "tabBar": {
**加粗样式**    "custom": true,
  }

2. 添加 tabBar 代码文件
在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

在custom-tab-bar文件夹右键新建components：
在这里插入图片描述

在index.wxml中输入内容，会显示在tabbar区域：
在这里插入图片描述

3.引入

在app.json中引入组件，详细介绍见链接: https://vant-contrib.oschina.io/vant-weapp/#/quickstart#yin-ru-zu-jian。

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

基础用法：
代码演示：

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

在这里插入图片描述

// custom-tab-bar/index.js
Component({
    data: {
        active: 0, //当前选中的item下标
    },

    methods: {
        onChange(event) {
            // event.detail 的值为当前选中项的索引
            this.setData({ active: event.detail });
          },
    }
})

active: 0 表示默认状态下被选中的tabbar图标，0表示第一个图标；
当点击非默认图标时，调用onChange()方法更改active的值。
在这里插入图片描述

1.自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item>
    <image
      slot="icon"
      src="/images/tabbarhome.png"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="/images/tabbarhome-active.png"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    首页
    </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

第一个图标发生改变，成为自定义图标：
在这里插入图片描述

遍历写法：
先在js中定义要循环的数组list：

// custom-tab-bar/index.js
Component({
    data: {
        active: 0,
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "/images/tabbarhome.png",
                "selectedIconPath": "/images/tabbarhome-active.png"
            },
            {
                "pagePath": "pages/categories/categories",
                "text": "分类",
                "iconPath": "/images/tabbar.png",
                "selectedIconPath": "/images/tabbar-active.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "/images/icontabbarshoppingup.png",
                "selectedIconPath": "/images/icontabbarshoppingup-active.png"
            },
            {
                "pagePath": "pages/me/me",
                "text": "我的",
                "iconPath": "/images/icontabbarmyup.png",
                "selectedIconPath": "/images/icontabbarmyup-active.png"
            }
        ]
    },

    methods: {
        onChange(event) {
            // event.detail 的值为当前选中项的索引
            this.setData({ active: event.detail });
          },
    }
})

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image
      slot="icon"
      src="{{item.iconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    {{item.text}}
    </van-tabbar-item>
</van-tabbar>

在这里插入图片描述

2.更改文字样式

可通过调试器找到文字颜色的样式，然后通过css进行样式覆盖：https://vant-contrib.oschina.io/vant-weapp/#/custom-style
在这里插入图片描述

3.自定义颜色

链接: https://vant-contrib.oschina.io/vant-weapp/#/tabbar

<van-tabbar 
active-color="#f00"  // 被选中时的颜色
inactive-color="#00f"   // 默认时的颜色
>
</van-tabbar>

在这里插入图片描述

4.显示徽标

通过info=" "字段进行显示，若直接在定义，则所有tabbar都会出现徽标：

// custom-tab-bar/index.js
Component({
    data: {
        active: 0,
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "/images/tabbarhome.png",
                "selectedIconPath": "/images/tabbarhome-active.png",
                "info": 5
            },
        ]
    },
})

<van-tabbar-item wx:for="{{list}}" wx:key="index" 
    info="{{item.info}}">
</van-tabbar-item>

在这里插入图片描述

a.更改徽标颜色

先在wxml结构中找到徽标的颜色属性：
在这里插入图片描述

进行覆盖：

/* custom-tab-bar/index.wxss */
.van-info{
    background-color: #66ff7a
}

在组件中进行样式覆盖需要开启声明：styleIsolation: “shared”

Component({
    options:{
        styleIsolation: "shared"
    },
})

在这里插入图片描述

b.动态info徽标

1.设计wxml页面： 这里假设有两个商品，分别设置按钮对商品进行数量的加减，每次加减通过参数data-step传入。使用van weapp按钮记得在app.json中声明：

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view>商品列表：</view>
<view>
    ￥ 3999  数量：
    <van-button type="info" bindtap="changePhoneNum" data-step="{{1}}">+</van-button>
    {{goodsNum1}}
    <van-button type="danger" bindtap="changePhoneNum" data-step="{{-1}}">-</van-button>
</view>
<view>---------------</view>
<view>
    ￥ 7999  数量：
    <van-button type="info" bindtap="changeTaptopNum" data-step="{{1}}">+</van-button>
    {{goodsNum2}}
    <van-button type="danger" bindtap="changeTaptopNum" data-step="{{-1}}">-</van-button>
</view>

在这里插入图片描述

2.设计js页面的数量变化：
在页面导入store mobx数据以获取商品的数量变化，设计方法使得点击按钮时发生数量改变。

// pages/home/home.js
// 导入store mobx数据仓库
import {store} from "../../store/store"

// 使用bindings包搭建页面与数据仓库之间的桥梁
import {createStoreBindings} from "mobx-miniprogram-bindings";

Page({
    onLoad(options) {
        // 绑定mobx store对象
        // 第一个参数为将数据绑定到的地方，如此处为该页面
        // 第二个参数为要绑定的数据
        this.storeBindings = createStoreBindings(this, {
            store: store, // 指定store为数据源
            fields: ["goodsNum1", "goodsNum2", "goodsSum"], // 将store中需要使用的数据映射到页面的this.data中
            actions: ["updataGoodsNum1", "updataGoodsNum2"], // 将store中需要使用到的action方法映射到页面
        });
        //console.log(this); 
    },

    changePhoneNum(e){
        this.updataGoodsNum1(e.target.dataset.step);
    },
    changeTaptopNum(e){
        this.updataGoodsNum2(e.target.dataset.step);
    },
    
    // 生命周期函数：监听页面卸载
    onUnload: function(){
        // 清理工作
        this.storeBindings.destroyStoreBindings(); // 解绑mobx数据对象
    }
})

3.配置store mobx共享数据仓库：
这里有两个商品，则设计两个数据字段goodsNum1、goodsNum2；计算属性为商品总数goodsSum；使用actio函数修改每个商品的数量（限制数量最小为1）。

// store.js
// 创建mobx store实例对象（共享的数据仓库）
// 导入
// 如果要使用action函数修改数据，需要在导入时加入action字段
import {action, observable} from "mobx-miniprogram"

// 导出
export const store = observable({
    // 数据字段
    goodsNum1: 1,
    goodsNum2: 1,

    // 计算属性：商品总数
    get goodsSum(){
        return this.goodsNum1 + this.goodsNum2;
    },

    // 修改商品数量
    updataGoodsNum1: action(function(val){
        // 限制最小数量为1
        if(this.goodsNum1 + val < 1){
            this.goodsNum1 = 1;
        }else{
            this.goodsNum1 += val;
        }
    }),
    updataGoodsNum2: action(function(val){
        // 限制最小数量为1
        if(this.goodsNum2 + val < 1){
            this.goodsNum2 = 1;
        }else{
            this.goodsNum2 += val;
        }
    })
});

4.在自定义tabbar(组件)导入store mobx：
配置对象所需的数据字段只需要商品总数即可，通过数据监听商品总数goodsSum，当其发生改变时，通过参数newVal获取其新值，再将新值赋予之前定义好的徽标变量info。

// custom-tab-bar/index.js
// 导入store mobx数据仓库
import {store} from "../store/store"

// 使用bindings包搭建页面与数据仓库之间的桥梁
import {storeBindingsBehavior} from "mobx-miniprogram-bindings";

Component({
    // 在behaviors添加storeBindingsBehavior来做绑定功能
    behaviors: [storeBindingsBehavior],

    // 配置对象
    storeBindings: {
            store: store, //指定要绑定的数据源
            fields: {
                goodsSum: "goodsSum",
            },
    },

    // 数据监听
    observers:{
        "goodsSum":function(newVal){
            this.setData({
                "list[2].info": newVal
            })
        }
    },
})

在这里插入图片描述
在这里插入图片描述

5.跳转tabbar页面

注意页面路径要以"/"开头。

// custom-tab-bar/index.js
Component({
    methods: {
        onChange(event) {
            // event.detail 的值为当前选中项的索引
            this.setData({ active: event.detail });
            
            //   跳转tabbar页面
            wx.switchTab({
                url: this.data.list[event.detail].pagePath,
            })
          },
    }
})

6.优化默认选中的tabbar下标

原因：index.js中定义的默认下标active是非动态的，导致选中其他tabbar的item时会发生错误，即页面跳转了，但item效果未变。（图标未变，文字颜色未变）

定义下标字段和方法：tabBarIndex、updataTabBarIndex

// store.js
// 创建mobx store实例对象（共享的数据仓库）
// 导入
// 如果要使用action函数修改数据，需要在导入时加入action字段
import {action, observable} from "mobx-miniprogram"

// 导出
export const store = observable({
    // 数据字段
    tabBarIndex: 0,  //当前tabbar选中的item下标

    // 修改tabbar选中的item下标
    updataTabBarIndex: action(function(index){
        this.tabBarIndex = index;
    })
});

在tabbar组件中导入所需的数据字段和action修改方法：
active: “tabBarIndex” 和 actions:{updataTabBarIndex: “updataTabBarIndex”}

// custom-tab-bar/index.js
// 导入store mobx数据仓库
import {store} from "../store/store"

// 使用bindings包搭建页面与数据仓库之间的桥梁
import {storeBindingsBehavior} from "mobx-miniprogram-bindings";

Component({
    // 在behaviors添加storeBindingsBehavior来做绑定功能
    behaviors: [storeBindingsBehavior],

    // 配置对象
    storeBindings: {
            store: store, //指定要绑定的数据源
            fields: {
                active: "tabBarIndex"  // 存在mobx里的下标
            },
            actions:{
                updataTabBarIndex: "updataTabBarIndex"
            }
    },

    data: {
        active: 0,
    },

    methods: {
        onChange(event) {
            // event.detail 的值为当前选中项的索引
            this.setData({ active: event.detail });// 
            
            //   跳转tabbar页面
            wx.switchTab({
                url: this.data.list[event.detail].pagePath,
            }),

            // 将当前tabbar的下标值传入store，并更新为选中的下标
            this.updataTabBarIndex(event.detail);
          },
    }
})

在这里插入图片描述

4.完整代码

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view>商品列表：</view>
<view>
    ￥ 3999  数量：
    <van-button type="info" bindtap="changePhoneNum" data-step="{{1}}">+</van-button>
    {{goodsNum1}}
    <van-button type="danger" bindtap="changePhoneNum" data-step="{{-1}}">-</van-button>
</view>
<view>---------------</view>
<view>
    ￥ 7999  数量：
    <van-button type="info" bindtap="changeTaptopNum" data-step="{{1}}">+</van-button>
    {{goodsNum2}}
    <van-button type="danger" bindtap="changeTaptopNum" data-step="{{-1}}">-</van-button>
</view>

// pages/home/home.js
// 导入store mobx数据仓库
import {store} from "../../store/store"

// 使用bindings包搭建页面与数据仓库之间的桥梁
import {createStoreBindings} from "mobx-miniprogram-bindings";

Page({
    onLoad(options) {
        // 绑定mobx store对象
        // 第一个参数为将数据绑定到的地方，如此处为该页面
        // 第二个参数为要绑定的数据
        this.storeBindings = createStoreBindings(this, {
            store: store, // 指定store为数据源
            fields: ["goodsNum1", "goodsNum2", "goodsSum"], // 将store中需要使用的数据映射到页面的this.data中
            actions: ["updataGoodsNum1", "updataGoodsNum2"], // 将store中需要使用到的action方法映射到页面
        });
        //console.log(this); 
    },

    changePhoneNum(e){
        this.updataGoodsNum1(e.target.dataset.step);
    },
    changeTaptopNum(e){
        this.updataGoodsNum2(e.target.dataset.step);
    },
    
    // 生命周期函数：监听页面卸载
    onUnload: function(){
        // 清理工作
        this.storeBindings.destroyStoreBindings(); // 解绑mobx数据对象
    }
})

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#f00" inactive-color="#00f">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info}}">
    <image
      slot="icon"
      src="{{item.iconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    {{item.text}}
    </van-tabbar-item>
</van-tabbar>

// custom-tab-bar/index.js
// 导入store mobx数据仓库
import {store} from "../store/store"

// 使用bindings包搭建页面与数据仓库之间的桥梁
import {storeBindingsBehavior} from "mobx-miniprogram-bindings";

Component({
    // 在behaviors添加storeBindingsBehavior来做绑定功能
    behaviors: [storeBindingsBehavior],

    // 配置对象
    storeBindings: {
            store: store, //指定要绑定的数据源
            fields: {
                goodsSum: "goodsSum",
                active: "tabBarIndex"  // 存在mobx里的下标
            },
            actions:{
                updataTabBarIndex: "updataTabBarIndex"
            }
    },

    // 数据监听
    observers:{
        "goodsSum":function(newVal){
            this.setData({
                "list[2].info": newVal
            })
        }
    },

    options:{
        styleIsolation: "shared"
    },

    data: {
        active: 0,
        "list": [
            {
                "pagePath": "/pages/home/home",
                "text": "首页",
                "iconPath": "/images/tabbarhome.png",
                "selectedIconPath": "/images/tabbarhome-active.png",
            },
            {
                "pagePath": "/pages/categories/categories",
                "text": "分类",
                "iconPath": "/images/tabbar.png",
                "selectedIconPath": "/images/tabbar-active.png"
            },
            {
                "pagePath": "/pages/cart/cart",
                "text": "购物车",
                "iconPath": "/images/icontabbarshoppingup.png",
                "selectedIconPath": "/images/icontabbarshoppingup-active.png",
                "info": 0
            },
            {
                "pagePath": "/pages/me/me",
                "text": "我的",
                "iconPath": "/images/icontabbarmyup.png",
                "selectedIconPath": "/images/icontabbarmyup-active.png"
            }
        ]
    },

    methods: {
        onChange(event) {
            // event.detail 的值为当前选中项的索引
            this.setData({ active: event.detail });
            
            //   跳转tabbar页面
            wx.switchTab({
                url: this.data.list[event.detail].pagePath,
            }),

            // 将当前tabbar的下标值存入store，并更新为选中的下标
            this.updataTabBarIndex(event.detail);
          },
    }
})

// store.js
// 创建mobx store实例对象（共享的数据仓库）
// 导入
// 如果要使用action函数修改数据，需要在导入时加入action字段
import {action, observable} from "mobx-miniprogram"

// 导出
export const store = observable({
    // 数据字段
    goodsNum1: 1,
    goodsNum2: 1,
    tabBarIndex: 0,  //当前tabbar选中的item下标

    // 商品总数
    get goodsSum(){
        return this.goodsNum1 + this.goodsNum2;
    },

    // 修改商品数量
    updataGoodsNum1: action(function(val){
        // 限制最小数量为1
        if(this.goodsNum1 + val < 1){
            this.goodsNum1 = 1;
        }else{
            this.goodsNum1 += val;
        }
    }),
    updataGoodsNum2: action(function(val){
        // 限制最小数量为1
        if(this.goodsNum2 + val < 1){
            this.goodsNum2 = 1;
        }else{
            this.goodsNum2 += val;
        }
    }),

    // 修改tabbar选中的item下标
    updataTabBarIndex: action(function(index){
        this.tabBarIndex = index;
    })
});
分包和自定义tabBar
weixin_63579165的博客
10-19 1065
以上就是分包和自定义tabBar
微信小程序 五 npm 包 、安装 vant组件、promise组件、全局数据共享、 分包！！！、自定义 tabBar 案例
m0_55170432的博客
07-09 729
1.0 使用 npm 包 1.1 小程序对 npm 的支持与限制 目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制： 不支持依赖于 Node.js 内置库 的包 不支持依赖于 浏览器内置对象 的包 不支持依赖于 C++ 插件 的包 总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。 1.2 Vant Weapp Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小
配置分包加载以及打包、引用原则
2201_75709573的博客
08-19 476
小程序如果需要进行分包加载，需要在aoo.json中，通过subPackages或者subpackages定义分包结构。例：配置商品模块分包，分包包含：商品列表、商品详情两个页面。然后goodModule下多出pages文件夹。首先在app.json中进行配置。然后建立modules包结构。可到详情查看分包情况。
小程序基本命令
aiven1637的博客
10-30 3410
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
[ 微信小程序 ] - 自定义tabBar（微信官方示例）
i_coffer的博客
02-01 1028
该功能在小程序中应用场景多为根据不能角色来展示不同的tabBer, 解决方案可参考小程序官方 自定义tabBar: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 注意：tabBer中不能使用分包路径，如果需要建议主包添加跳转路径 内容放分包中。 即（a页面放在主包 通过a页面跳转至分包页面 ） 1. 创建 在项目目录下新建custom-tab-bar文件夹，如何再文件夹中新建 .
05-小程序◆ 使用 npm 包 ◆ 全局数据共享 ◆ 分包 ◆ 案例 - 自定义 tabBar
weixin_51353891的博客
11-06 427
◆ 使用 npm 包 ◆ 全局数据共享 ◆ 分包 ◆ 案例 - 自定义 tabBar ① 能够知道如何安装和配置 vant-weapp 组件库 ⚫ 参考 Vant 的官方文档 ② 能够知道如何使用 MobX 实现全局数据共享 ⚫ 安装包、创建 Store、参考官方文档进行使用 ③ 能够知道如何对小程序的 API 进行 Promise 化 ⚫ 安装包、在 app.js 中进行配置 ④ 能够知道如何实现自定义 tabBar 的效果 ⚫ Vant 组件库 + 自定义组件 + 全局数据共享 使用 npm 包 小.
【小程序】pages,subPackages,tabbar结构(仅供回忆)
CNSamRol的博客
01-21 442
【代码】【小程序】pages,subPackages,tabbar结构(仅供回忆)
【微信小程序TabBar性能优化】：自定义底部导航的性能考量
在第四章中，自定义TabBar的实现与优化被提出，并讨论了性能考量、维护和更新策略。第五章通过案例分析，展示了如何构建高效TabBar，并对其性能优化效果进行了评估。最后，第六章总结了TabBar性能优化的关键点，并对...
微信小程序滑动选项卡案例研究深度解析：成功与失败的实施要点
![微信小程序滑动选项卡案例研究深度解析：成功与失败的实施要点]... # 摘要 微信小程序中的滑动选项卡作为一种流行的用户交互组件，对于提升用户界面的易用性和体验至关重要。本文首先介绍了滑动选项卡的基本概念和...
uniapp小程序组件分包
最新发布
01-14
### UniApp 小程序组件分包实现方法 #### 配置文件设置 为了使小程序能够支持分包结构，在`app.json`中需要通过`subpackages`字段定义各个子包的信息。此操作允许开发者将不同模块拆分成独立的小型包，从而减少主包...
高级Java人才培训专家-000-小程序 - 基础加强
03-09
#### 案例 - 自定义 tabBar 自定义 tabBar 是一种常见的需求，可以让应用具有更个性化的外观。 - **实现步骤**： 1. 创建一个专门用于 tabBar 的自定义组件。 2. 在 `app.json` 中配置 tabBar 的路径。 3. 定制...
微信小程序分包，优势与劣势。
weixin_46031104的博客
10-28 3782
"离线包"机制 微信小程序采用的是类似离线包加载方案，以 转转 小程序为例，当用户第一次打开时会先下载好所有代码，然后再加载页面；当用户再次进入转转小程序时，会直接使用已下载的代码，省去了代码下载的过程，打开速度更快。 看似很美好的设计，但有两个问题： 第一次打开转转小程序时白屏时间很长，因为要下载接近2.5M的代码量，也就是说你的代码越多，白屏时间越长，而转转APP采用的网页离线机制体验更佳：在用户打开APP时就下载/更新离线包，这样在用户进入对应的网页时，代码已经下载好了，没有漫长的白屏过程。 代码有部
小程序tabbar能放分包路径吗_微信小程序 - 分包加载（分包使用）
weixin_29737207的博客
12-30 3503
使用分包(建议主包添加跳转路径，分包放内容)在app.json配置"subpackages"在pages同级目录新建文件夹以及文件打包原则声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app(主包) 中app(主包)也可以有自己的 pages(即最外层的 pages 字段)subpackage 的根目录不能是另...
20220117
菜鸡成长站
01-17 827
[今天麻了，不太想学习，两天没跟活人说话了，麻了，随意记记] API Promise化 什么是 API Promise 化 API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题 全局数据共享 创建 MobX 的 Store 实例 将 Store 中的成员绑定到页面中 4. 在页面上使用 Store 中的成员 5. 将 Store 中的成员绑定到组件中 6
微信小程序使用分包subpackages
Eleuuuuy的博客
09-07 1558
微信小程序分包
微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
weixin_43299180的博客
03-29 2795
文章目录一、自定义组件1、创建组件2、引用组件3、组件和页面区别4、组件样式5、data、methods、properties6、小程序的 data 和 properties 区别7、数据监听器8、纯数据字段9、组件的生命周期10、组件所在页面生命周期11、插槽12、父子组件数据传递13、behaviors二、使用 npm 包1、Vant Weapp三、小程序 API 的 Promise 化1、为什么要 Pronise 化2、实现 Promise 化3、调用 Promise 化的 API四、全局数据共享1、
【uni-app】subPackages 分包加载机制
admin12345671的博客
07-09 986
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。 小程序分包加载 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。 切记一条，如果你的项目是要实现tabBar底部导航的，tab的页面一定要放在pages下面，不能放分包.
【详讲】微信小程序分包流程步骤
热门推荐
Brod-Roy的博客
02-28 2万+
本文基于微信小程序的官方文档，对分包的概念以及具体的操作流程进行讲解。
uniapp写小程序如何实现分包
weixin_45041493的博客
03-27 1133
众所众知小程序上传的过程中对包的大小有限制，正常情况下不允许当个包超过2M，所以需要分包。需要再pages.json这个文件夹中进行配置。
ESTabBarController：Swift自定义TabBar动画与徽章解决方案
综上所述，ESTabBarController是一个功能丰富、高度可定制的TabBar组件，它大大简化了开发者自定义UITabBar的过程，并且与UITabBarController保持了良好的兼容性。通过它，开发者不仅能够实现复杂的设计需求，还能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laker 23

要秃啦，支持一下嘛~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值