小程序自定义tabBar+Vant weapp

news2024/10/6 16:29:18

1.构建npm，安装Vant weapp：

1）根目录下，初始化生成依赖文件package.json

npm init -y

2）安装vant

# 通过 npm 安装
npm i @vant/weapp -S --production

3）修改 package.json 文件

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置（修改miniprogramNpmDistDir的路径）。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

***注意***：

由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为 ‘./’ 即可。

4）构建npm包：点击左上角工具--->构建npm--->显示构建完成

2. 测试引入和使用vant组件

1)引入：

// 通过 npm 安装的vant
// 在app.json

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

2）使用：

// 在wxml中：

<van-button type="primary">按钮</van-button>

3. 自定义tabBar配置：

1）在app.json 以下代码添加对应文件

{
  "pages": [
    "custom-tab-bar/index",
    "pages/home/home",
    "pages/topic/topic",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user"
  ],
}

2）注意第1点生成的tabBar 代码文件custom-tab-bar是在根目录下的，生成了以下文件

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

3）在app.json配置tabBar信息

在 app.json 中的 tabBar 项指定 custom 字段为true，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
这里的pagePath值前面没有“/”。

"tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页"
  },{
      "pagePath": "pages/topic/topic",
      "text": "专题"
  },{
      "pagePath": "pages/category/category",
      "text": "分类"
  },{
      "pagePath": "pages/cart/cart",
      "text": "购物车"
  },{
      "pagePath": "pages/user/user",
      "text": "我的"
  }]
  },
  "usingComponents": {}

4) 配置active为活动的tab的索引，默认为0则显示首页，iconPath即为vant中的图标，text是文字，path对应路径值，记得前面有“/”。

// custom-tab-bar/index.js
Component({
    data: {
        active: 0,
        list: [
            {
                iconPath: "home-o",
                text: "首页",
                path: "/pages/home/home"
            },
            {
                iconPath: "label-o",
                text: "专题",
                path: "/pages/topic/topic"
            },
            {
                iconPath: "apps-o",
                text: "分类",
                path: "/pages/category/category"
            },
            {
                iconPath: "cart-o",
                text: "购物车",
                path: "/pages/cart/cart"
            },
            {
                iconPath: "user-o",
                text: "我的",
                path: "/pages/user/user"
            }
        ]
    },
    methods: {
        onChange(event) {
            // event.detail 的值为当前选中项的索引
            wx.switchTab({
              url: this.data.list[event.detail].path
            });
        },
    }
})

5）引入组件

// custom-tab-bar/index.json

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

6）页面结构

// custom-tab-bar/index.wxml

<van-tabbar class="tab-bar" active="{{ active }}" bind:change="onChange" active-color="darkred" inactive-color="#333">
    <block wx:for="{{list}}" wx:key="index">
        <van-tabbar-item icon="{{item.iconPath}}">{{item.text}}</van-tabbar-item>
    </block>
</van-tabbar>

7) 动态修改tab样式

在每个子页面修改active的值，来动态修改tabBar选中样式

例如在cart.js中active改为3，即在页面中显示的索引为3