mpvue+微信小程序底部导航Tabbar不显示bug

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013584334/article/details/82925022

原生微信小程序中，tabbar在app.json文件中配置，详见开发文档

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

---

对应mpvue，有两种设置方式：

一、在main.js中设置

    需注意：

• Eslint检查要求string类型为单引号（json文件要求双引号）
• pages字段注册页面时，页面前带有^符号的会被翻译成首页
• 如果包含tabbar的页面不设置为首页显示，则无法正常显示tabbar（建议把index路径设置为带tabbar的首页）

import Vue from 'vue'
import App from './App'

//引入store
import store from './store/index'
//把store挂载到全局
Vue.prototype.$store = store;

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

//此部分会被翻译为小程序的app.json
export default {
  // 这个字段设置路由、title、tabbar
  config: {
    // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
    // eslint检测字符串必须用单引号
    'pages': ['^pages/notification/main', 'pages/trending/main', 'pages/profile/main', 'pages/search/main'],
    'window': {
      'backgroundTextStyle': 'light',
      'navigationBarBackgroundColor': '#fff',
      'navigationBarTitleText': 'MiniGithub',
      'navigationBarTextStyle': 'black'
    },
    'tabBar': {
      'backgroundColor': '#fafafa',
      'borderStyle': 'white',
      'selectedColor': '#b4282d',
      'color': '#666',
      'list': [{
        'pagePath': 'pages/notification/main',
        'text': 'Notification'
      },
      {
        'pagePath': 'pages/trending/main',
        'text': 'Trending'
      },
      {
        'pagePath': 'pages/profile/main',
        'text': 'Profile'
      },
      {
        'pagePath': 'pages/search/main',
        'text': 'Search'
      }
      ]
    }
  }
}

二、在app.json中设置

需注意：

• pages字段注册页面时，第一个字段即pages/notification/main会被翻译成首页
• Eslint检查要求json格式为双引号

{
  "pages": [
    "pages/notification/main",
    "pages/index/main",
    "pages/logs/main",
    "pages/counter/main",
    "pages/trending/main",
    "pages/profile/main",
    "pages/search/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "MiniGithub",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "backgroundColor": "#fafafa",
    "borderStyle": "white",
    "selectedColor": "#b4282d",
    "color": "#666",
    "list": [
      {
        "pagePath": "pages/notification/main",
        "text": "Notification"
      },
      {
        "pagePath": "pages/trending/main",
        "text": "Trending"
      }
    ]
  }
}

npm run dev编译mpvue项目后在微信开发者工具中运行打包好的dist文件夹，最终效果：