tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Cloud Mini Program Platform
    Documentation
    Download PDF

    Global Configuration

    Last updated: 2024-07-12 18:34:32
    Download PDF
      Mini Program root directory app.json The file is used for global configuration of the WeChat Mini Program. The file content is a JSON Object has the following properties.

      Configuration item

      attribute
      type
      required
      describe
      string
      no
      Mini Program default start home page
      pages
      string[]
      yes
      Page Path List
      window
      Object
      no
      Global default window representation
      tabBar
      Object
      no
      BOTTOM tab Column performance
      debug
      boolean
      no
      Whether or not to open debug Mode, off by default
      Object[]
      no
      Subcontract structure configuration
      workers
      string
      no
      Worker Directory for code placement
      string[]
      no
      The list of mini programs to jump to, see wx.navigateToMiniProgram for details.
      Object
      no
      Subcontract Predownload Rules
      Object
      no
      overall situation Custom Components configuration
      Object
      no
      Small Program Interface Permissions Related Settings
      darkmode
      boolean
      no
      Mini Program support DarkMode
      string
      no
      Specify theme.json And dark mode true is required

      entryPagePath

      Specify the default start path (home page) of the Mini Program, common scenario is from the WeChat chat list page drop-down start, Mini Program list start. If not, the default is pages The first item in the list. Page path parameters are not supported.
      {
        "entryPagePath": "pages/index/index"
      }

      pages

      That specifies which pages the Mini Program consists of, with each item corresponding to a page Path (including file name) Information. Filename does not need to write file suffix, framework will automatically find the corresponding location .json, .js, .wxml, .wxss Four files for processing.
      Not specified entryPagePath The first item in the array represents the initial page (home page) of the Mini Program.
      Mini Program Added/Reduce pages, all need to be on pages Array to modify.
      If 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
      You need to app.json Middle write
      {
        "pages": ["pages/index/index", "pages/logs/logs"]
      }

      window

      Used to set Mini Program status bar, navigation bar, title, window background color.
      attribute
      type
      default value
      describe
      navigationBarBackgroundColor
      HexColor
      #000000
      Navigation bar background color, such as #000000
      navigationBarTextStyle
      string
      white
      Navigation bar header color, support only black / white
      navigationBarTitleText
      string
      -
      Navigation Title Text Content
      navigationStyle
      string
      default
      Navigation bar style supports only the following values
      default Default Style
      custom Customize the navigation bar, leaving only the capsule on in the upper right corner. See note 2.
      backgroundColor
      HexColor
      #ffffff
      The background color of the window
      backgroundTextStyle
      string
      dark
      Pull down loading Style, only supports dark / light
      backgroundColorTop
      string
      #ffffff
      The background color of the top window, only iOS Support
      backgroundColorBottom
      string
      #ffffff
      The background color of the bottom window, only iOS Support
      enablePullDownRefresh
      boolean
      false
      Whether to enable global drop-down refresh. See for details Page.onPullDownRefresh
      onReachBottomDistance
      number
      50
      The distance from the bottom of the page when the event is triggered, in px. See for details Page.onReachBottom
      customNavigateBack
      Boolean
      false
      Whether or not you want to intercept the default return of the page (tabBar return or side-swipe or back key return) is used in conjunction with Page.onCustomBack.
      pageOrientation
      string
      portrait
      Screen rotation settings, support car / portrait / landscape See for details Response to display area changes
      notes 1: Hex Color (hex color value), as in "#ff00ff"
      notes 2: About
      navigationStyle
      iOS/Android client 7.0.0 The following version,navigationStyle Only in app.json In effect;
      iOS/Android client 6.7.2 Version starts,navigationStyle: custom Yes web-view Invalid component;

      tabBar

      If the Mini Program is more than one tab Application (the bottom or top of the client window has tab Column to switch pages), you can click through the tabBar Configuration item designation tab Column performance, and tab The corresponding page to display when toggling.
      attribute
      type
      required
      default
      describe
      color
      HexColor
      yes
      -
      tab Default color for text on, only hexadecimal color is supported
      selectedColor
      HexColor
      yes
      -
      tab Supports hexadecimal colors only
      backgroundColor
      HexColor
      yes
      -
      tab Supports only hexadecimal colors
      borderStyle
      string
      no
      black
      Tabs The color of the top border, Support only black / white
      list
      Array
      yes
      -
      tab For a list of list Property explaination, minimum 2 Most 5 individual tab
      position
      string
      no
      bottom
      tabBar Only supports the location of bottom / top
      custom
      boolean
      no
      false
      custom Tab Bar, see you Custom tabBar
      among list Take an array,Only minimal configuration 2 Most 5 individual tab. tab Sorted in the order of the array, each item is an object with the following property values.
      attribute
      type
      required
      introductions
      pagePath
      string
      yes
      Page path, must be in the pages First definition
      text
      string
      yes
      tab Up on text
      iconPath
      string
      no
      Picture path, icon Size limit is 40kb, recommended size 81px * 81px, does not support web pictures. when position for top Does not display when icon.
      selectedIconPath
      string
      no
      Selected picture path, icon Size limit is 40kb, recommended size 81px * 81px, does not support web pictures. when position for top Does not display when icon.
      

      debug

      Can be turned on in the developer tools debug Mode, in the developer tools console panel, debugging information to info Is given in the form of Page Registration, page routing, data update, event triggering, etc. Can help developers quickly locate some common problems.

      subpackages

      Enable Subpackage Loading, declare the project sub-packageing structure.
      Note：
      Written subPackages Also support.

      workers

      Use Worker When working with multithreaded tasks, setting the Worker Directory for code placement.
      When a mini program needs to use navigateToMiniProgram interface to jump to other mini programs, you need to declare the list of appId of mini programs you need to jump to in the configuration file, at most 10 appId are allowed.

      preloadRule

      usingComponents

      Custom components declared in app.json are considered global custom components and can be used directly on pages or custom components within the mini program without being declared again. It is recommended to declare only those custom components that will be used on almost all pages.
      Note：
      Global custom components are considered to be relied upon by all pages and will be initialised when all pages are launched, which affects startup performance and takes up the size of the main package. Custom components that are only referenced by individual pages or sub-packages should be declared in the page configuration as much as possible.

      permission

      Mini Program Interface Permissions Related settings. Field type is Object, structured as:
      attribute
      type
      required
      default
      describe
      scope.userLocation
      PermissionObject
      no
      -
      Location-dependent permission statement
      Permission Object structure
      attribute
      type
      Required
      Default
      Introductions
      desc
      string
      yes
      -
      Description of the Chinese usage of the interface displayed by the mini program when obtaining permissions. Maximum 80 characters
      desc-en
      string
      no
      -
      Description of the English usage of the interface displayed by the mini program when obtaining permissions. Maximum 80 characters
      desc-adesc-ar
      string
      no
      -
      A description of the Arabic usage of the interface displayed when the mini program gets permissions. Maximum 80 characters
      Such as:
      {
        "pages": ["pages/index/index"],
        "permission": {
          "scope.userLocation": {
            "desc": "Your location information will be used to display the effects of the Mini Program location interface." // Continuous Background Positioning for Freeway Driving
          }
        }
      }

      darkmode

      You can configure "darkmode": true to indicate that the current mini program can be adapted to DarkMode, all the basic components will display different default styles according to the system theme, navigation bar and tab bar will also be automatically switched according to the developer's configuration.
      After configuration, please follow the DarkMode Adaptation Guide to do your own adaptation beyond the basic style.
      {
        "darkmode": true
      }

      themeLocation

      custom theme.json Path, when configured 'darkmode': true ,The current configuration file is required.

      Configuration example

      {
        "pages": ["pages/index/index", "pages/logs/index"],
        "window": {
          "navigationBarTitleText": "Demo"
        },
        "tabBar": {
          "list": [
            {
              "pagePath": "pages/index/index",
              "text": "index"
            },
            {
              "pagePath": "pages/logs/logs",
              "text": "logs"
            }
          ]
        },
        "debug": true
      }
      
      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