前言 

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

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

通過 HBuilderX 創(chuàng)建

 1. 下載安裝 HbuilderX 編輯器

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

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

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

 5. 開啟服務端口

 總結(jié)：

pages.json 

pages 

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

Tips：

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

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

style 

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

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

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

globalStyle

用于設置應用的狀態(tài)欄、導航條、標題、窗口背景色等。

注意

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

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

tabBar

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

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

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

Tips

• 當設置 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 的頂部設置，而是自己做頂部選項卡

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

midButton 屬性說明 

總結(jié)

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