­

uni-app學習筆記-手動配置底部導航（二）

  • 2019 年 12 月 11 日
  • 筆記

公司開發需要，打算花幾天的時間，使用uni-app做一個考勤打卡app，功能很簡單，使用上下班打卡，具體的考勤時間顯示，當天考勤缺勤的人數統計，以及登錄界面，個人信息頭像顯示界面。

前面以及對於uni-app的編輯器下載安裝，以及新建一個項目的模板作了說明了，今天就先手動配置一下底部導航，模塊不多，四個就夠了。

1：新建一個空白項目 文件，新建，項目，新建一個uni-app

選擇運行，在瀏覽器運行，現在已經創建空白模板了，開始寫項目

2：配置一下底部導航 當然可以選擇新建模板就帶有底部導航的模板，也可以自己手動配置，這裡說一下手動配置對的步驟：

在pages裏面新建4個頁面

3：打開pages.json

寫入新建的4個頁面的路徑

並且加上圖標的路徑

pages.json如下：

{      "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages          {              "path": "pages/tabbar/tabbar-1/tabbar-1",              "style": {                  "navigationBarTitleText": "uni-app"              }          },          {              "path": "pages/tabbar/tabbar-2/tabbar-2",              "style": {}          },          {              "path": "pages/tabbar/tabbar-3/tabbar-3",              "style": {}          },          {              "path": "pages/tabbar/tabbar-4/tabbar-4",              "style": {}          }      ],      "globalStyle": {          "navigationBarTextStyle": "black",          "navigationBarTitleText": "uni-app",          "navigationBarBackgroundColor": "#F8F8F8",          "backgroundColor": "#F8F8F8"      },      "tabBar": {          "borderStyle": "black",      //  "backgroundColor": "#333",          "color": "#8F8F94",          "selectedColor": "#f33e54",          "list": [{                  "pagePath": "pages/tabbar/tabbar-1/tabbar-1",                  "iconPath": "static/img/tabbar/home.png",                  "selectedIconPath": "static/img/tabbar/homeactive.png",                  "text": "首頁"              },              {                  "pagePath": "pages/tabbar/tabbar-2/tabbar-2",                  "iconPath": "static/img/tabbar/guanzhu.png",                  "selectedIconPath": "static/img/tabbar/guanzhuactive.png",                  "text": "關注"              },              {                  "pagePath": "pages/tabbar/tabbar-3/tabbar-3",                  "iconPath": "static/img/tabbar/news.png",                  "selectedIconPath": "static/img/tabbar/newsactive.png",                  "text": "消息"              },              {                  "pagePath": "pages/tabbar/tabbar-4/tabbar-4",                  "iconPath": "static/img/tabbar/me.png",                  "selectedIconPath": "static/img/tabbar/meactive.png",                  "text": "我的"              }          ]      }  }

ok，導航做好了，接下來就是完善每一個頁面 裏面的具體內容啦：

VirMach 便宜 VPS

QNews

QNews