The pages.json
file is used to configure Mini App globally, and determine the path of the page file, window style, native navigation bar, native tabbar at the bottom, etc.
Attribute | Type | Required | Describe | Platform |
---|---|---|---|---|
globalStyle | Object | No | Set the window representation of the default page | |
pages | Object Array | Yes | Set the page path and window representation | |
easycom | Object | No | Rules for automatic import of components | |
tabBar | Object | No | Set the representation of the bottom tab | |
condition | Object | No | Start mode configuration | |
subPackages | Object Array | No | Subcontract loading configuration | |
leftWindow | Object | No | Large screen left window | H5 |
topWindow | Object | No | Large screen top window | H5 |
rightWindow | Object | No | Large screen right window | H5 |
The following is a pages.json
that includes all configuration options:
{
"pages": [{
"path": "pages/component/index",
"style": {
}
}, {
"path": "pages/API/index",
"style": {
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"list": [{
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"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": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
}],
"midButton": {
"width": "80px",
"height": "50px",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"^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
}
}
}
Used for setting the applied status bar, navigation bar, title, window background color, etc.
Attribute | Type | Defaults | Describe | Platform Difference Description |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #F7F7F7 | The background color of the navigation bar (same as the background color of the status bar) | |
navigationBarTextStyle | String | white | The title color of navigation bar and foreground color of status bar can only be black/white | |
navigationBarTitleText | String | Navigation bar title text content | ||
navigationStyle | String | default | Navigation bar style, only supports default/custom. custom means to cancel the default native navigation bar | |
enablePullDownRefresh | Boolean | false | Whether to enable pull-down refresh, see page life cycle. | |
onReachBottomDistance | Number | 50 | The distance from the bottom of the page when the bottom of the page is triggered, the unit only supports px, see page life cycle | |
titleImage | String | Navigation bar image address (replace the current text title) | ||
transparentTitle | String | none | The overall (foreground, background) transparency setting of the navigation bar. Support always transparent / auto sliding adaptive / none opaque | |
titlePenetrate | String | NO | Click to penetrate the navigation bar | H5 |
pageOrientation | String | portrait | Landscape configuration, screen rotation setting, only supports auto / portrait / landscape. For details, see [Respond to display area changes](https://developers.weixin.qq.com/miniprogram/dev/framework/view /resizable.html) | Mini App |
animationType | String | pop-in | The animation effect displayed by the window, see: Window animation | Mini App |
animationDuration | Number | 300 | Window animation duration, in ms | Mini App |
app-plus | Object | Set the specific style compiled to the Mini App platform. For configuration items | App | |
h5 | Object | Set the specific style compiled to H5 platform. For configuration items, please refer to the following H5 | H5 | |
leftWindow | Boolean | true | Whether or not to display the leftWindow by default when the leftWindow is present | H5 |
topWindow | Boolean | true | Whether or not to display the topWindow by default when the topWindow is present | H5 |
rightWindow | Boolean | true | Whether or not to display the rightWindow by default when the rightWindow is present | H5 |
rpxCalcMaxDeviceWidth | Number | 960 | rpx Calculate the maximum device width supported by px | H5 |
rpxCalcBaseDeviceWidth | Number | 375 | rpx Calculates the base device width used in the calculation. When the actual width of the device exceeds the maximum device width supported by rpx calculation, it will be calculated according to the base width. The unit is px | H5 |
rpxCalcIncludeWidth | Number | 750 | rpx Calculates the value for special handling, always based on the actual device width, in rpx | H5 |
maxWidth | Number | In px, when the width of the visible area of the browser is greater than maxWidth, both sides are left blank; when less than or equal to maxWidth, the pages are covered; different pages support maxWidth with different configurations; maxWidth = leftWindow(optional)+page(page body)+rightWindow(optional) | H5 |
Notice
titleImage
set in globalStyle
will also overwrite the set text title in pages
->style
maxWidth
, fixed elements in the page need to use --window-left, --window-right to ensure the correct layout positionWith the existing mobile phone application as mainwindow, new page display windows can be added on the left, top and right sides.
For the overall widescreen adaptation idea | Attribute| Type| Defaults| Describe| |:-|:-|:-|:-| | path| String| | Configure page path| | style| Object| | Configure the performance of the page window. For configuration items, refer to the following pageStyle| | matchMedia| Object| | Configure the rules for displaying this window. For configuration items, refer to matchMedia|
Notice
App.vue
according to different requirements:
.Mini App--showtopwindow [data-page="pages/component/view/view"] uni-page-head {
display: none;
}
.Mini App--showtopwindow uni-page-head {
display: none;
}
.Mini App--showtopwindow [data-page="pages/component/view/view"] uni-page-head {
display: block;
}
Attribute | Type | Defaults | Describe |
---|---|---|---|
minWidth | Number | 768 | This window is displayed when the width of the visible area of the device is > = minWidth |
With the adjustment of matchMedia, it can adaptively display the specified window on different screens.
{
"pages": [
{
"path": "pages/login/login",
"style": {
}
}
],
"topWindow": {
"style": {
"height": "44px"
}
},
"leftWindow": {
"style": {
"width": "300px"
}
},
"rightWindow": {
"style": {
},
"matchMedia": {
}
}
}
Same as topWindow
Same as topWindow
Mini App
configures which pages the application consists of through the pages node. The pages node receives an array, each item of the array is an object, and its attribute values are as follows:
Attribute | Type | Defaults | Describe | |
---|---|---|---|---|
path | String | Configure page path | ||
style | Object | Configure the performance of the page window. For configuration items, refer to the following pageStyle |
Tips:
Code example:
The development directory is:
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
Then you need to fill it in pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": { ... }
}, {
"path": "pages/login/login",
"style": { ... }
}
]
}
Used for setting the status bar, navigation bar, title, window background color, etc. for each page.
The configuration items on the page will override the same configuration items in globalStyle
Attribute | Type | Defaults | Describe | Platform Difference Description |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | Navigation bar background color (same as status bar background color), such as "#000000" | |
navigationBarTextStyle | String | white | The title color of navigation bar and foreground color of status bar can only be black/white | |
navigationBarTitleText | String | Navigation bar title text content | ||
navigationBarShadow | Object | For the configuration of the shadow of the navigation bar, please refer to the following Shadow of the navigation bar | ||
navigationStyle | String | default | Navigation bar style, only supports default/custom. custom means to cancel the default native navigation bar, you need to see use note | |
backgroundTextStyle | String | dark | The style of pull-down loading, can only be dark/light | |
enablePullDownRefresh | Boolean | false | Whether to enable pull-down refresh, see page life cycle. | |
onReachBottomDistance | Number | 50 | The distance from the bottom of the page when the bottoming event is triggered, the unit only supports px, see page life cycle | |
disableSwipeBack | Boolean | false | Whether to disable SwipeBack | Mini App-iOS |
titleImage | String | The image address of the navigation bar (replace the current text title) | H5 | |
transparentTitle | String | none | The navigation bar transparency setting. Support always transparent / auto sliding adaptive / none opaque | H5, Mini APP |
titlePenetrate | String | NO | Click to penetrate the navigation bar | H5 |
app-plus | Object | Set the specific style compiled to the App platform. For configuration items, please refer to the following app-plus | Mini APP | |
h5 | Object | Set the specific style compiled to H5 platform. For configuration items, please refer to the following H5 | H5 | |
leftWindow | Boolean | true | Whether or not to display the leftWindow on the current page when the leftWindow is present | H5 |
topWindow | Boolean | true | Whether or not to display the topWindow on the current page when the topWindow is present | H5 |
rightWindow | Boolean | true | Whether or not to display the rightWindow on the current page when the rightWindow is present | H5 |
maxWidth | Number | In px, when the width of the visible area of the browser is greater than maxWidth, both sides are left blank; when less than or equal to maxWidth, the pages are covered; different pages support maxWidth with different configurations; maxWidth = leftWindow(optional)+page(page body)+rightWindow(optional) | H5 |
Notice
maxWidth
, fixed elements in the page need to use --window-left, --window-right to ensure the correct layout positionCode example:
{
"pages": [{
"path": "pages/index/index",
"style": {
}
},
...
]
}
When navigationStyle is set to custom or titleNView is set to false, the native navigation bar will not be displayed. At this time, several issues should be noted:
<template>
<view>
<view class="status_bar">
<!-- Here is the status bar -->
</view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
In view of the above problems, when native navigation can solve business needs, try to use native navigation. Sometimes even less important needs need to be sacrificed. Under App and H5, Mini App provides flexible processing solutions: titleNView, subNVue, or whole The page uses nvue. But under the applet, because of its own limitations, there is no good solution. Conditional compilation can also be used to split end processing if necessary.
Configure a specific style when compiling to the Mini App platform, and some commonly used configurations are also supported by the H5 platform.
Attribute | Type | Default | Description | Platform compatibility |
---|---|---|---|---|
background | HexColor | #FFFFFF | window background color. Both for vue pages and nvue pages, there is a parent native window on App side. The effective time of the background color of the window is faster than that of the css in the page | Mini App |
titleNView | Object | Navigation bar, see details: Navigation bar | Mini App, H5 | |
subNVues | Object | Native subwindow, see details: Native subwindow | Mini App | |
softinputMode | String | adjustPan | Soft keyboard pop-up mode, supporting two modes, adjustResize and adjustPan | Mini App |
pullToRefresh | Object | Pull to refresh | Mini App | |
scrollIndicator | String | Scroll bar display strategy. Hide scroll bar if set to "none". | Mini App | |
animationType | String | pop-in | The animation effect displayed by the window, see: Window animation. | Mini App |
animationDuration | Number | 300 | Duration of window display animation, in ms. | Mini App |
Tips |
.nvue
page only supports titleNView、pullToRefresh、scrollIndicator
configuration, and other configuration items are temporarily not supportedAttribute | Type | Defaults | Describe | |
---|---|---|---|---|
backgroundColor | String | #F7F7F7 | Background color, the color value format is "#RRGGBB". You can also set rgba format when using translucent title bar | |
buttons | Array | For custom buttons, see buttons for details | ||
titleColor | String | #000000 | Title text color | |
titleOverflow | String | ellipsis | Method of handling the text when it exceeds the display area." clip"-content clipping when it exceeds the display area; "ellipsis"-ellipsis marker (...) is displayed at the end when it exceeds the display area. | |
titleText | String | Title text content | ||
titleSize | String | Title text font size | ||
searchInput | Object | For the configuration of the search box on the native navigation bar, see searchInput for details | ||
homeButton | Boolean | false | Whether the title bar control displays the Home button | |
autoBackButton | Boolean | true | Whether the title bar control displays the return button on the left | App 2.6.3+ |
backButton | Object | Return button style, see: backButton | App 2.6.3 | |
backgroundImage | String | The following types are supported: Background image path - such as "/static/img.png", only supports the absolute path of local files, and draws according to the actual title bar width and height; Gradient - only supports linear gradient and gradient of two colors, such as "linear-gradient(to top, #a80077, #66ff00)", in which the first parameter is the gradient direction. Options include: "to right" means the gradient is from left to right, "to left" means the gradient is from right to left, "to bottom" means the gradient is from top to bottom, "to bottom right" means the gradient is from top left to bottom right, and "to top left" means the gradient is from bottom right to top left | 2.6.3 | |
backgroundRepeat | String | Valid only when backgroundImage is set to the image path. Options: "repeat" - the background image is tiled vertically and horizontally; "repeat-x" - the background image is tiled horizontally and stretched vertically; "repeat-y" - the background image is tiled vertically and stretched horizontally; "no-repeat" - the background image is stretched vertically and horizontally. Use "no-repeat" by default | 2.6.3 | |
titleAlign | String | "auto" | Options: "center"-center aligned; "left"-left aligned; "auto"-automatically selected according to the platform (Android platform is left aligned, and iOS platform is center aligned) | 2.6.3 |
blurEffect | String | "none" | This effect will Gaussian blur the content behind the title bar, and it is only valid when the type is "transparent" or "float". Options: "dark" - dark style blur, corresponding to the iOS native UIBlurEffectStyleDark effect; "extralight" - extralight style blur, corresponding to the iOS native UIBlurEffectStyleExtraLight effect; "light" – light style blur, corresponding to the iOS native UIBlurEffectStyleLight effect; "none" - no blurring effect. Note: Avoid setting background color when using blur effect, setting background color may override the blur effect. | 2.4.3 |
coverage | String | "132px" | Title bar control change scope is only valid when the type value is transparent, and the background transparency of the title bar will change when the page scrolls. When the page scrolls to the specified offset, the title bar background becomes completely opaque. Support percentage, pixel value | |
splitLine | Boolean | false | If the bottom split line of the title bar (SplitLineStyles) is set, the split line will be display at the bottom of the title bar control, where the color value and height can be configure. Setting this attribute value to undefined or null will hide the separator. The bottom separator is not displayed by default | 2.6.6 |
subtitleColor | String | The subtitle text color, the color value format is "#RRGGBB" and "rgba(R,G,B,A)", for example, "#FF0000" means that the title text color is red. The default value is consistent with the main title text color | 2.6.6 | |
subtitleSize | String | "auto" | The font size of subtitle text, font size is in pixels, for example, "14px" means that the font size is 14 pixels, with 12 pixels as default. | 2.6.6 |
subtitleOverflow | String | "ellipsis" | Method of handling the text when it exceeds the display area. Options include: "clip"-content clipping when it exceeds the display area; "ellipsis"-ellipsis marker (...) is displayed at the end when it exceeds the display area. | 2.6.6 |
subtitleText | String | The text content of subtitle, after setting the subtitle, two lines of titles will be displayed, and the subtitle will be displayed below the main title (titleText). Note: After setting the subtitle, it will be displayed left-aligned | 2.6.6 | |
titleIcon | String | The title icon, icon path is like "./img/t.png", only supports local file path and relative path, relative to the host position of the current page, the fixed width and height is the logical pixel value of "34px". The width and height of the image are required to be the same. Note: After setting the title icon, the title will be displayed on the left. | 2.6.6 | |
titleIconRadius | String | No rounded corner | The value of the title icon's round corners is in the format of "XXpx", where XX is the pixel value (logical pixel), for example, "10px" means the corner radius is 10 pixels. | 2.6.6 |
Attribute | Type | Defaults | Describe |
---|---|---|---|
color | String | #CCCCCC | Color of bottom separator, Options include: "#RRGGBB" format string, for example "#FF0000" means drawing red separator; "rgba(R,G,B,A)", where R/G/B represents red value/green value/blue value, positive integer type, with the value range of 0-255, A as transparency, floating point type, with the value range of 0-1(0 is fully transparent and 1 is opaque), for example "rgba(255,0,0,0.5) ", means red semi-opaque |
height | String | "1px" | Options include: pixel value (logical pixel), supports decimal point, for example "1px" means 1 pixel high; Percentage, for example "1%", relative to the height of the title bar control. |
Tips
type
value of titleNView
is transparent
, the navigation bar is a scrolling transparent gradient navigation bar, only the button by default, and the title bar background color and title text will gradually appear after scrolling; When type
is float
, the navigation bar is a floating title bar. At this time, the content of the page reaches the top of the screen, including the status bar, but the navigation bar is floating above the page. Generally, in this scenario, the background color of the navigation bar will be set to rgba translucent color at the same time.[<navigation-bar>(/component/navigation-bar)]
Attribute | Type | Defaults | Describe |
---|---|---|---|
type | String | none | For the available values of button style, see buttons style |
color | String | The color is the same as the title text by default | Text color on the button |
background | String | The default value is gray translucent color | The background color of the button, which is valid only when the title bar type=transparent |
colorPressed | String | The default value is color attribute value automatic adjustment with the transparency of 0.3 | Text color after clicking the status button |
float | String | right | The display position of the button on the title bar. Options include "left" and "right" |
fontWeight | String | normal | Text thickness on the button. Options include "normal"-standard font and "bold"-bold font. |
fontSize | String | Text size on the button | |
fontSrc | String | The font file path for the text of the button. Network address is not supported. Please use local address in any case. | |
select | String | false | Whether to display the selection indicator icon (down arrow), which is often used in city selection |
text | String | Text displayed on the button. When using the font icon, the unicode character representation must start with' \u', such as "\ue123" (please note that it cannot be coded as "\e123"). | |
width | String | 44px | The width of the button. Options include: "*px" - logical pixel values, for example "10px" indicates 10 logical pixel values, and rpx is not supported. The contents of the button are displayed in the center; "auto" - automatically calculate the width and automatically adjust the button width according to the content |
Valid when autoBackButton is set to true. This attribute allows you to custom the style of the return button, such as icon size, red dot, corner marker, and title, etc.
Attribute | Type | Defaults | Describe |
---|---|---|---|
background | String | none | Background color is valid only when the title bar type=transparent, and it is the displayed background color of the button when the title bar is transparent. Values can be #RRGGBB and rgba format color strings, with gray translucent as default. |
badgeText | String | corner marker text, displaying up to 3 characters, and trimmed as ... if longer than that | |
color | String | The title text color of the window title bar control. | Icon and title color. Options include: "#RRGGBB" format string, for example "#FF0000" means red; "rgba(R,G,B,A)", where R/G/B represents red value/green value/blue value, positive integer type, with the value range of 0-255, A as transparency, floating point type, with the value range of 0-1(0 is fully transparent and 1 is opaque), for example "rgba(255,0,0,0.5) ", means red semi-opaque. |
colorPressed | String | Text color after clicking the status button. Options include: "#RRGGBB" format string, for example "#FF0000" means red; "rgba(R,G,B,A)", where R/G/B represents red value/green value/blue value, positive integer type, with the value range of 0-255, A as transparency, floating point type, with the value range of 0-1(0 is fully transparent and 1 is opaque), for example "rgba(255,0,0,0.5) ", means red semi-opaque. The default value is color attribute value automatic adjustment with the transparency of 0.3. | |
fontWeight | String | "normal" | The stroke weight of the return icon. Options include: "normal"-standard font; "bold"-bold font. |
fontSize | String | The text size of the return icon. Options include: font height pixel value, number and "px" format string, such as "22px". When the title bar of the window is transparent (type="transparent"), with "22px" as default. When the title bar of the window is the default style (type="default"), with "27px" as default. | |
redDot | Boolean | false | Whether to display red dot, with true to display and false to hide. The default value is false. Note: The red dot will not be displayed when the superscript text is set. |
title | String | The title of the return button is displayed after the return icon (font icon), and it is an empty string by default. | |
titleWeight | String | "normal" | Returns the weight of the title on the button, the possible values are: "normal" - standard font; "bold" - bold font. |
When using the type value to set the style of the button, the fontSrc and text attributes will be ignored.
Value | Instruction |
---|---|
forward | Forward button |
back | Backward button |
share | Sharing button |
favorite | Favorite button |
home | Home button |
menu | Menu button |
close | Close button |
none | If there is no style, you need to set the content to be displayed on the button through the text attribute and set the font library to be used through the fontSrc attribute. |
searchInput can place a search box on the native navigation bar of titleNView. Its width automatically adapts to surrounding elements.
Attribute | Type | Defaults | Describe |
---|---|---|---|
autoFocus | Boolean | false | Whether to get focus automatically? |
align | String | center | The alignment of the text in the non-input status. Options: "left" - left-aligned; "right" – right aligned; "center" - center aligned. |
backgroundColor | String | rgba(255,255,255,0.5) | Background color |
borderRadius | String | 0px | The corner radius of the input box, with the value format of "XXpx", where XX is the pixel value (logical pixel), and rpx is not supported. |
placeholder | String | Prompt text. | |
placeholderColor | String | #CCCCCC | Prompt text color |
disabled | Boolean | false | Is it inputable? |
searchInput Tips
The life cycle of searchInput's click input box onNavigationBarSearchInputClicked, text change onNavigationBarSearchInputChanged, click search button onNavigationBarSearchInputConfirmed, etc., see the document page life cycle.
Example of common titleNView configuration code
Some configurations are listed below. Regarding the comprehensive navigation bar configuration, here is a perfect demonstration project that demonstrates various effects of the navigation bar.
{
"pages": [{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": false
}
}
}, {
"path": "pages/log/log",
"style": {
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
{
}
],
"backButton": {
"background": "#00FF00"
}
}
}
}
}, {
"path": "pages/detail/detail",
"style": {
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
}, {
"path": "pages/search/search",
"style": {
"app-plus": {
"titleNView": {
"type": "transparent",
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px",
"disabled": true
}
}
}
}
}
...
]
}
Tips
subNVues
is the native subwindow of the vue page. It is used to solve the hierarchical coverage and flexible customization of native interface in vue page in App.
It's not a full screen page, it's not a component, it's a native child form. It is an nvue page, rendered using the weex engine, which provides more powerful native typesetting capabilities than cover-view and plus.nativeObj.view, which is convenient for customizing native navigation or overlaying native maps, videos, etc.
subNVue
can also be used in the nvue page. However, it is currently not supported under pure nvue (rendered as native).
Attribute | Type | Describe |
---|---|---|
id | String | Identification of native subwindow |
path | String | Configure the nvue file path, and the nvue file needs to be placed in the page file directory using subNvue |
type | String | Native sub-form internal style. Options include: 'popup', pop-up layer; "navigationBar", navigation bar |
style | Object | For the configuration items of the subNVue native subwindow style, please refer to the following subNVuesStyle |
Tips
id
of subNVues
is globally unique and cannot be duplicatedsubNVues
through uni.getSubNVueById('id')path
attribute of subNVues
can only be nvue
file pathAttribute | Type | Defaults | Describe |
---|---|---|---|
position | String | absolute | The layout position of the native subwindow determines the positioning mode of the native subwindow in the parent window. Options include: "static", the native subwindow is positioned normally in the page, and if there is a scroll bar on the page, it will scroll with the content of the window; "absolute", the native subwindow is absolutely positioned in the page. If there is a scroll bar on the page, it will not scroll with the content of the window; "dock", the native subwindow is docked in the page, and the location of the docking is determined by the value of the dock attribute. The default value is "absolute". |
dock | String | bottom | The docking mode of the native subwindow will only take effect when the attribute value of "position" of the native subwindow is set to "dock". Options include: "top", the native subwindow will be docked at the top of the page. "bottom", the native subwindow will be docked at the bottom of the page; "right", the native subwindow will be docked on the right side of the page; "left", the native subwindow will be docked on the left side of the page. The default value is "bottom". |
mask | HexColor | rgba(0,0,0,0.5) | The mask layer of the native subwindow is valid only when the attribute value of "type" of the native subwindow is set to "popup", and the Options include: rgba format string, which defines the style of solid color mask layer, such as "rgba(0,0,0,0.5)", means black and semitransparent; |
width | String | 100% | The width of the native subwindow, supports percentage and pixel value, with 100% as default. When the width attribute value is not set, the left and right attribute values can be set at the same time to change the default width of the window. |
height | String | 100% | The height of the native subwindow, supports percentage and pixel value, with 100% as default. When the height attribute value is not set, the top and bottom attribute values are used to calculate the height of the native subwindow first. |
top | String | 0px | The vertical downward offset of the native subwindow, supporting percentage and pixel value, with 0px as default. When the top attribute value is not set, the bottom and height attribute values are used to calculate the top position of the native subwindow first. |
bottom | String | The vertical upward offset of the native subwindow supports percentage and pixel values, with null as default (calculated automatically according to the top and height attribute values). Ignore this attribute value when both top and height values are set; When the height value is not set, the height of the native subwindow can be determined by the top and bottom attribute values. | |
left | String | 0px | The horizontal leftward offset of the native subwindow, supporting percentage and pixel value, with 0px as default. When the left attribute value is not set, the right and width attribute values are used to calculate the left position of the native subwindow first. |
right | String | The horizontal right offset of the native subwindow, supports percentage and pixel value, with null as default (calculated automatically according to the left and width attribute values). Ignore this attribute value when left and width values are set. When the width value is not set, the width of the native subwindow can be determined by the left and bottom attribute values. | |
margin | String | The margin of the native subwindow is used to locate the location of the native subwindow. auto (centered) is supported. If left, right, top and bottom values are set, the corresponding margin values will be invalid. | |
zindex | Number | The stacking order value of the windows of the native subwindow, the window with higher stacking order is always in front of the window with lower stacking order, after the windows are set with the same stacking order and the show method is applied, the windows shall be positioned in the front. | |
background | String | #FFFFFF | The background color of the window. The "transparent" background transparent style is only supported by Android platform 4.0 or above. For example, if subnvue uses rounded corner, it needs to be set to transparent to see the correct effect |
Code example
{
"pages": [{
"style": {
"app-plus": {
"width": "50%"
}
"id": "popup",
"path": "pages/index/popup",
"style": {
"position": "popup",
"margin":"auto",
"width": "150px",
"height": "150px"
}
"id": "nav",
"path": "pages/index/nav",
"style": {
"position": "dock",
"height": "44px"
}
}]
}
}
}]
}
Under the App platform, you can customize some of the pull-down refresh configurations page->style->app-plus->pullToRefresh
.
Attribute | Type | Defaults | Describe |
---|---|---|---|
support | Boolean | false | Whether to turn on the pull-down refresh function of the window |
color | String | #2BD009 | The color format is "#RRGGBB", which is only supported under the "circle" style to pull-down refresh. |
style | String | Circle for Android platform and default for IOS platform. | Options include: "default" - classic pull-down refresh style (page content follows when pulling down); "circle" - circle style for pull-down refresh control (only refresh control follows when pulling down). |
height | String | The window pull-down refresh control enters the pull height in the refresh state. Support percentage, such as "10%" and Pixel values, such as "50px", but not rpx. | |
range | String | Ranges that window can be pulled down and dragged. Support percentage, such as "10%" and Pixel values, such as "50px", but not rpx. | |
offset | String | 0px | The starting position of the pull-down refresh control. Available only for the pull-down refresh control under the "circle" style, which is used to define the starting position when the refresh control is pulled down. Support percentage, such as "10%" and Pixel values, such as "50px", but not rpx. If a non-native title is used and a native pull-down refresh is required, the circle method is generally used and the offset is adjusted to the height of the custom title |
contentdown | Object | At present, one attribute is supported: caption-the caption content displayed on the pull-down refresh control when it is avaliable to refresh state by pullling down. Only valid for the "default" style pull-down refresh control. | |
contentover | Object | At present, one attribute is supported: caption-the caption content displayed on the pull-down refresh control when it is avaliable to refresh state by releasing. Only valid for the "default" style pull-down refresh control. | |
contentrefresh | Object | At present, one attribute is supported: caption-the caption content displayed on the pull-down refresh control when it is in refresh state. Only valid for the "default" style pull-down refresh control. |
Note for use of drop-down refresh
enablePullDownRefresh
and pullToRefresh->support
are set at the same time, the latter has a higher priority.enablePullDownRefresh
property of the page to true.enablePullDownRefresh
attribute of the page, but configure pullToRefresh->support
to true.Code example
{
"pages": [
{
"style": {
"app-plus": {
"pullToRefresh": {
"support": true,
"color": "#ff3333",
"style": "default",
"contentdown": {
},
"contentover": {
},
"contentrefresh": {
}
}
}
}
}
]
}
The specific style when the configuration compiles to H5 platform
Attribute | Type | Describe |
---|---|---|
titleNView | Object | Navigation bar |
pullToRefresh | Object | Pull down to refresh |
Attribute | Type | Defaults | Describe | |
---|---|---|---|---|
backgroundColor | String | #F7F7F7 | Background color, the color value format is "#RRGGBB". | |
buttons | Array | Custom buttons, refer to buttons | ||
titleColor | String | #000000 | Title text color | |
titleText | String | Title text content | ||
titleSize | String | Title text font size | ||
type | String | default | Navigation bar style. " "default" - default style; " Transparent" - transparent gradient. | |
searchInput | Object | Search box style on the navigation bar, see: searchInput | 1.6.5 |
Attribute | Type | Defaults | Describe |
---|---|---|---|
type | String | none | Button style, available values: buttons style |
color | String | The color is the same as the title text by default | Text color on the button |
background | String | The default value is gray translucent color | The background color of the button, which is valid only when the title bar type=transparent |
badgeText | String | corner marker text, displaying up to 3 characters at the button, and trimmed as ... if longer than that | |
colorPressed (temporarily not supported) | String | The default value is color attribute value automatic adjustment with the transparency of 0.3 | Text color after clicking the status button |
float | String | right | The display position of the button on the title bar. Options include "left" and "right" |
fontWeight | String | normal | Text thickness on the button. Options include "normal"-standard font and "bold"-bold font. |
fontSize | String | Text size on the button | |
fontSrc | String | The font file path for the text of the button. | |
select | String | false | Whether to display the selection indicator icon (down arrow) |
text | String | Text displayed on the button. When using the font icon, the unicode character representation must start with' \u', such as "\ue123" (please note that it cannot be coded as "\e123"). | |
width | String | 44px | The width of the button. Options include: "*px" - logical pixel values, for example "10px" indicates 10 logical pixel values, and rpx is not supported. The contents of the button are displayed in the center; "auto" - customize the calculated width and automatically adjust the button width according to the content |
When using the type value to set the style of the button, the fontSrc and text attributes will be ignored.
Value | Instruction |
---|---|
forward | Forward button |
back | Backward button |
share | Sharing button |
favorite | Favorite button |
home | Home button |
menu | Menu button |
close | Close button |
none | If there is no style, you need to set the content to be displayed on the button through the text attribute and set the font library to be used through the fontSrc attribute. |
Pull-down refresh animation on the h5 platform, and only circle type is available .
Attribute | Type | Defaults | Describe |
---|---|---|---|
color | String | #2BD009 | The color format is "#RRGGBB" |
offset | String | 0px | The starting position of the pull-down refresh control. Support percentage, such as "10%" and Pixel values, such as "50px", but not rpx. |
Attribute | Type | Defaults | Describe |
---|---|---|---|
autoFocus | Boolean | false | Whether to get focus automatically? |
align | String | center | The alignment of the text in the non-input status. Options: "left" - left-aligned; "right" – right aligned; "center" - center aligned. |
backgroundColor | String | rgba(255,255,255,0.5) | Background color |
borderRadius | String | 0px | The corner radius of the input box, with the value format of "XXpx", where XX is the pixel value (logical pixel), and rpx is not supported. |
placeholder | String | Prompt text | |
placeholderColor | String | #CCCCCC | Prompt text color |
disabled | Boolean | false | Is it inputable? |
Notes:
h5
node is not configured, the configuration under app-plus
will be used by default.h5
node is configured, the configuration under app-plus
will be overwritten.Attribute | Type | Describe |
---|---|---|
colorType | String | Color of shadow. Supported options: grey, blue, green, orange, red, yellow |
Traditional vue components need to be installed, referenced and registered before they can be used.easycom
Streamline it to one step.
As long as the components are installed in the components directory of the project and conform to the components/ component name/ component name.vue
directory structure. You can use it directly in the page without reference or registration.
As follows:
<template>
<view class="container">
<uni-list>
</uni-list>
</view>
</template>
<script>
//There is no need to introduce by import or register uni-list components in components. You can use it directly in template
export default {
data() {
return {
}
}
}
</script>
No matter how many components are installed in the components directory, easycom
will automatically remove unused components after packaging, which is particularly friendly to the use of component library.
easycom
is automatically turned on instead of manually. You can perform personalized settings on the easycom
node of pages.json
when needed, such as turning off automatic scanning, or customizing the strategy of scanning matching components. The setting parameters are as follows:
Attribute | Type | Defaults | Describe |
---|---|---|---|
autoscan | Boolean | true | Whether to enable automatic scanning. After enabling, it will automatically scan components that conform to the components/ component name/ component name.vue directory structure |
custom | Object | - | Customize component matching rules in a regular way. If autoscan cannot meet the demand, you can use custom to customize the matching rules |
Example of custom easycom configuration
If you need to match the vue file in node_modules, you need to use a matching rule of the form of packageName/path/to/vue-file-$1.vue
, where packageName
is the name of the installed package, and /path/to/vue-file-$1.vue
is the path of the vue file in the package.
"easycom": {
"autoscan": true,
"custom": {
}
}
Instruction
easycom
can be used on any page without import
or declaration in components
easycom
are not introduced globally but locally. For example, only the corresponding page has been loaded on H5 before loading the corresponding componentseasycom
have lower priority than those imported manually (distinguish between hyphenation form and hump form), provided they have exactly the same name.easycom
within pages.json
will not trigger recompilation, but will trigger when the page content is changed.easycom
only handles vue components, not small program-specific components (such as WeChat's wxml format components). Components suffixed with .nvue are not processed. But vue components can also run on full end, including applets and app-nvue. You can refer to uni ui, use the vue suffix, and be compatible with nvue pages..vue
in the nvue
page will use native rendering according to the nvue method, and the unsupported css will be ignored. In this case, easycom
is also supportedIf the application is a multi-tab application, you can specify the first-level navigation bar and the corresponding page displayed when the tab is switched through the tabBar configuration item.
Providing tabBar configuration in pages.json is not only to facilitate rapid development and navigation, but also to improve performance on the Mini App. On these platforms, the underlying native engine can directly read the tabBar information configured in pages.json and render native tabs without waiting for the js engine to initialize at startup.
Tips
Attribute description:
Attribute | Type | Required | Defaults | Describe | |||
---|---|---|---|---|---|---|---|
color | HexColor | Yes | Default color of text on tab | ||||
selectedColor | HexColor | Yes | Color when the text on the tab is selected | ||||
backgroundColor | HexColor | Yes | tab background color | ||||
borderStyle | String | No | black | Color of top border of tabbar. Options include black and white | Other color values supported by App 2.3.4+ and H5 3.0.0+ | ||
blurEffect | String | No | none | iOS Gaussian blur effect, with optional values of dark/extralight/light/none | |||
list | Array | Yes | tab list. See the list attribute description for details, with at least 2 tabs and at most 5 tabs | ||||
<!-- | position | String | No | bottom | Optional value bottom, top | top value is only supported by WeChat applet | --> |
fontSize | String | No | 10px | Default text size | App 2.3.4+, H5 3.0.0+ | ||
iconWidth | String | No | 24px | Default width of icon (height scales in equal proportion) | App 2.3.4+, H5 3.0.0+ | ||
spacing | String | No | 3px | Spacing between icon and text | App 2.3.4+, H5 3.0.0+ | ||
height | String | No | 50px | tabBar default height | App 2.3.4+, H5 3.0.0+ | ||
midButton | Object | No | The middle button is only valid when the number of list items is even | App 2.3.4+, H5 3.0.0+ |
The list receives an array, and each item in the array is an object with the following attribute values:
| Attribute| Type| Required| |:-|:-|:-|:-| | pagePath| String| Yes| Page path, that must be defined in pages first| | | text| String| Yes| Button text on tab, optional on App and H5 platform. For example, a + icon without text can be placed in the middle| | | iconPath| String| No| Path of the image, the size of icon is limited to 40kb, and the recommended size is 81px * 81px. For position = top, this parameter is invalid and does not support network image or font icon| | | selectedIconPath| String| No| Path of the selected image, the size of icon is limited to 40kb, and the recommended size is 81px * 81px. For position = top, this parameter is invalid| | | visible| Boolean| No| This item is displayed or not, with displayed as default| App (3.2.10+), H5 (3.2.10)+| |iconfont|Object|No|Font icon, which takes precedence over iconPath|App (3.4.4+)|
midButton attribute description
Attribute | Type | Required | Defaults | Describe | |
---|---|---|---|---|---|
width | String | No | 80px | Width of the middle button. Other items of tabBar are divided equally after subtracting this middle button width. The default value is the width which is divided equally with other items | |
height | String | No | 50px | The height of the middle button can be greater than the tabBar height to achieve the effect of middle convex | |
text | String | No | Text of the middle button | ||
iconPath | String | No | Image path of the middle button | ||
iconWidth | String | No | 24px | Image width (height scales in equal proportion) | |
backgroundImage | String | No | Background image path of the middle button | ||
iconfont | Object | No | Font icon, which takes precedence over iconPath | App (3.4.4+) |
There is no pagePath on midButton, so you need to listen to click events and handle the behavior logic after clicking by yourself. listen to click events to call API: uni.onTabBarMidButtonTap
iconfont parameter description:
property | type | description |
---|---|---|
text | String | Font Unicode Code |
selectedText | String | The Unicode code of the selected font |
fontSize | String | Font icon font size (px) |
color | String | Font icon color |
selectedColor | String | Font icon selected color |
For the js api of the tabbar, see [Interface-Interface-tabbar], which can realize the functions of dynamic display hiding (for example, the pop-up layer cannot the cover tabbar), content modification (for example, internationalization), item adding corner mark and so on. There are also examples in hello Mini App.
For the item click event of the tabbar, see [onTabItemTap of the page life cycle]
For the code to jump to the tabbar page, you can only use [uni.switchTab] in the api instead of uni.navigateTo or uni.redirectTo; You must set [open-type="switchTab"] when using the navigator component to jump
The default height of the tabbar is different on different platforms. The default height of the App side has been adjusted from 56px to 50px, which is unified with the H5 side. Developers can also set the height by themselves, back to 56px.
tabbar is simulated by div on the H5 side, which is a part of the front screen window. If you want to use the bottom localization method, you should use the css variable --window-bottom
, such as a button floating 10px above the tabbar, the style is as follows bottom: calc(var(--window-bottom) + 10px)
An example of a tabbar template with a + sign in the middle. cross-platform is possible, but the + sign is not convex. If the middle convex is required, configure the midButton of tabbar.
If you need to log in first and then enter the tab page, you don't need to set the login page as the home page, the home page is still the tabbar page,
The front-end pop-up mask layer cannot block the tabbar problem, and the tabbar is dynamically hidden when the cross-end processing method is used.
On the PC widescreen, if you want to change the display position of tabbar when there are multi-window structures such as topwindow, leftwindow or rightwindow on the page, please use [custom-tab-bar component] configuration. If you want to hide tabbar, you can use the following css (the advantage is that it can be linked with windows such as leftwindow):
.Mini App--showleftwindow + .uni-tabbar-bottom {
display: none;
}
Code example
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
}]
}
Native tabBar is a relatively fixed configuration method which may not satisfy all scenarios, but involve the custom tabBar.
But note that in addition to the H5 side, the performance experience of the custom tabBar will be lower than the native tabBar. The Mini App are not necessary and should not be customized.
The startup mode configuration, which only takes effect during development, is used to simulate a direct page scenario, such as: after the applet is forwarded, the user clicks on the opened page.
Attribute description:
Attribute | Type | Required or not | Describe |
---|---|---|---|
current | Number | Yes | The current active mode, with index values of the list node |
list | Array | Yes | Start mode list |
list description:
Attribute | Type | Required or not | Describe |
---|---|---|---|
name | String | Yes | Start mode name |
path | String | Yes | Start page path |
query | String | No | Startup parameter, available in the onLoad function of the page |
Code example:
"list": [{
},
{
"name": "test",
"path": "pages/component/switch/switch"
}
]
}