一、初始化項目

1.1 初始化index.vue

打開/index/index.vue 將內容替換為以下內容

<template><view class="content">hello uniapp</view>
</template><script>export default {data() {return {}},onLoad() {},methods: {}}
</script><style></style>

1.2 刪除無用文件

刪除static下的所有文件。

1.3 初始化后的目錄結果如下

二、文件目錄分析

2.1 核心文件

文件/文件夾	作用
App.vue	UniApp 的??根組件??，所有頁面共享的全局樣式、邏輯（如登錄狀態管理）在這里定義。
??main.js	應用入口文件，初始化 Vue 實例并掛載到全局，可在此引入第三方庫（如 Vuex、自定義插件）
??index.html	Web 平臺的 HTML 入口模板，通常無需修改，H5 打包時會自動注入資源引用。
??manifest.json	??應用配置清單??，定義應用名稱、圖標、啟動頁、SDK 配置（如微信小程序 AppID）等跨平臺參數。
??pages.json	??路由與頁面配置??，注冊頁面路徑、導航欄樣式、TabBar 等，類似小程序 app.json。
??uni.scss	全局 SCSS 變量文件，定義顏色、間距等復用樣式，可在所有組件中通過 @import引用。

2.2 關鍵文件夾?

文件夾	作用
??pages	存放所有??頁面組件??，每個子文件夾（如 index/）對應一個頁面，包含 .vue文件（組件）和可選的 .js/.json配置文件。
static	靜態資源目錄??，存放圖片、字體、JSON 數據等，文件會原樣拷貝到最終產物（不經過 webpack 編譯）。
?? unpackage	??構建輸出目錄??（由 HBuilderX 自動生成），包含各平臺（如小程序、H5）的編譯后代碼。子目錄 dist/dev/是開發環境產物，dist/build/是生產環境產物。
??.hbuilderx	HBuilderX IDE 的??項目配置緩存??，包含編輯器狀態、插件數據等，刪除后重啟 IDE 會重建。

2.3 其他文件

文件	作用
??uni.promisify.adaptor.js	UniApp 的 ??API Promise 化適配器??，將回調風格的 API（如 uni.request）轉為 Promise 形式，需在 main.js中引入。

2.4 注意事項??

??不要隨意刪除的文件??：

• manifest.json、pages.json、App.vue、main.js是項目運行必需文件。
• unpackage/dist/是構建結果，刪除后重新運行 npm run dev可自動生成。

??可安全刪除的目錄??：

• .hbuilderx：IDE 臨時配置，但刪除后可能丟失個性化設置。
• unpackage：構建產物，但需確保已備份必要配置（如微信小程序的 project.config.json）。

三、創建頁面(pages)

3.1 創建home頁面

1. 選擇pages 右擊選擇新建頁面
   
2. 填寫創建名稱。注意不同版本可能不一樣，只要勾選了一下選項就行。
   
3. 結果如下
   

3.2 創建其他頁面

繼續上述步驟，再分別新建short,save,cart,my頁面，意思為短視頻，省錢，購物車，我的。

結果如下

3.3 查看pages.json

使用Shift+Alt+F快捷鍵整理樣式，可以發現多了一下頁面

{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}, {"path": "pages/home/home","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

3.4 刪除index頁面和pages.json的配置

刪除pages下面的index頁面

刪除后的pages.json的文件內容如下

{"pages": [{"path": "pages/home/home","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

四、配置導航(pages.json)

4.1 尋找圖標并添加到項目

我們可以給上面的五個頁面的每個頁面都找兩個相應的圖標，一個選中的圖標一個未選中的圖標，可以去阿里巴巴矢量庫尋找。可以參考我的圖標。

講這些圖標放到tab_icons文件夾中然后放到uni-app項目中的static文件夾下面

4.2 在pages.json中配置tabBar節點

{"pages": [{"path": "pages/home/home","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#9a9a9a", // 未選中時文字的演示"selectedColor": "#FF2325", // 選中時文字的顏色"list": [{"pagePath": "pages/home/home", // 路徑"iconPath": "static/tab_icons/home.png",// 未選中時的圖標"selectedIconPath": "static/tab_icons/home-active.png",//選中時的圖標"text": "首頁"// 文本},{"pagePath": "pages/short/short","iconPath": "static/tab_icons/short-video.png","selectedIconPath": "static/tab_icons/short-video-active.png","text": "短視頻"},{"pagePath": "pages/save/save","iconPath": "static/tab_icons/save-money.png","selectedIconPath": "static/tab_icons/save-money-active.png","text": "超級會場"},{"pagePath": "pages/cart/cart","iconPath": "static/tab_icons/shop.png","selectedIconPath": "static/tab_icons/shop-active.png","text": "購物車"},{"pagePath": "pages/my/my","iconPath": "static/tab_icons/smile.png","selectedIconPath": "static/tab_icons/smile-active.png","text": "我的"}]},"uniIdRouter": {}
}

五、配置pages.json中的globalStyle節點

刪除每個pages節點下面的"navigationBarTitleText": "",配置。
使用globalStyle全局節點的"navigationBarTitleText": "仿京東",

{"pages": [{"path": "pages/home/home","style": {"enablePullDownRefresh": false}}, {"path": "pages/short/short","style": {"enablePullDownRefresh": false}}, {"path": "pages/save/save","style": {"enablePullDownRefresh": false}}, {"path": "pages/cart/cart","style": {"enablePullDownRefresh": false}}, {"path": "pages/my/my","style": {"enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "white",// "navigationBarTitleText": "仿京東",//文字"navigationBarBackgroundColor": "#FF2525",// 導航欄背景顏色"backgroundColor": "#F8F8F8"// 下拉顯示出來的窗口的背景色},"tabBar": {"color": "#9a9a9a", // 未選中時文字的演示"selectedColor": "#FF2325", // 選中時文字的顏色"list": [{"pagePath": "pages/home/home","iconPath": "static/tab_icons/home.png","selectedIconPath": "static/tab_icons/home-active.png","text": "首頁"},{"pagePath": "pages/short/short","iconPath": "static/tab_icons/short-video.png","selectedIconPath": "static/tab_icons/short-video-active.png","text": "短視頻"},{"pagePath": "pages/save/save","iconPath": "static/tab_icons/save-money.png","selectedIconPath": "static/tab_icons/save-money-active.png","text": "超級會場"},{"pagePath": "pages/cart/cart","iconPath": "static/tab_icons/shop.png","selectedIconPath": "static/tab_icons/shop-active.png","text": "購物車"},{"pagePath": "pages/my/my","iconPath": "static/tab_icons/smile.png","selectedIconPath": "static/tab_icons/smile-active.png","text": "我的"}]},"uniIdRouter": {}
}

運行結果如下

六、關于pages.json配置可參考官網

https://uniapp.dcloud.net.cn/collocation/pages.html