前言 

經(jīng)過半個多月的學(xué)習(xí)，vue基礎(chǔ)入門就告一段落啦，接下來就要開始學(xué)習(xí)制作微信小程序了，既然要學(xué)微信小程序，那么uni-app入門學(xué)習(xí)當(dāng)然是必不可少的啦，接下來我就和大家一起零基礎(chǔ)入門uni-app 

創(chuàng)建 uni-app 項目 

通過 HBuilderX 創(chuàng)建

 1. 下載安裝 HbuilderX 編輯器

2. 通過 HbuilderX 創(chuàng)建 uni-app vue3 項目  

 3. 安裝 uni-app vue3 編譯器插件

 4 .編譯成微信小程序端代碼

 5. 開啟服務(wù)端口

 總結(jié)：

pages.json 

pages 

uni-app 通過 pages 節(jié)點配置應(yīng)用由哪些頁面組成，pages 節(jié)點接收一個數(shù)組，數(shù)組每個項都是一個對象，其屬性值如下：

Tips：

• pages節(jié)點的第一項為應(yīng)用入口頁（即首頁）
• 應(yīng)用中新增/減少頁面，都需要對 pages 數(shù)組進行修改
• 文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { ... }
        }, {
            "path": "pages/login/login",
            "style": { ... }
        }
    ]
}

style 

用于設(shè)置每個頁面的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。

頁面中配置項會覆蓋 globalStyle 中相同的配置項

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁",//設(shè)置頁面標(biāo)題文字
        "enablePullDownRefresh":true//開啟下拉刷新
      }
    },
    ...
  ]
}

globalStyle

用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。

注意

• 支付寶小程序使用titleImage時必須使用https的圖片鏈接地址，需要真機調(diào)試才能看到效果，支付寶開發(fā)者工具內(nèi)無效果
• globalStyle中設(shè)置的titleImage也會覆蓋掉pages->style內(nèi)的設(shè)置文字標(biāo)題
• 使用 maxWidth 時，頁面內(nèi)fixed元素需要使用--window-left,--window-right來保證布局位置正確
• dynamicRpx vue3 nvue頁面已移除此配置，升級為橫豎屏切換自動rpx，如果不需要可以使用 px

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},

tabBar

設(shè)置底部 tab 的表現(xiàn)

如果應(yīng)用是一個多 tab 應(yīng)用，可以通過 tabBar 配置項指定一級導(dǎo)航欄，以及 tab 切換時顯示的對應(yīng)頁。

在 pages.json 中提供 tabBar 配置，不僅僅是為了方便快速開發(fā)導(dǎo)航，更重要的是在App和小程序端提升性能。在這兩個平臺，底層原生引擎在啟動時無需等待js引擎初始化，即可直接讀取 pages.json 中配置的 tabBar 信息，渲染原生tab。

Tips

• 當(dāng)設(shè)置 position 為 top 時，將不會顯示 icon
• tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。
• tabbar 切換第一次加載時可能渲染不及時，可以在每個tabbar頁面的onLoad生命周期里先彈出一個等待雪花（hello uni-app使用了此方式）
• tabbar 的頁面展現(xiàn)過一次后就保留在內(nèi)存中，再次切換 tabbar 頁面，只會觸發(fā)每個頁面的onShow，不會再觸發(fā)onLoad。
• 頂部的 tabbar 目前僅微信小程序上支持。需要用到頂部選項卡的話，建議不使用 tabbar 的頂部設(shè)置，而是自己做頂部選項卡

其中 list 接收一個數(shù)組，數(shù)組中的每個項都是一個對象，其屬性值如下： 

midButton 屬性說明 

總結(jié)

到此這篇關(guān)于創(chuàng)建uni-app項目并了解pages.json文件的文章就介紹到這了,更多相關(guān)uni-app項目創(chuàng)建入門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！