tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Cloud Mini Program Platform
    Documentation

    Configuration

    Last updated: 2024-04-10 17:08:55

      Global configuration

      The app.json file, located in the root directory of the mini program, is used for the global configuration of the TMF mini program. It allows for the determination of page file paths, window performance, network timeout duration, and multi-tab functionality through various settings.

      Configuration example:

      Below is an app.json file that includes a selection of commonly used configuration options:
      {
        "pages": ["pages/index/index", "pages/logs/index"],
        "window": {
          "navigationBarTitleText": "Demo"
        },
        "tabBar": {
          "list": [
            {
              "pagePath": "pages/index/index",
              "text": "Homepage"
            },
            {
              "pagePath": "pages/logs/logs",
              "text": "Log"
            }
          ]
        },
        "networkTimeout": {
          "request": 10000,
          "downloadFile": 10000
        },
        "debug": true,
        "navigateToMiniProgramAppIdList": ["tmfq0nbl3hxxlv2w7u"],
        "groupIdList":["123456","34356576","457658769"]
      }

      app.json Configuration Item List

      Attribute
      Type
      Required
      Description
      pages
      String Array
      Yes
      List of Page Paths
      window
      Object
      No
      Global Default Window Performance
      tabBar
      Object
      No
      Performance of the Bottom Tab Bar
      networkTimeout
      Object
      No
      Network timeout period
      requiredBackgroundModes
      String Array
      No
      Capabilities required for backend usage, such as Music Playback
      navigateToMiniProgramAppIdList
      String Array
      No
      List of mini programs requiring redirection. See navigateToMiniProgram for details.
      permission
      Object
      No
      Settings Related to Mini Program Interface Permissions
      darkmode
      Boolean
      No
      Judge whether the current mobile device is in night mode

      pages

      This is used to specify the composition of the mini program, with each item corresponding to the path + filename information of a page. The filename does not require an extension, because the framework will automatically search for the corresponding .json, .js, .wxml, and .wxss files for processing.
      The first item in the
      Assuming the development directory is:
      ├── app.js
      ├── app.json
      ├── app.wxss
      ├── pages
      │   │── index
      │   │   ├── index.wxml
      │   │   ├── index.js
      │   │   ├── index.json
      │   │   └── index.wxss
      │   └── logs
      │       ├── logs.wxml
      │       └── logs.js
      └── utils
      This requires writing in the app.json file:
      {
        "pages": ["pages/index/index", "pages/logs/logs"]
      }

      window

      This is used to set the status bar, navigation bar, title, and window background color of the mini program.
      Attribute
      Type
      Default value
      Description
      navigationBarBackgroundColor
      HexColor
      #000000
      Navigation bar background color, such as #000000.
      navigationBarTextStyle
      String
      white
      Navigation bar title color, only supporting black / white.
      navigationBarTitleText
      String
      -
      Navigation bar's title text content
      navigationStyle
      String
      default
      Navigation bar style, only supports the following values:
      default: default style;
      Custom: Customize the navigation bar, retaining only the capsule button in the upper right corner;
      hide: Custom navigation bar, which can support privacy navigation bar and capsule button.
      backgroundColor
      HexColor
      #ffffff
      Window's background color
      backgroundTextStyle
      String
      dark
      Dropdown loading style, only supporting dark / light.
      backgroundColorTop
      String
      #ffffff
      Top window's background color, only supported on iOS.
      backgroundColorBottom
      String
      #ffffff
      Bottom window's background color, only supported on iOS.
      enablePullDownRefresh
      Boolean
      false
      Whether to enable pull-down refresh for the current page. See Page.onPullDownRefresh for details.
      customNavigateBack
      Boolean
      false
      Do you need to intercept the default return of the page (click tabBar to return or slide sideways or back key to return) and use it in conjunction with Page.onCustomBack
      pageOrientation
      String
      portrait
      Screen rotation settings, supporting auto / portrait / landscape. See Responding to Display Area Changes for details.
      Note 1: HexColor (Hexadecimal color value), such as "#ff00ff".
      Note 2: Regarding navigationStyle
      As in app.json:
      {
        "window": {
          "navigationBarBackgroundColor": "#ffffff",
          "navigationBarTextStyle": "black",
          "navigationBarTitleText": "TMF Interface Function Demonstration",
          "backgroundColor": "#eeeeee",
          "backgroundTextStyle": "light"
        }
      }

      tabBar

      If the mini program is a multi-tab application (with a tab bar at the bottom or top of the client window for page switching), the appearance of the tab bar and the corresponding page displayed when switching tabs can be specified through the tabBar configuration item.
      Attribute
      Type
      Required
      Default value
      Description
      color
      HexColor
      Yes
      -
      Default text color on the tab, only supporting hexadecimal colors.
      selectedColor
      HexColor
      Yes
      -
      The color of the text on the tab when selected, only supporting hexadecimal colors.
      backgroundColor
      HexColor
      Yes
      -
      Default background color on the tab, only supporting hexadecimal colors.
      borderStyle
      String
      No
      black
      The color of the border on the tab bar, only supporting black / white.
      list
      Array
      Yes
      -
      The list of tabs, with a minimum of 2 tabs and a maximum of 5 tabs.
      position
      String
      No
      bottom
      The position of the tabBar, only supporting bottom / top.
      custom
      Boolean
      No
      false
      For customizing the tabBar, see Customize tabBar for more details.
      The list accepts an array, with a configuration limit of a minimum of 2 and a maximum of 5 tabs. The tabs are sorted in the order of the array, with each item being an object, whose attribute values are as follows:
      Attribute
      Type
      Required
      Description
      pagePath
      String
      Yes
      The page path, which must be defined in the pages beforehand.
      text
      String
      Yes
      Text on the tab button
      iconPath
      String
      No
      The image path, with an icon size limit of 40 kb, is recommended to be 81 px * 81 px, and does not support network images.
      selectedIconPath
      String
      No
      The selected image path, with an icon size limit of 40 kb, is recommended to be 81 px * 81 px, and does not support network images. When the position is set to top, the icon is not displayed.

      disableSlideCloseGesture

      Whether to disable the side sliding gesture to close the applet. Default is false;

      networkTimeout

      The timeout duration for various network requests, all measured in milliseconds.
      Attribute
      Type
      Required
      Default value
      Description
      request
      Number
      No
      60000
      The timeout duration for the request, measured in milliseconds.
      uploadFile
      Number
      No
      60000
      The timeout duration for the uploadFile, measured in milliseconds.

      requiredBackgroundModes

      Declare the capabilities required for backend operation, which are of array type. Currently, the following items are supported:
      audio: Backend music playback.
      Sample code:
      {
        "pages": ["pages/index/index"],
        "requiredBackgroundModes": ["audio"]
      }
      Note:
      Here, the interface for backend operation is declared. It can take effect directly on the development and trial versions, while the official version still needs to get approved.

      navigateToMiniProgramAppIdList

      When the mini program needs to use the navigateToMiniProgram interface to redirect to other mini programs, it is necessary to first declare the list of mini program appIds to be redirected to in the configuration file, with a maximum of 10 allowed.

      permission

      Mini program interface permission related settings. The field type is an Object, with the following structure:
      Attribute
      Type
      Required
      Default value
      Description
      scope.userLocation
      PermissionObject
      No
      -
      Declaration of location-related permissions

      PermissionObject Structure

      Attribute
      Type
      Required
      Default value
      Description
      desc
      string
      Yes
      -
      The Chinese usage description displayed when the mini program obtains permissions. Maximum of 80 characters
      desc-en
      string
      Yes
      -
      The English usage description displayed when the mini program obtains permissions. Maximum of 80 characters
      desc-adesc-ar
      string
      Yes
      -
      The Arabic usage description displayed when the mini program obtains permissions. Maximum of 80 characters
      Sample code:
      {
        "pages": ["pages/index/index"],
        "permission": {
          "scope.userLocation": {
            "desc": "Your location information will be used for the display of the mini program's location interface effects,"
            "desc-en": "where are you? do you know",
            "desc-ar":"انا من السعودية"
          }
        }
      }

      Page Configuration

      Each mini program page can also use a .json file to configure the window performance of the respective page.
      The configuration of the page can only set some of the window configuration items in app.json. The configuration items on the page will override the same items in the window of app.json.

      Configuration example:

      {
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "TMF Interface Function Demonstration",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
      }

      List of Page Configuration Items

      Attribute
      Type
      Default value
      Description
      navigationBarBackgroundColor
      HexColor
      #000000
      Navigation bar background color, such as #000000.
      navigationBarTextStyle
      String
      white
      Navigation bar title color, only supporting black / white.
      navigationBarTitleText
      String
      -
      Navigation bar's title text content
      navigationStyle
      String
      default
      Navigation bar style, only supports the following values:
      default: default style;
      Custom: Customize the navigation bar, retaining only the capsule button in the upper right corner;
      hide: Custom navigation bar, which can support privacy navigation bar and capsule button.
      backgroundColor
      HexColor
      #ffffff
      Window's background color
      backgroundTextStyle
      String
      dark
      Dropdown loading style, only supporting dark / light.
      backgroundColorTop
      String
      #ffffff
      Top window's background color, only supported on iOS.
      backgroundColorBottom
      String
      #ffffff
      Bottom window's background color, only supported on iOS.
      enablePullDownRefresh
      Boolean
      false
      Whether to globally enable pull-down refresh. See Page.onPullDownRefresh for details.
      pageOrientation
      String
      portrait
      Screen rotation settings, supporting auto / portrait / landscape. See "Responding to Display Area Changes" for details.
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy