[微信小程序自学文档一]tabBar的一些记录，包括原生使用，组件使用，自定义使用三种

微信小程序合集

---

一. Tabbar 底部导航要点

---

1.微信小程序中自带的tabbar(推荐）

在app.json文件中设置tabBar属性，包括tabBar的背景色、文字颜色、选中态的颜色、图标等。代码如下：

---

  "tabBar": {

​    "custom": true,

​    "color": "#000000",

​    "selectedColor": "#000000",

​    "backgroundColor": "#000000",

​    "list": [{
                "pagePath": "pages/index/index",
                "text":"首页",
                "iconPath": "yourIconSrc",
                "selectedIconPath": "yourIconSrc",
                "renderer": "webview"
            },
            ...
                   ]}
              }

"custom": true是在微信小程序中定义页面导航栏时使用的一个属性，用于指示是否使用自定义导航栏。当设置为true时，将不显示系统默认的导航栏，而是使用开发者自定义的导航栏。

---

2.使用组件的Tabbar，以LinUI为例

LinUI组件准备

• LinUI下载，下载连接：TaleLin/lin-ui: 简洁、易用、灵活的微信小程序组件库 (github.com)[源码安装用，不多赘述]

• 使用nmp安装

1. 初始化你的项目为一个npm项目：

打开你的微信小程序，在根目录下打开终端，输入

 npm init -y

若项目根目录已包含 package.json 文件，则可跳过

2. 安装 LinUI

 npm i lin-ui

3. 配置微信开发者工具 要正确安装 Lin UI，需将微信开发者工具的如下三个选项全部勾选上

• 使用 npm 模块

• 增强编译

• ES6 转 ES5

设置路径：微信开发者工具右上角 -> 详情 -> 本地设置

4. 构建 NPM 模块 微信开发者工具配置完成以后，还需进行一次 NPM 模块的构建

5. 按钮位置：微信开发者工具顶部 -> 工具 -> 构建 npm

若你本地没有 Node.js 环境，无法使用 NPM 安装]( https://doc.mini.talelin.com/start/# 方式二：下载代码)

构建成功后，在你的根目录下会出现一个名为”miniprogram_npm“的组件文件

组件的使用

引入组件

• 在页面中引入（注意：底部导航栏使用需要引入tab-bar）

在app.json中添加：

 {
   "usingComponents":{
     "l-tabbar":"/miniprogram_npm/lin-ui/tab-bar/index"
   }
 }

同时在app.json中添加tabBar，其中的