Knowledge:

Json configuration file Sitemap. json Configuration file In the folder on the page

The last article talked about wechat small program has four kinds of JSON configuration files, today to make up the knowledge

Json is a data format that takes the form of configuration files in the actual development of JSON

There are four json configuration files in the applets project, which are: Json configuration file in the root directory of the project 2 Page. Json configuration file in each page folder 3 Sitemap. json configuration file in the root directory of the project 4 project.config.json configuration file in the root directory of the project

Json configuration file

App. json is placed in the root of the applet. It is a file for global configuration of wechat applets. The main content has the road strength of the file, the window performance, set the network timeout time

The default app.json configuration

Pages array: configures the page path of the applet window object: configures the status bar, navigation bar, title, and window background color of the applet tabBar object: configures the TAB bar effect of the applet sitemapLocation: Whether the applets and their pages are allowed to be indexed by wechat. The file content is a JSON object. If there is no sitemap. JSON, all pages are allowed to be indexed by default. Sitemap. json has the following properties:

1. Pages properties

This parameter configures the page path of the applet

steps

  1. Json -> Pages Array node -> Add a page path and save it -> automatically create a page corresponding to the path
  2. Json -> pages array node as needed to adjust the order of the array path, to modify the default home page

2. Windows Properties

Used to set the status bar, navigation bar, title, window background color

NavigationBarTitleText String navigationBarTitleText content

NavigationBarBackgroundColor HexColor # 000000 navigation bar background color, such as # 000000

NavigationBarTextStyle String White Navigation bar title color, black and white only

BackgroundColor HexColor # FFFFFF the backgroundColor of the window

BackgroundTextStyle String Dark drop-down loading style. Only dark/Light is supported

EnablePullDownRefresh Boolean False Whether the drop-down refresh function is enabled globally. See Page. OnPullDownRefresh

OnReachBottomDistance Number 50 Distance from the bottom of the page when the bottom-pulling event is triggered, in unit of px. See Page. OnReachBottom

Window node common configuration

1

Requirement: put the title on the navigation bar from the defaultWeChatModified toOne hundred and ninety thousand leagues,

Json -> window -> navigationBarTitleText

The effect is as follows:



Requirement: put the title on the navigation bar from the default#fffModified to#35cd94.

Setup steps: app. Json – > Windows – > navigationBarBackgroundColor

The effect is as follows:



3

Requirement: put the title on the navigation bar from the defaultblackModified towhite ，

Json -> window -> navigationBarTextStyle

The effect is as follows:

4,

App. json -> window -> Set enablePullDownRefresh to true

5,

Setting the background color of the drop-down refresh window When the drop-down refresh function is enabled globally, the default window background is white. Json -> window -> Specify hexadecimal color value for backgroundColor #eee

6,

After the pull-down loading function is enabled globally, the loading style of the window is white by default. If you want to change the loading style, Json -> window -> specify dark value for backgroundTextStyle

7,

Set the distance concept of pull-up touch bottom: pull-up touch bottom is a special term of mobile terminal, which loads more data by pulling and sliding the finger on the screen. Json -> window -> onReachBottomDistance Set the new value note: The default distance is 50px,

3. TabBar TAB configuration

TabBar is a common page effect in mobile applications, which is used to quickly switch between multiple pages. Applets are usually divided into bottom tabBar and top tabBar. TabBar can be configured with a minimum of 2 to a maximum of 5 tabs. When rendering the top tabBar, icon is not displayed, only text is displayed

TAB bar properties

BackgroundColor: backgroundColor of the navigation bar

SelectedIconPath: image path when selected

BorderStyle: The color of the border on the tabBar

IconPath: the image path if this parameter is not selected

SelectedColor: The color of the TAB text when selected

Color: Default (unchecked) color for text on TAB

2. Page. json configuration file

Relationship between page level and global level configuration:

In the applet, the window node in app.json can globally configure the window performance of each page in the applet. If some applet pages want to have a special window representation, a page-level. Json configuration file can do this. Summary: The page-level configuration takes effect before the global configuration

Sitemap. json configuration file

The sitemap.json configuration or the management background page indexing switch can configure whether their applet pages allow wechat indexing. When developers allow wechat to index, wechat uses crawlers to index the page content of mini programs. When the index is triggered by a user’s search term, pages from the applet may be displayed in the search results. Users generally do not need to change this point. If you need to change it, you can check the documents on the official website according to your specific needs

Json configuration file

This is some configuration of wechat developer tools, can be modified according to the required configuration. Compiler interface, code hints, etc. The following is the configuration file’s official website Project configuration file | WeChat development documentation

The value of type can be Folder, file, suffix, prefix, regexp2, and glob2, which correspond to folders, files, suffixes, prefixes, regular expressions, and Glob rules respectively. All rule values automatically ignore case.

Note 1: if the value of the value field indicates the path of a file or folder, the miniprogramRoot directory is used as the root directory.

Note 2: RegEXP and glob are only supported by tools 1.02.1809260 or later.

Sample configuration is as follows: {" packOptions ": {" ignore" : [{" type ":" file ", "value" : "test/test. Js"}, {" type ":" folder "and" value ": "test" }, { "type": "suffix", "value": ".webp" }, { "type": "prefix", "value": "test-" }, { "type": "glob", "value": "test/**/*.js" }, { "type": "regexp", "value": "\\.jsx$" }] } }Copy the code

Configuration fields











Small procedures there are a lot of knowledge, you can click the link below to view the official website development documentation

Wechat development document