- 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
The objective of the mini program development framework is to offer developers a simple and efficient method to create services within the host application that emulate the experience of a native application. To this end, the framework provides the following tools and structures:
The view layer description languages WXML and WXSS.
A logic layer framework based on JavaScript.
Moreover, the framework also offers a data transmission and event system to facilitate communication and interaction between the view and logic layers. These systems can assist developers in effortlessly implementing various functionalities and interactive effects, thereby enhancing development efficiency and user experience.
Responsive data binding
At the heart of the mini program framework is a responsive data binding system that effortlessly maintains synchronization between data and the view. When data changes, modifications are made in the logic layer, and the view layer updates automatically. The mini program framework is divided into two parts:
View layer
Logic Layer (App Service)
The view layer is responsible for rendering pages, while the logic layer handles business logic and data operations. Communication and interaction between the two are facilitated by the data binding system, enabling synced updates of data and views.
Consider the following example:
<!-- This is our View --><view>Hello {{name}}!</view><button bindtap="changeName">Click me!</button>
// This is our App Service.// This is our data.const helloData = {name: 'TMF'}// Register a Page.Page({data: helloData,changeName(e) {// sent data change to viewthis.setData({name: 'MINA'})}})
Developers, through the framework, bind the
name in the logic layer data with the name in the view layer. Therefore, upon opening the page, Hello TCMPP! is displayed.Upon clicking the button, the view layer sends a
changeName event to the logic layer, which locates and executes the corresponding event handling function.Upon triggering the callback function, the logic layer executes the
setData operation, changing the name in data from TCMPP to MINA. As this data is already bound to the view layer, the view layer automatically changes to Hello MINA!.Page Management
The mini program framework manages the entire routing of the mini program pages, enabling seamless transitions between pages and providing a complete lifecycle for each page. Developers simply need to register the page's data, methods, and lifecycle functions with the framework, leaving all other complex operations to be handled by the framework.
The framework facilitates easier page management and switching for developers, thereby enhancing development efficiency and user experience. Developers need only focus on the business logic and interaction effects of the page, without excessive concern for the underlying implementation details.
Basic components
The framework offers a set of fundamental components, each equipped with TMF styles and unique logic. Developers can create powerful TMF mini programs by combining these basic components.
Abundant API
The framework offers a wealth of native APIs for the host app, conveniently invoking the capabilities provided by the host app, such as user information retrieval, local storage, payment functions, and more.
Yes
No
Was this page helpful?