建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序頁面配置
頁面配置
每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現(xiàn)進行配置。頁面中配置項在當(dāng)前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內(nèi)容為一個 JSON 對象，有以下屬性：
配置項
| 屬性 | 類型 | 默認(rèn)值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導(dǎo)航欄背景顏色，如 #000000 |
|
| navigationBarTextStyle | string | white | 導(dǎo)航欄標(biāo)題顏色，僅支持 black / white |
|
| navigationBarTitleText | string | 導(dǎo)航欄標(biāo)題文字內(nèi)容 | ||
| navigationStyle | string | default | 導(dǎo)航欄樣式，僅支持以下值： default 默認(rèn)樣式 custom 自定義導(dǎo)航欄，只保留右上角膠囊按鈕 |
微信客戶端 7.0.0 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的樣式，僅支持 dark / light |
|
| backgroundColorTop | string | #ffffff | 頂部窗口的背景色，僅 iOS 支持 | 微信客戶端 6.5.16 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色，僅 iOS 支持 | 微信客戶端 6.5.16 |
| enablePullDownRefresh | boolean | false | 是否開啟當(dāng)前頁面下拉刷新。 詳見 Page.onPullDownRefresh |
|
| onReachBottomDistance | number | 50 | 頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px。 詳見 Page.onReachBottom |
|
| pageOrientation | string | portrait | 屏幕旋轉(zhuǎn)設(shè)置，支持 auto / portrait / landscape 詳見 響應(yīng)顯示區(qū)域變化 |
2.4.0 (auto) / 2.5.0 (landscape) |
| disableScroll | boolean | false | 設(shè)置為 true 則頁面整體不能上下滾動。 只在頁面配置中有效，無法在 app.json 中設(shè)置 |
|
| usingComponents | Object | 否 | 頁面自定義組件配置 | 1.6.3 |
| style | string | default | 啟用新版的組件樣式 | 2.10.2 |
| singlePage | Object | 否 | 單頁模式相關(guān)配置 | 2.12.0 |
頁面配置中只能設(shè)置 app.json 中 window 對應(yīng)的配置項，以決定本頁面的窗口表現(xiàn)，所以無需寫 window 這個屬性。
singlePage
基礎(chǔ)庫 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta) 后打開會進入單頁模式
單頁模式相關(guān)配置
| 屬性 | 類型 | 必填 | 默認(rèn)值 | 描述 |
|---|---|---|---|---|
| navigationBarFit | String | 否 | 默認(rèn)自動調(diào)整，若原頁面是自定義導(dǎo)航欄，則為 float，否則為 squeezed | 導(dǎo)航欄與頁面的相交狀態(tài)，值為 float 時表示導(dǎo)航欄浮在頁面上，與頁面相交；值為 squeezed 時表示頁面被導(dǎo)航欄擠壓，與頁面不相交 |
配置示例
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}新聞標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序頁面配置
本文網(wǎng)址：http://m.fisionsoft.com.cn/article/dpseesg.html
