前言 

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

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

通過(guò) HBuilderX 創(chuàng)建

 1. 下載安裝 HbuilderX 編輯器

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

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

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

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

 總結(jié)：

pages.json 

pages 

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

Tips：

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

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

style 

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

頁(yè)面中配置項(xiàng)會(huì)覆蓋 globalStyle 中相同的配置項(xiàng)

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

globalStyle

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

注意

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

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

tabBar

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

如果應(yīng)用是一個(gè)多 tab 應(yīng)用，可以通過(guò) tabBar 配置項(xiàng)指定一級(jí)導(dǎo)航欄，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)。

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

Tips

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

其中 list 接收一個(gè)數(shù)組，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象，其屬性值如下： 

midButton 屬性說(shuō)明 

總結(jié)

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

最新評(píng)論