uni-app微信小程序配置(三)
uni-app官網:https://uniapp.dcloud.io/collocation/pages
pages.json?文件用來對 uni-app 進行全局配置,決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。
它類似微信小程序中app.json的頁面管理部分。注意定位權限申請等原屬于app.json的內容,在uni-app中是在manifest中配置。
配置項列表
1、pages
uni-app?通過 pages 節點配置應用由哪些頁面組成,pages 節點接收一個數組,數組每個項都是一個對象,其屬性值如下:
| path | String | ? | 配置頁面路徑 |
| style | Object | ? | 配置頁面窗口表現,配置項參考下方?pageStyle |
Tips:
- pages節點的第一項為應用入口頁(即首頁)
- 應用中新增/減少頁面,都需要對 pages 數組進行修改
- 文件名不需要寫后綴,框架會自動尋找路徑下的頁面資源
2、condition
啟動模式配置,僅開發期間生效,用于模擬直達頁面的場景,如:小程序轉發后,用戶點擊所打開的頁面。
屬性說明:
| current | Number | 是 | 當前激活的模式,list節點的索引值 |
| list | Array | 是 | 啟動模式列表 |
list說明:
| name | String | 是 | 啟動模式名稱 |
| path | String | 是 | 啟動頁面路徑 |
| query | String | 否 | 啟動參數,可在頁面的?onLoad?函數里獲得 |
3、globalStyle?
用于設置應用的狀態欄、導航條、標題、窗口背景色等。
| navigationBarBackgroundColor | HexColor | #F7F7F7 | 導航欄背景顏色(同狀態欄背景色) | APP與H5為#F7F7F7,小程序平臺請參考相應小程序文檔 |
| navigationBarTextStyle | String | white | 導航欄標題顏色及狀態欄前景顏色,僅支持 black/white | ? |
| navigationBarTitleText | String | ? | 導航欄標題文字內容 | ? |
| navigationStyle | String | default | 導航欄樣式,僅支持 default/custom。custom即取消默認的原生導航欄,需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App(2.0.3+) |
| backgroundColor | HexColor | #ffffff | 下拉顯示出來的窗口的背景色 | 微信小程序 |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式,僅支持 dark / light | 微信小程序 |
| enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新,詳見頁面生命周期。 | ? |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離,單位只支持px,詳見頁面生命周期 | ? |
| backgroundColorTop | HexColor | #ffffff | 頂部窗口的背景色(bounce回彈區域) | 僅 iOS 平臺 |
| backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色(bounce回彈區域) | 僅 iOS 平臺 |
| titleImage | String | ? | 導航欄圖片地址(替換當前文字標題),支付寶小程序內必須使用https的圖片鏈接地址 | 支付寶小程序、H5、APP |
| transparentTitle | String | none | 導航欄整體(前景、背景)透明設置。支持 always 一直透明 / auto 滑動自適應 / none 不透明 | 支付寶小程序、H5、APP |
| titlePenetrate | String | NO | 導航欄點擊穿透 | 支付寶小程序、H5 |
| pageOrientation | String | portrait | 橫屏配置,屏幕旋轉設置,僅支持 auto / portrait / landscape 詳見?響應顯示區域變化 | App 2.4.7+、微信小程序 |
| animationType | String | pop-in | 窗口顯示的動畫效果,詳見:窗口動畫 | App |
| animationDuration | Number | 300 | 窗口顯示動畫的持續時間,單位為 ms | App |
| app-plus | Object | ? | 設置編譯到 App 平臺的特定樣式,配置項參考下方?app-plus | App |
| h5 | Object | ? | 設置編譯到 H5 平臺的特定樣式,配置項參考下方?H5 | H5 |
| mp-alipay | Object | ? | 設置編譯到 mp-alipay 平臺的特定樣式,配置項參考下方?MP-ALIPAY | 支付寶小程序 |
| mp-weixin | Object | ? | 設置編譯到 mp-weixin 平臺的特定樣式 | 微信小程序 |
| mp-baidu | Object | ? | 設置編譯到 mp-baidu 平臺的特定樣式 | 百度小程序 |
| mp-toutiao | Object | ? | 設置編譯到 mp-toutiao 平臺的特定樣式 | 字節跳動小程序 |
| mp-qq | Object | ? | 設置編譯到 mp-qq 平臺的特定樣式 | QQ小程序 |
| usingComponents | Object | ? | 引用小程序組件,參考?小程序組件 | ? |
| renderingMode | String | ? | 同層渲染,webrtc(實時音視頻) 無法正常時嘗試配置 seperated 強制關掉同層 | 微信小程序 |
| leftWindow | Boolean | true | 當存在 leftWindow 時,默認是否顯示 leftWindow | H5 |
| topWindow | Boolean | true | 當存在 topWindow 時,默認是否顯示 topWindow | H5 |
| rightWindow | Boolean | true | 當存在 rightWindow 時,默認是否顯示 rightWindow | H5 |
| rpxCalcMaxDeviceWidth | Number | 960 | rpx 計算所支持的最大設備寬度,單位 px | App、H5(2.8.12+) |
| rpxCalcBaseDeviceWidth | Number | 375 | rpx 計算使用的基準設備寬度,設備實際寬度超出 rpx 計算所支持的最大設備寬度時將按基準寬度計算,單位 px | App、H5(2.8.12+) |
| rpxCalcIncludeWidth | Number | 750 | rpx 計算特殊處理的值,始終按實際的設備寬度計算,單位 rpx | App、H5(2.8.12+) |
| maxWidth | Number | 1190 | 單位px,當瀏覽器可見區域寬度大于maxWidth時,兩側留白,當小于等于maxWidth時,頁面鋪滿;不同頁面支持配置不同的maxWidth;maxWidth = leftWindow(可選)+page(頁面主體)+rightWindow(可選) | H5(2.9.9+) |
注意
- 支付寶小程序使用titleImage時必須使用https的圖片鏈接地址,需要真機調試才能看到效果,支付寶開發者工具內無效果
- globalStyle中設置的titleImage也會覆蓋掉pages->style內的設置文字標題
- 使用?maxWidth?時,頁面內fixed元素需要使用--window-left,--window-right來保證布局位置正確
4、tabBar
如果應用是一個多 tab 應用,可以通過 tabBar 配置項指定一級導航欄,以及 tab 切換時顯示的對應頁。
在 pages.json 中提供 tabBar 配置,不僅僅是為了方便快速開發導航,更重要的是在App和小程序端提升性能。在這兩個平臺,底層原生引擎在啟動時無需等待js引擎初始化,即可直接讀取 pages.json 中配置的 tabBar 信息,渲染原生tab。
Tips
- 當設置 position 為 top 時,將不會顯示 icon
- tabBar 中的 list 是一個數組,只能配置最少2個、最多5個 tab,tab 按數組的順序排序。
- tabbar 切換第一次加載時可能渲染不及時,可以在每個tabbar頁面的onLoad生命周期里先彈出一個等待雪花(hello uni-app使用了此方式)
- tabbar 的頁面展現過一次后就保留在內存中,再次切換 tabbar 頁面,只會觸發每個頁面的onShow,不會再觸發onLoad。
- 頂部的 tabbar 目前僅微信小程序上支持。需要用到頂部選項卡的話,建議不使用 tabbar 的頂部設置,而是自己做頂部選項卡,可參考 hello uni-app->模板->頂部選項卡。
屬性說明:
| color | HexColor | 是 | ? | tab 上的文字默認顏色 | ? |
| selectedColor | HexColor | 是 | ? | tab 上的文字選中時的顏色 | ? |
| backgroundColor | HexColor | 是 | ? | tab 的背景色 | ? |
| borderStyle | String | 否 | black | tabbar 上邊框的顏色,可選值 black/white | App 2.3.4+ 支持其他顏色值、H5 3.0.0+ |
| blurEffect | String | 否 | none | iOS 高斯模糊效果,可選值 dark/extralight/light/none(參考:使用說明) | App 2.4.0+ 支持、H5 3.0.0+(只有最新版瀏覽器才支持) |
| list | Array | 是 | ? | tab 的列表,詳見 list 屬性說明,最少2個、最多5個 tab | ? |
| position | String | 否 | bottom | 可選值 bottom、top | top 值僅微信小程序支持 |
| fontSize | String | 否 | 10px | 文字默認大小 | App 2.3.4+、H5 3.0.0+ |
| iconWidth | String | 否 | 24px | 圖標默認寬度(高度等比例縮放) | App 2.3.4+、H5 3.0.0+ |
| spacing | String | 否 | 3px | 圖標和文字的間距 | App 2.3.4+、H5 3.0.0+ |
| height | String | 否 | 50px | tabBar 默認高度 | App 2.3.4+、H5 3.0.0+ |
| midButton | Object | 否 | ? | 中間按鈕 僅在 list 項為偶數時有效 | App 2.3.4+、H5 3.0.0+ |
其中 list 接收一個數組,數組中的每個項都是一個對象,其屬性值如下:
| pagePath | String | 是 | 頁面路徑,必須在 pages 中先定義 |
| text | String | 是 | tab 上按鈕文字,在 App 和 H5 平臺為非必填。例如中間可放一個沒有文字的+號圖標 |
| iconPath | String | 否 | 圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,當 postion 為 top 時,此參數無效,不支持網絡圖片,不支持字體圖標 |
| selectedIconPath | String | 否 | 選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px ,當 postion 為 top 時,此參數無效 |
midButton 屬性說明
| width | String | 否 | 80px | 中間按鈕的寬度,tabBar 其它項為減去此寬度后平分,默認值為與其它項平分寬度 |
| height | String | 否 | 50px | 中間按鈕的高度,可以大于 tabBar 高度,達到中間凸起的效果 |
| text | String | 否 | ? | 中間按鈕的文字 |
| iconPath | String | 否 | ? | 中間按鈕的圖片路徑 |
| iconWidth | String | 否 | 24px | 圖片寬度(高度等比例縮放) |
| backgroundImage | String | 否 | ? | 中間按鈕的背景圖片路徑 |
5、easycom
HBuilderX 2.5.5起支持easycom組件模式。
傳統vue組件,需要安裝、引用、注冊,三個步驟后才能使用組件。easycom將其精簡為一步。 只要組件安裝在項目的components目錄下,并符合components/組件名稱/組件名稱.vue目錄結構。就可以不用引用、注冊,直接在頁面中使用。 如下:
<template><view class="container"><uni-list><uni-list-item title="第一行"></uni-list-item><uni-list-item title="第二行"></uni-list-item></uni-list></view> </template> <script>// 這里不用import引入,也不需要在components內注冊uni-list組件。template里就可以直接用export default {data() {return {}}} </script>6、topWindow
uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解決寬屏適配問題。
以現有的手機應用為mainWindow,在左、上、右,可以追加新的頁面顯示窗體。
整體的寬屏適配思路,參考單獨的寬屏適配指南
| path | String | ? | 配置頁面路徑 |
| style | Object | ? | 配置頁面窗口表現,配置項參考下方?pageStyle |
| matchMedia | Object | ? | 配置顯示該窗口的規則,配置項參考下方?matchMedia |
注意
- 目前 style 節點僅支持配置 width,height 等 css 樣式相關屬性
matchMedia
| minWidth | Number | 768 | 當設備可見區域寬度 >= minWidth 時,顯示該 window |
通過matchMedia的調節,可以自適應在不同屏幕上顯示指定的window。
{"pages": [{"path": "pages/login/login","style": {"topWindow": false // 當前頁面不顯示 topWindow"leftWindow": false // 當前頁面不顯示 leftWindow"rightWindow": false // 當前頁面不顯示 rightWindow}}],"topWindow": {"path": "responsive/top-window.vue", // 指定 topWindow 頁面文件"style": {"height": "44px"}},"leftWindow": {"path": "responsive/left-window.vue", // 指定 leftWindow 頁面文件"style": {"width": "300px"}},"rightWindow": {"path": "responsive/right-window.vue", // 指定 rightWindow 頁面文件"style": {"width": "300px" // 頁面寬度},"matchMedia": {"minWidth": 768 //生效條件,當窗口寬度大于768px時顯示}} }?具體寫法如下:
{"pages": [{"path": "pages/component/index",//頁面路徑"style": {"navigationBarTitleText": "組件"}}, {"path": "pages/API/index","style": {"navigationBarTitleText": "接口"}}, {"path": "pages/component/view/index","style": {"navigationBarTitleText": "view"}}],"condition": { //模式配置,僅開發期間生效"current": 0, //當前激活的模式(list 的索引項)"list": [{"name": "test", //模式名稱"path": "pages/component/view/index" //啟動頁面,必選}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "演示","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","usingComponents":{"collapse-tree-item":"/components/collapse-tree-item"},"renderingMode": "seperated", // 僅微信小程序,webrtc 無法正常時嘗試強制關閉同層渲染"pageOrientation": "portrait", //橫屏配置,全局屏幕旋轉設置(僅 APP/微信/QQ小程序),支持 auto / portrait / landscape"rpxCalcMaxDeviceWidth": 960,"rpxCalcBaseDeviceWidth": 375,"rpxCalcIncludeWidth": 750},"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","height": "50px","fontSize": "10px","iconWidth": "24px","spacing": "3px","list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "組件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}],"midButton": {"width": "80px","height": "50px","text": "文字","iconPath": "static/image/midButton_iconPath.png","iconWidth": "24px","backgroundImage": "static/image/midButton_backgroundImage.png"}},"easycom": {"autoscan": true, //是否自動掃描組件"custom": {//自定義掃描規則"^uni-(.*)": "@/components/uni-$1.vue"}},"topWindow": {"path": "responsive/top-window.vue","style": {"height": "44px"}},"leftWindow": {"path": "responsive/left-window.vue","style": {"width": "300px"}},"rightWindow": {"path": "responsive/right-window.vue","style": {"width": "300px"},"matchMedia": {"minWidth": 768}} }?
總結
以上是生活随笔為你收集整理的uni-app微信小程序配置(三)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 审查指南关于计算机可读介质,中美专利申请
- 下一篇: 回归本心QwQ背包问题luogu1776