taro开发钉钉小程序，打包后真机测试tabbar丢失解决方案，以及在小程序上使用路由守卫_taro 可以用vue router

吐槽一下，最近公司让我搞钉钉小程序，因为公司用的是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中有些数据是请求回来的但是页面渲染出来了数据还没有返回给我，造成页面上的报错等等，反正有守卫还是挺好用的。
路由守卫的使用就自己去看文档哈 

导航守卫 | Vue Router (vuejs.org)