需要添加的tabbar有三个页面，分别为首页、课程页、我的。如下图所示：
image.png

新建文件

src/pages/index/index.vue
src/pages/course/index.vue
src/pages/user/index.vue

Tips: 注意文件命名与uni-app关键字不要冲突，不然可能会报错，然后你还找不到错误是啥

文件内容：

  1. <template>
  2.   <view class="content"> 首页 </view>
  3. </template>
  5. <script>
  6.   export default {
  7.     data() {
  8.       return {
  9.         title: "Hello",
  10.       };
  11.     },
  12.     onLoad() {},
  13.     methods: {},
  14.   };
  15. </script>
  17. <style>
  19. </style>

现在需要把页面添加到page.json中去

  1. "pages": [
  2.   {
  3.     "path": "pages/index/index",
  4.     "style": {
  5.       "navigationBarTitleText": "谷粒微课"
  6.     }
  7.   },
  8.   {
  9.     "path": "pages/course/index",
  10.     "style": {
  11.       "navigationBarTitleText": "谷粒微课"
  12.     }
  13.   },
  14.   {
  15.     "path": "pages/user/index",
  16.     "style": {
  17.       "navigationBarTitleText": "谷粒微课"
  18.     }
  19.   }
  20. ],

配置tabbar,也是在page.json中配置，更多配置参数参考配置项列表。

  1. "tabBar": {
  2.         "backgroundColor": "#17181a",
  3.         "selectedColor": "#409EFF",
  4.         "color": "#a1a7b2",
  5.         "list": [
  6.             {
  7.                 "pagePath": "pages/index/index",
  8.                 "iconPath": "static/images/nav/home-off.png",
  9.                 "selectedIconPath": "static/images/nav/home-on.png",
  10.                 "text": "首页"
  11.             },
  12.             {
  13.                 "pagePath": "pages/course/index",
  14.                 "iconPath": "static/images/nav/list-off.png",
  15.                 "selectedIconPath": "static/images/nav/list-on.png",
  16.                 "text": "课程"
  17.             },
  18.             {
  19.                 "pagePath": "pages/user/index",
  20.                 "iconPath": "static/images/nav/my-off.png",
  21.                 "selectedIconPath": "static/images/nav/my-on.png",
  22.                 "text": "我的"
  23.             }
  24.         ]
  25.     },

现在我们在页面中看到的就是开始那个页面。