pages.json

這個文件只要是來配置頁面信息的。可以觀察剛剛我們運行起來的項目。


這個章節將會過一下pages.json。先上文檔，其實無論是taro的還是uni-app的，基本上都一致，常規用法是Taro.xxx,Uni.xxx方法名基本上一致，當然配置文件也是，不然怎么兼容到小程序呢，所以這里我們只講一遍。
uni-app-pages.json文檔
taro的有點不同
taro文檔
taro的pages是string的Array也就是這樣

單個頁面配置文檔

我們從uni-app的講起來，taro也一樣，只是配置字段位置不同而已。

pages

這里主要是定義頁面的。

主要關注style，文檔位置
這里有很多，大家可以自己嘗試我們來嘗試幾個。

style-navigationBarBackgroundColor

導航欄背景色

style-navigationBarTitleText

導航欄標題

style-navigationStyle

如果你想自定義導航欄，取消默認的。

設置了為custom后，默認導航欄會消失。頁面內容從最頂部開始，這個時候就要處理安全區域，也就是避免被遮擋，在uni-app中，其實已經幫我們處理好了一些。這是注意事項

style-enablePullDownRefresh

下拉刷新

這個時候下拉內容，就會出現刷新狀態

uni-app的頁面生命周期里面有這個

后面我們做頁面刷新會講到，這里先掃盲。

注意事項

注意文檔中標注的平臺差異，有些平臺不支持。

不同平臺區分配置

如果你想不同的平臺配置不同，當然可以，如下，微信小程序的。

新建頁面

新建頁面不需要自己手動創建文件夾什么的。右鍵pages文件夾

可以選擇路徑，模版，填名稱。

globalStyle

這個和pages里面的style基本一致，只是這里是全局的。

tabBar

導航欄

文檔

我們先找幾個圖標
阿里矢量圖

隨機找幾個就行，下一個深色的，一個淺色的

圖片丟到static目錄下.

不要著急跟著敲，下面有代碼。
selectedIconPath就是選中時的icon，
iconPath時沒選中的時候的

其他配置還有很多，如position，默認是底部，配置這個會在頂部展示，
但是只支持微信小程序

其他的配置將會在使用的時候再講，如分包。

代碼

{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁","navigationBarBackgroundColor": "#007aff","navigationStyle":"custom","enablePullDownRefresh":true,"mp-weixin": {"navigationStyle":"default","navigationBarTitleText":"微信首頁"}}},{"path" : "pages/mine/mine","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#7A7E83","selectedColor": "#007aff","borderStyle": "black","backgroundColor": "#ffffff","position": "top","list": [{"pagePath": "pages/index/index","iconPath": "/static/home_no_sl.png","selectedIconPath": "/static/home.png","text": "首頁"},{"pagePath": "pages/mine/mine","iconPath": "/static/home_no_sl.png","selectedIconPath": "/static/home.png","text": "我的"}]},"uniIdRouter": {}
}

manifest.json

這個配置，Hbuilder X中打開，他幫我們做成可視化的了。


我們在微信小程序配置

在源碼視圖中可以看到

在小程序的配置中也是可以看到的

如果有一些配置，沒有在可視化配置看到，也可以在這里手動配置。
配置文檔
比如你要跳轉其他小程序，就要配置

如果你需要用戶的一些授權，如位置授權，如手機號，或者視頻聊天等等，需要配置permission

我們來做幾個嘗試

授權

授權一覽
配置位置信息獲取以及攝像頭

其他的看文檔即可。插件的話，后面講使用插件會講到。

app的配置，可視化配置已經挺全的了。

一般的開發，基本上配置不到太多，主要的還是業務的開發，這些不需要理解什么的，只要有這一些配置就行了。

web配置代理

vite.config.js

我們在開發h5的時候，會碰到跨域，這個時候需要配置代理。
在根目錄下新建vite.config.js文件

import {defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';export default defineConfig({plugins: [uni()],server: {port: 5177,proxy: {'/api': {target: 'http://localhost:3000/',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},}
});

這里配置了/api會轉發到localhost:3000,port的話，是啟動的port，現在我們運行到瀏覽器，然后嘗試下。這里我隨便請求的。

可以看到響應

其他更多配置參考vite的配置項.