- Release Notes and Announcements
- Product Introduction
- About Platform Prerequisites
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
- Release Notes and Announcements
- Product Introduction
- About Platform Prerequisites
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
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 | |
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 | |
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
navigationStyleAs 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 |
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 | |
uploadFile | Number | No | 60000 |
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. |
Yes
No
Was this page helpful?