Interface
# Interaction
# showToast
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
showToast(Object object)
A message prompt box is displayed.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| title | string | Yes | The content of the prompt | |
| icon | string | 'success' | No | icon |
| image | string | No | Customize the local path of the icon, and the image takes precedence over the icon | |
| duration | number | 1500 | No | The length of display of the prompt is |
| mask | boolean | false | No | Whether the transparent mask |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
object.icon's legal value
| The value | Description |
|---|---|
| success | Displays a success icon, at which point the title text displays up to two lines of |
| loading | Displays the load icon, where the title text displays up to two lines of |
| error | Displays a failure icon, where the title text displays up to two lines of |
| none | Without the icon, the title text can display up to two lines of |
Sample Code
note
- 'ft.showLoading' and 'ft.showToast' can only be displayed at one time
- 'ft.showToast' should be paired with 'ft.hideToast'
# showModal
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
showModal(Object object)
Displays the Modal dialog box
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| title | string | No | The title of the tip is | |
| content | string | No | The content of the prompt | |
| showCancel | boolean | true | No | Whether to display the Cancel button |
| cancelText | string | 'Cancel' | No | The text of the cancel button |
| cancelColor | string | Light Theme #191919; Dark Theme #A5A5A5 | No | The text color of the cancel button must be a hexadecimal color string |
| confirmText | string | 'OK' | No | The text of the confirmation button |
| confirmColor | string | Light Theme #409EFF; Dark Theme #368CE4 | No | Confirm that the text color of the button must be the hexadecimal color string |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
object.success callback function
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| confirm | boolean | true indicates that the user clicked the OK button |
| cancel | boolean | True indicates that the user clicked cancel (used by the Android system to distinguish between clicking the mask to close or clicking the cancel button to close) |
Sample Code
# showLoading
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
showLoading(Object object)
Displays a loading prompt box. You need to actively call ft.hideLoading to close the prompt box.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| title | string | Yes | The content of the prompt | |
| mask | boolean | false | No | Whether the transparent mask |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample Code
note
- 'ft.showLoading' and 'ft.showToast' can only be displayed at one time
- 'ft.showLoading' should be paired with 'ft.hideLoading'
# showActionSheet
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
showActionSheet(Object object)
The actions menu is displayed
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| itemList | Array.<string> | Yes | A literal array of buttons with a maximum length of 6 | |
| itemColor | string | #000000 | No | The text color of the button is |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
object.success callback function
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| tapIndex | number | The buttons clicked by the user are sequenced from top to bottom, starting from 0 |
Sample code
# hideToast
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
hideToast(Object object)
Hides the message prompt box.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# hideLoading
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
hideLoading(Object object)
Hides the loading prompt box.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# enableAlertBeforeUnload
Base Library 2.11.5 is supported, iOS version 2.35.1, Android version 2.35.1
enableAlertBeforeUnload(Object object)
Open the MiniApp page to return to the ask dialog box
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| message | string | Yes | The interface calls the callback function successfully | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# disableAlertBeforeUnload
Base Library 2.11.5 is supported, iOS version 2.35.1, Android version 2.35.1
disableAlertBeforeUnload(Object object)
Close the MiniApp page to return to the Ask dialog box
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# Navigation bar
# showNavigationBarLoading
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
showNavigationBarLoading(Object object)
Displays the navigation bar loading animation on the current page.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# setNavigationBarTitle
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
setNavigationBarTitle(Object object)
Dynamically sets the title of the current page.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| title | string | Yes | Page title | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample code
# setNavigationBarColor
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
setNavigationBarColor(Object object)
Sets the page navigation bar color.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| frontColor | string | Yes | Foreground color values, including buttons, titles, and status bar colors, support only #ffffff and #000000 | |
| backgroundColor | string | Yes | Background color value, valid for hexadecimal color | |
| animation | Object | No | Animation effects | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Structure of object.animation
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| duration | number | 0 | No | Animation change time, in ms |
| timingFunc | string | 'linear' | No | Animation variation mode |
Legal value of object.animation.timingFunc
| The value | Description |
|---|---|
| 'linear' | The speed of the animation from start to finish is the same |
| 'easeIn' | The animation starts at a low speed |
| 'easeOut' | The animation ends at a low speed |
| 'easeInOut' | The animation starts and ends at a low speed |
Sample Code
# hideNavigationBarLoading
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
hideNavigationBarLoading(Object object)
Hides the navigation bar load animation on the current page.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# Background
# setBackgroundTextStyle
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
ft.setBackgroundTextStyle(Object object)
Dynamically set the style of the drop-down background font and loading diagram
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| textStyle | string | Yes | Drop down background font, loading chart style. | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Legal value for object.textStyle
| The value | Description |
|---|---|
| dark | Dark style |
| light | Light style |
Sample Code
# setBackgroundColor
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
ft.setBackgroundColor(Object object)
Dynamically sets the background color of the window
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| backgroundColor | string | No | The background color of the window, which must be a hexadecimal color value of | |
| backgroundColorTop | string | No | The background color of the top window, which must be a hexadecimal color value, only iOS supports | |
| backgroundColorBottom | string | No | The background color of the bottom window, which must be a hexadecimal color value, is supported only by iOS | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample Code
# Tab Bar
# showTabBarRedDot
ft.showTabBarRedDot(Object object)
Displays the red dot in the upper-right corner of a tabBar item
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| index | number | Yes | Which item of the tabBar, counting from the left | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# showTabBar
ft.showTabBar(Object object)
Displays the tabBar
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| animation | boolean | false | No | Whether animation effects are required |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# setTabBarStyle
ft.setTabBarStyle(Object object)
Dynamically style the tabBar as a whole
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| color | string | No | The default color of text on tab, HexColor | |
| selectedColor | string | No | The color of the text on the tab when selected, HexColor | |
| backgroundColor | string | No | Tab background color, HexColor | |
| borderStyle | string | No | The color of the tabBar upper border, which only supports black/white | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample Code
# setTabBarItem
ft.setTabBarItem(Object object)
Dynamically set the content of a tabBar item, and the image from '2.7.0' supports temporary files and network files.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| index | number | Yes | Which item of the tabBar, counting from the left | |
| text | string | No | The button text on tab | |
| iconPath | string | No | Image path, icon size is limited to 40kb, recommended size is 81px * 81px, when postion is top, this parameter is invalid | |
| selectedIconPath | string | No | When the image path is selected, the icon size is limited to 40kb, the recommended size is 81px * 81px, and when the postion is top, this parameter is invalid | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample Code
# setTabBarBadge
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
Add text to the upper-right corner of an item in tabBar
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| index | number | No | Which item of the tabBar, counting from the left | |
| text | string | No | Displays text that appears longer than 4 characters as ... | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample Code
# removeTabBarBadge
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
Removes the text in the upper-right corner of a tabBar item
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| index | number | No | Which item of the tabBar, counting from the left | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# hideTabBarRedDot
ft.hideTabBarRedDot(Object object)
Hides the red dot in the upper-right corner of a tabBar item
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| index | number | Yes | Which item of the tabBar, counting from the left | |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# hideTabBar
ft.hideTabBar(Object object)
Hide tabBar
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| animation | boolean | false | No | Whether animation effects are required |
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
# Fonts
# loadFontFace
ft.loadFontFace(Object object)
Dynamically load network fonts, and the file address must be the download type. '2.10.0' supports global effect and needs to be called in 'app.js'.
Note:
- The font file returns a contet-type reference [font (opens new window)] (https://www.iana.org/assignments/media-types/media-types.xhtml #font), which fails parsing if it is malformed.
- Font links must be https (ios does not support http)
- Font links must have cors support enabled *
- Faild to load font can be ignored in the tool
Parameters
Object object
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| global | boolean | false | No | Whether the | is in effect globally 2.10.0 |
| family | string | Yes | Defines the font name | ||
| source | string | Yes | The address of the font resource. The recommended formats are TTF and WOFF, and WOFF2 is not compatible on earlier versions of iOS. | ||
| desc | Object | No | The optional font descriptor | ||
| scopes | Array | No | Font scope, optional value for webview /native, default webview, set native to use | in Canvas 2D | |
| success | function | No | The interface calls the callback function successfully | ||
| fail | function | No | The callback function that failed the interface callback function | ||
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Structure of object.desc
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| style | string | 'normal' | No | Font style, optional as normal / italic / oblique |
| weight | string | 'normal' | No | Font weight, optional value is normal / bold / 100 / 200../ 900 |
| variant | string | 'normal' | No | Sets the font for small capital letters to display text, with an optional value of normal / small-caps / inherit |
object.success callback function
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| status | string | Load font result |
object.fail callback function
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| status | string | Load font result |
object.complete callback function
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| status | string | Load font result |
Sample Code
# Pull-down refresh
# startPullDownRefresh
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
startPullDownRefresh(Object object)
Start a pull-down refresh. After the call, the pull-down refresh animation is triggered, and the effect is consistent with the user's manual pull-down refresh.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample Code
# stopPullDownRefresh
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
stopPullDownRefresh(Object object)
Stops the current page drop-down refresh.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| success | function | No | The interface calls the callback function successfully | |
| fail | function | No | The callback function that failed the interface callback function | |
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
Sample Code
# Scroll
# pageScrollTo
ft.pageScrollTo(Object object)
Scrolling the page to the target position, supports two ways to position the selector and scroll distance
Parameters
Object object
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| scrollTop | number | No | Scroll to the target position of the page, | in px | |
| duration | number | 300 | No | The length of the scroll animation, in ms | |
| selector | string | No | Selector | 2.7.3 | |
| success | function | No | The interface calls the callback function successfully | ||
| fail | function | No | The callback function that failed the interface callback function | ||
| complete | function | No | The callback function at the end of the interface call (the call succeeds or fails) |
selector syntax
Selector is similar to CSS selectors, but only the following syntax is supported.
- ID Selector: #the-id
- Class selector (multiple can be specified consecutively): .a-class.another-class
- Child element selector: .the-parent > .the-child
- Descendant selector: .the-ancestor .the-descendant
- Descendant selector across custom components: .the-ancestor >>> .the-descendant
- Union of multiple selectors: #a-node, .some-other-nodes
Sample Code
# Animation
# createAnimation
Animation ft.createAnimation(Object object)
Create an animation instance animation. Call the instance's method to describe the animation. Finally, the animation property passed to the component is exported by the export method of the animation instance.
Parameters
Object object
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| duration | number | 400 | No | Animation duration, in ms |
| timingFunction | string | 'linear' | No | The effect of the animation is |
| delay | number | 0 | No | Animation delay time, in ms |
| transformOrigin | string | '50% 50% 0' | No |
The legal value of timingFunction
| The value | Description | Minimum version |
|---|---|---|
| 'linear' | The speed of the animation from start to finish is the same | |
| 'ease' | The animation starts at a low speed, then speeds up, slowing down before ending | |
| 'ease-in' | The animation starts at a low speed | |
| 'ease-in-out' | The animation starts and ends at a low speed | |
| 'ease-out' | The animation ends at a low speed | |
| 'step-start' | The first frame of the animation jumps to the end state until the end | |
| 'step-end' | The animation remains in the start state, and the last frame jumps to the end state |
Return Value
Animation
# Animation
Animate the object
Method
- Array.<Object> Animation.export()
Export the animation queue. The export method clears out the previous animation operation after each call. - Animation Animation.step(Object object)
Represents a set of animations complete. You can call any number of animation methods in a set of animations, and all animations in a group of animations start at the same time, and the next set of animations does not progress until one set of animations completes. - Animation Animation.matrix()
Same as transform-function matrix - Animation Animation.matrix3d()
Same as transform-function matrix3d - Animation Animation.rotate(number angle)
Rotate an angle clockwise from the origin - Animation Animation.rotate3d(number x, number y, number z, number angle)
Rotate from the fixed axis clockwise at an angle - Animation Animation.rotateX(number angle)
Rotate an angle clockwise from the X axis - Animation Animation.rotateY(number angle)
Rotates an angle clockwise from the Y axis - Animation Animation.rotateZ(number angle)
Rotate an angle clockwise from the Z axis - Animation Animation.scale(number sx, number sy)
zoom - Animation Animation.scale3d(number sx, number sy, number sz)
zoom - Animation Animation.scaleX(number scale)
Scale the X axis - Animation Animation.scaleY(number scale)
Scale the Y axis - Animation Animation.scaleZ(number scale)
Scale the Z axis - Animation Animation.skew(number ax, number ay)
Tilts the X and Y coordinates - Animation Animation.skewX(number angle)
Tilts the X-axis coordinates - Animation Animation.skewY(number angle)
Tilts the Y coordinates - Animation Animation.translate(number tx, number ty)
Translate the transform - Animation Animation.translate3d(number tx, number ty, number tz)
Translates xyz coordinates - Animation Animation.translateX(number translation)
Pan to the X axis - Animation Animation.translateY(number translation)
Translate to the Y axis - Animation Animation.translateZ(number translation)
Translate to the Z axis - Animation Animation.opacity(number value)
Set the transparency - Animation Animation.backgroundColor(string value)
Sets the background color - Animation Animation.width(number|string value)
Set the width - Animation Animation.height(number|string value)
Set the height - Animation Animation.left(number|string value)
Sets the left value - Animation Animation.right(number|string value)
Set the right value - Animation Animation.top(number|string value)
Set the top value - Animation Animation.bottom(number|string value)
Sets the bottom value
# Custom components
# nextTick
ft.nextTick(function callback)
Delay a portion of the operation until the next time slice before execution. (similar to setTimeout)
Parameters
function callback
Description
Because interfaces such as setData and triggerEvent in custom components are themselves synchronous operations, when these interfaces are called consecutively, they are executed in a synchronous process, so improper logic can lead to errors.
An extreme case: when the parent component's setData triggerEvents the child component, which causes the parent component to set The data again, during which the child component is unloaded by the ft:if statement, it is possible to cause strange errors, so for logic that does not need to be completed in a synchronous process, this interface can be used to delay execution until the next time slice.
Sample Code
# Menu
Base Library 1.3.9 is supported, iOS version 2.1.23, Android version 2.1.38
Gets the layout position information for the menu button (capsule button in the upper-right corner). The coordinate information is based on the upper-left corner of the screen.
| Properties | Type | Description |
|---|---|---|
| width | number | Width, in px |
| height | number | Height, in px |
| top | number | Upper boundary coordinates, in px |
| right | number | Right boundary coordinates, in px |
| bottom | number | Lower bound coordinates, in px |
| left | number | Left boundary coordinates, in px |