Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

WeChat program page configuration


May 18, 2021 WeChat Mini Program Development Document


Table of contents


The page configuration

Each small program page can also use the .json file to configure the window performance of this page. T he configuration item on the page overrides the same configuration item in the window of app.json on the current page. The contents of the file are a JSON object with the following properties:

The configuration item

Property Type The default Describe The lowest version
navigationBarBackgroundColor HexColor #000000 The background color of the navigation bar, #000000
navigationBarTextStyle string white Navigation bar title color, only black / white
navigationBarTitleText string The text content of the navigation bar title
navigationStyle string default Navigation bar style, only the following values are supported:
default default style
custom navigation bar, only the upper right corner capsule button
WeChat Client 7.0.0
backgroundColor HexColor #ffffff The background color of the window
backgroundTextStyle string dark The style of the pull-down loading only dark light
backgroundColorTop string #ffffff Background color of the top window, iOS only WeChat Client 6.5.16
backgroundColorBottom string #ffffff Background color of the bottom window, iOS only WeChat Client 6.5.16
enablePullDownRefresh boolean false Whether to turn on the current page pull-down refresh.
See Page.onPullDownRefresh
onReachBottomDistance number 50 The distance from the bottom of the page, in px, when the bottom-of-the-page event is triggered.
See page.onReachbottom
pageOrientation string portrait Screen rotation settings, support auto / portrait / landscape
See the response display area change in detail
2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false Set as true Then the entire page cannot be scrolled up.
Only valid in the page configuration, cannot be app.json In place
usingComponents Object no Page Custom Component Configuration 1.6.3
style string default Enable the new version of component style 2.10.2
singlePage Object no Single page mode related configuration 2.12.0
On page configuration, you can only set the configuration items corresponding to the WINDOW in App.json to determine the window performance of this page, so you don't need to write this attribute of WINDOW.

singlePage

The basic library 2.11.3 and above are supported and now open into single-page mode when shared with Beta

One-page mode-related configuration

Property Type Required The default Describe
navigationBarFit String Whether Auto-adjust by default, float if the original page is a custom navigation bar, otherwise it is squeezed The intersecting state of the navigation bar and the page, with a value of float, states that the navigation bar floats on the page and intersects the page, and a value of squeezed shows that the page is squeezed by the navigation bar and does not intersect the page

An example of configuration

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}