MiniApp code structure
# 1. JSON configuration
JSON is a data format, not a programming language, and in MiniApps, JSON plays the role of static configuration.
# 1.1 Mini App Configuration app.json
app.json is the global configuration of the current Mini App, including all the page paths, interface performance, network timeout period, bottom tab, etc. of the Mini App.
Let's briefly explain the meaning of each item of this configuration:
pages field
Used to describe all page paths of the current MiniApp, so that the host client knows which directory your MiniApp page is currently defined in.
window field
Define the top background color, text color definition, etc. of all pages of the Mini App.
# The 1.2 page configures page.json
The page.json here is actually used to represent logs.json in the pages/logs directory and the configuration related to Mini App pages.
If your entire Mini App's style is blue, you can declare the top color in app.json that the top color is blue. This may not be the case, each page in your Mini App may have a different hue to distinguish between different functional modules, so we provide page.json, so developers can independently define some properties of each page, such as the top color just said, whether to allow pull-down refresh, and so on.
# 1.3 JSON syntax
Here are some considerations for JSON configuration in Mini Apps.
JSON files are wrapped in a curly brace {}, expressing the data in a key-value manner. The key of the JSON must be wrapped in a double quotation mark, and in practice, when writing JSON, it is common to forget to add double quotation marks to the key value or write the double quotation marks as single quotation marks.
prompt
The value of JSON can only be in the following data formats, and any other format will trigger an error report, such as undefined in JavaScript.
- Numbers, including floating-point numbers and integers
- String, need to be wrapped in double quotation marks
- Bool value, true or false
- Array, need to be wrapped in square brackets []
- Object, need to be wrapped in curly braces {}
- Nul
It is also important to note that comments cannot be used in JSON files, and attempting to add comments will result in an error.
# 2. FXML templates
FXML is a set of tag languages designed by the framework, which combines basic components and event systems to build the structure of the page.
# 3. FTSS style
FTSS has most of the features of CSS, and Mini Apps have also made some extensions and modifications in FTSS.
New dimension units have been added. When writing CSS styles, developers need to take into account that the screen of the mobile device will have different widths and device pixel ratios, and use some techniques to convert some pixel units. FTSS supports a new size unit rpx at the bottom level, developers can avoid the trouble of conversion, as long as it is handed over to the bottom layer of the Mini App to convert, because the conversion uses floating-point number operations, so the operation result will be a little different from the expected result.
Global and local styles are provided. Similar to the previous app.json, page.json concept, you can write an app. FTSS as a global style, will act on all pages of the current MiniApp, local page style page. FTSS takes effect only for the current page.
In addition, FTSS only supports some CSS selectors, and more detailed documentation can be found in FTSS.
# 4. JS logical interaction
It is not enough for a service to only display the interface, but also to interact with the user: respond to the user's click, get the user's location, and so on. In the Mini App, we handle the user's operation by writing a JS script file.
When clicking the button button, we want to display the msg on the interface as "Hello World", so we declare a property on the button: bindtap, and declare the clickMe method in the JS file in response to this click: