吐槽一下，最近公司让我搞钉钉小程序，因为公司用的是taro框架，本来这个框架的社区人就比较少，taro开发钉钉小程序的人更少，以致于遇到的bug和坑在网上都找不到解决方案，挺难受的。今天搞定taro编译钉钉小程序真机测试时底部tabbar丢失问题，分享一下解决方案。
在taro编译成小程序的时候，在开发工具的模拟器里面，通过配置app.config.ts文件配置tabbar，是可以正常显示的,配置如下
//app.config.ts
tabBar: {
custom: false,
color: PRIMARY_COLOR,
selectedColor: PRIMARY_COLOR,
backgroundColor: '#ffffff',
borderStyle: 'white',
list: [
{
text: '首页',
pagePath: 'pages/tab-bar/index',
iconPath: 'assets/tabbar-icon/deafult/index.png',
selectedIconPath: 'assets/tabbar-icon/selected/index.png'
},
{
text: 'CRM',
pagePath: 'pages/tab-bar/crm',
iconPath: 'assets/tabbar-icon/deafult/crm.png',
selectedIconPath: 'assets/tabbar-icon/selected/crm.png'
},
{
text: '财务',
pagePath: 'pages/tab-bar/finance',
iconPath: 'assets/tabbar-icon/deafult/finance.png',
selectedIconPath: 'assets/tabbar-icon/selected/finance.png'
},
{
text: '审批',
pagePath: 'pages/tab-bar/oa',
iconPath: 'assets/tabbar-icon/deafult/oa.png',
selectedIconPath: 'assets/tabbar-icon/selected/oa.png'
},
{
text: '我的',
pagePath: 'pages/tab-bar/my',
iconPath: 'assets/tabbar-icon/deafult/my.png',
selectedIconPath: 'assets/tabbar-icon/selected/my.png'
}
],
},开发工具模拟器中↓ 打包后真机测试↓(底部的tabbar没了)
我打开调试器，检查页面上的元素时，居然页面上根本没有渲染tabbar的元素的，但是为啥能显示出来这里我就不知道了。 可能有人会说 配置custom: true,然后换成自定义tabbar就可以解决，经过我实验之后并不能，走坑的过程我就不描述了。
然后不断翻阅taro的文档，百度。发现根本没人发表过相关的解决方法。 一次不小心给我在taro文档上看到这个 文档传送门
3.6以上版本的taro支持使用vue-router的路由库，这样的话那我在小程序只用一个页面，然后自己写一个tabbar，然后由于整个小程序只有一个页面的话，这个tabbar用fixed定位定在底部，点击对应的图标跳转到对应路由也可以实现界面切换，这就等于和写h5的程序一样了，tabbar丢失的问题也就解决了！！！
下面是操作步骤：
第一步，当然是升级taro的版本，我当时使用的taro版本是3.4.7版本的，是不支持路由库的。
步骤1、查看taro版本 查看latest下的版本号 我当前是3.6.4
npm info @tarojs/cli步骤2 安装新版本
指令安装指定版本：
#使用 yarn 安装依赖
$ yarn global add @tarojs/cli@3.6.4
#使用 cnpm 安装依赖
$ cnpm install -g @tarojs/cli@3.6.4
#使用 npm 安装依赖
$ npm install -g @tarojs/cli@3.6.4指令安装最新版本：
#使用 yarn 安装依赖
$ yarn global add @tarojs/cli
#使用 cnpm 安装依赖
$ cnpm install -g @tarojs/cli
#使用 npm 安装依赖
$ npm install -g @tarojs/cli步骤三 查看最新版本是否安装成功 我的当时还是显示旧版本但是继续下一步也没事可能是缓存
taro -v步骤四 更新项目配置 更新package.json 里的配置 会发现里面的版本号变成你刚刚安装的版本了
taro update project最后一步 最好从新安装一下包
yarn
npm i
cnpm i项目配置里面 配置上这个插件 @tarojs/plugin-html' 为了使用h5标签开发小程序，也为了适配vue-router路由包
这里有一个坑，直接运行会报错
taro update project 这个指令能将下面红色的包更新了，但是 绿色的@tarojs/plugin-framework-vue3 这个包不会自动更新要自己手动安装 版本号和taro一致就行
yarn add @tarojs/plugin-framework-vue3@3.6.4别忘了你还差了vue-router包
yarn add vue-router@4然后就是修改项目里面的配置了 不会的跟着下面来 app.config.ts这里面的tabbar有关的配置可以删除 剩下这些，整个项目只需要配置一个页面了
//app.config.ts
const PRIMARY_COLOR = '#E28A43'
export default defineAppConfig({
pages: ['pages/index'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: PRIMARY_COLOR,
navigationBarTitleText: 'ERP',
navigationBarTextStyle: 'white',
pullRefresh: true // 可下拉刷新
}
})//pages/index.vue
<template>
<div>
<router-view />
<nut-tabbar
bottom
@tab-switch="tabSwitch"
>
<nut-tabbar-item
tab-title="首页"
href="/index"
:icon="Home"
:value="11"
/>
<nut-tabbar-item
tab-title="crm"
href="/crm"
:icon="Category"
/>
<nut-tabbar-item
tab-title="财务"
href="/financ"
:icon="Order"
:value="110"
/>
<nut-tabbar-item
tab-title="审批"
href="/oa"
:icon="Comment"
/>
<nut-tabbar-item
tab-title="我的"
href="/my"
:icon="People"
/>
</nut-tabbar>
</div>
</template>
<script lang="ts" setup>
import { Home, Category, Order, Comment, People } from '@nutui/icons-vue-taro'
import { useRouter } from 'vue-router'
const router = useRouter()
function tabSwitch(item, index) {
router.push(item.href)
console.log(item, index)
}
</script>然后路由的配置就和写pc的vue项目一样 不会的同学这里有传送门 自己看哈 Vue Router | Vue.js 的官方路由 (vuejs.org) 我的配置这样，你们可以参考一下毕竟项目每个人的不一样
我这分多层来写是为了后面我想做不同的中间配置，你们可以不需要这么多层
然后就大工告成拉！！！ 路由跳转直接就可以使用router.push（）这些了
既然使用了vue-router 那么项目中也就可以使用路由守卫做到一些自己需要做的事情，弥补小程序上没有守卫的缺点， 比如我之前项目中遇到的因为没有守卫，我的pina中有些数据是请求回来的但是页面渲染出来了数据还没有返回给我，造成页面上的报错等等，反正有守卫还是挺好用的。 路由守卫的使用就自己去看文档哈
