Skip to main content

Configuration

The app.json file in the Mini Program root directory is used to apply global configurations to Mini Programs. The file content is a JSON object with the following properties:

Configuration Items#

PropertyTypeDefault ValueRequiredDescription
entryPagestring-index page name
windowObject--Global default window behavior
tabBarObject--Behavior of the tab bar at the bottom of the page.

window#

PropertyTypeDefault ValueRequiredDescription
navigationBarBackgroundColorHexColor#000000-The navigation bar background color
navigationBarButtonColorHexColor#707A8A-The button color in the navigation.
navigationBarTitleTextstring-Title text of the navigation bar
navigationBarTextStylestringwhite-The title color of the navigation bar, only supports black or white
navigationStylestringdefault-The navigation bar style. Only the following values are supported. default: the default style. custom: custom navigation bar, only retains the Mini Program control button in the upper-right corner, click here for details.
backgroundTextStylestringdark-The pull-down loading style, only dark and light are supported.
backgroundColorHexColor#ffffff-The background color of the window.

tabBar#

If the Mini Program is a multi-tab app (which uses a tab bar at the bottom or top of the app window to switch between tabs), you can use the tabBar configuration item to specify the behavior of the tab bar and the pages displayed when the user switches between tabs.

PropertyTypeDefault ValueRequiredDescription
colorHexColorThe default color of the tab bar text, only supports hex color codes.
selectedColorHexColorThe color of the tab bar text when being selected, only supports hex color codes.
backgroundColorHexColorThe color of the tab bar background, only supports hex color codes.
borderStylestringblackThe border color of the tab bar, only supports black and white.
listarrayThe tab list (see the list property description), supports 2 to 5 tabs.
positionstringbottomThe tabBar position, only supports bottom and top.
custombooleanfalseA custom tabBar, click here for details.

The list property accepts an array, which can only configure 2 to 5 tabs. The tabs are listed in the order of the array. Each item is an object with the following properties:

PropertyTypeDefault ValueRequiredDescription
pagePathstringThe page path, which must be defined first in pages.
textstringThe text of tab buttons.
iconPathstringThe image path. The size of the icon is limited to 40 KB, suggested dimensions: 81px by 81px, online images are not supported. When position is set to top, the icon is not displayed.
selectedIconPathstringThe image path for the selected icon. The size of the icon is limited to 40 KB, suggested dimensions: 81px by 81px, online images are not supported. When position is set to top, the icon is not displayed.

Page Configuration#

For each Mini Program page, the .json file named after the Mini Program can also be used to configure the window behaviors of this page. The configuration items in the current page overwrite the corresponding window configuration items in app.json. The file content is a JSON object, example:

{  "navigationBarBackgroundColor": "#ffffff",  "navigationBarTextStyle": "black",  "navigationBarTitleText": "Weixin API feature demo",  "backgroundColor": "#eeeeee",  "backgroundTextStyle": "light",  "initialRenderingCache": "static"}
PropertyTypeDefault ValueRequiredDescription
initialRenderingCacheString-Add static value to enable static rendering cache.

Build Configuration#

The Build option can be configured in bmp.config/index.js. You can configure alias for build or global constants for the project. Example:

const path = require('path')module.exports = {  // settings for alias  alias: {    '@': path.resolve('./src'),  },  // entry of the mini program  entry: {    app: ['src/app'],  },  // global constants  defineConstants: {},  // custom webpack-chain settings  webpackChain: {},}

The detailed configurable properties are as follows.

alias#

Used to configure directory aliases, thus facilitating the writing of code reference paths.

For example, write a file reference using a relative path as follows.

import A from '../../componnets/A'

To avoid writing multi-level relative paths, we can configure alias as follows:

module.exports = {  // ...  alias: {    '@/components': path.resolve(__dirname, '..', 'src/components'),  },}

With the above configuration, the src/components and src/utils directories can be configured as aliases, and the package.json and project.config.json files in the root directory can be configured as aliases, so that the references in the code are rewritten as follows:

import A from '@/components/A'

In order for the editor (VS Code) to not report errors and continue to use the automatic path completion feature, we need to configure paths in jsconfig.json or tsconfig.json in the root of the project for the editor to recognize our aliases in the following form:

{  "compilerOptions": {    "baseUrl": ".",    "paths": {      "@/components/*": ["./src/components/*"],    }  }}

entry#

This is used to specify the location of app.js.

For example, if the project's app.jsx is in src/app.jsx, then you can configure it like this:

module.exports = {  // ...  entry: {    app: ['src/app'],  },}

and app.config.js must be in the same directory as the specified app.js

webpackChain#

Customize the Webpack configuration.

This function receives two arguments. The first argument is the webpackChain object, which can be modified by referring to the webpack-chain API, and the second argument is the webpack instance.

Exmaple:

// example of using raw-loader,which can load md file into codesmodule.exports = {  // ...  webpackChain(chain, webpack) {    chain.merge({      module: {        rule: {          myloader: {            test: /\.md$/,            use: [              {                loader: 'raw-loader',                options: {},              },            ],          },        },      },    })  },}

defineConstants#

This is used to configure some global variables for use in the code.

The configuration can be found in Webpack DefinePlugin Example:

module.exports = {  // ...  defineConstants: {    A: '"a"', // JSON.stringify('a')  },}