Components

View Containers#

View#

Property	Type	Default Value	Description
hoverClass	String	`none`	The style class the view that is tapped. When `hoverClass="none"`, the tap state is not displayed.
hoverStopPropagation	Boolean	`false`	Specifies whether to block the tapped state from the ancestor node of this node.
hoverStartTime	Number	`50`	Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTime	Number	`400`	Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
onClick	Event handler		A click event triggered.
onLongPress	Event handler		The finger leaves the screen after it taps and holds on the screen for more than 350 ms. If an event callback function is specified and this event is triggered, the click event is not triggered.

CoverView#

Text view above native components.

Only cover-view and cover-image can be nested.

CoverImage#

Image view above native components. Native components that can be covered are the same as those in cover-view. It can be nested into cover-view.

Property	Type	Description
src	String	The path of the icon. Temporary paths and network addresses are supported. Base64 encoded strings are not supported.
onLoad	Event handler	Triggered when an image is loaded, event.detail = {height, width}
onError	Event handler	Triggered when image loading failed, event.detail = {errMsg}

ScrollView#

Property	Type	Default Value	Required	Description
scrollX	Boolean	`false`	No	Supports horizontal scrolling.
scrollY	Boolean	`false`	No	Supports vertical scrolling.
scrollTop	Number, String		No	Specifies the location of the vertical scroll bar.
scrollLeft	Number, String		No	Specifies the location of the horizontal scroll bar.
scrollIntoView	String		No	Specifies the direction to which the scroll bar can be moved. Its value should be the ID of a child element (the ID cannot begin with a number), and this child element is scrolled in the direction specified in this property.
onScrollToUpper	Event handler		No	Triggered when the scroll bar is moved to the top or left side. `event.detail = { direction }`
onScrollToLower	Event handler		No	Triggered when the scroll bar is moved to the bottom or right side. `event.detail = { direction }`
onScroll	Event handler		No	Triggered when the scroll bar is moving. `event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}`
upperThreshold	Number, String	`50`	No	Specifies the distance from the top/left of the page when a scrolltoupper event is triggered.
lowerThreshold	Number, String	`50`	No	Specifies the distance from the bottom/right of the page when a scrolltoupper event is triggered.
fastDeceleration	`boolean`	false		use fast rate of deceleration after the user lifts their finger. (only work with `enhanced: true` and only work on iOS)
enhanced	`boolean`	false		enhance scrollView to use ScrollViewContext

Tip#

The TextArea component is not supported in ScrollView.

Swiper#

Swiper view container. Which can only be placed swiper-item Component, otherwise it results in undefined behavior.（Version > 3.0.0）

Property	Type	Default Value	Required	Description
scrollX	Boolean	`false`	No	Supports horizontal scrolling.
indicatorDots	boolean	`false`	no	Whether to display panel pointer
indicatorColor	color	`rgba(0, 0, 0, .3)`	no	Indicating point color
indicatorActiveColor	color	`#000000`	no	Currently selected pointer color
autoplay	boolean	`false`	no	Whether to switch automatically
current	number	0	no	The current slider index
interval	number	5000	no	Automatic switching time interval
duration	number	500	no	Slide animation length
circular	boolean	`false`	no	Whether or not to use the slip
vertical	boolean	`false`	no	Is the sliding direction longitudinal?
displayMultipleItems	number	1	no	Number of sliders displayed simultaneously
easingFunction	string	`"default"`	no	Designation swiper Toggle Slow Animation Type
bindchange	eventhandle		no	current When it changes, it triggers change Event, event.detail = {current, source}
bindtransition	eventhandle		no	swiper-item Is triggered when the location of transition Event, event.detail = {dx: dx, Two: two}
bindanimationfinish	eventhandle		no	Triggers at the end of the animation animationfinish Event, event.detail Ditto

easingFunction Legal value#

value	Introductions
default	Default retarding function
linear	Linear animation
easeInCubic	Slow Down Animation
easeOutCubic	Slow Out Animation
easeInOutCubic	Slow in and slow out animation

`change` event `source` Return value#

ChangeIncreased incidents sourceField that represents the cause of the change, with possible values as follows

autoplay AutoPlay causes swiper changes
touch Swiper changes caused by user stroke
Other reasons will be expressed as empty strings.

Bug & Tip#

tip: If in bindchange In the event callback function of setData change current Value, it is possible to cause setData Is constantly called, so usually please change current Prevalue detection source Field to determine if it was caused by user touch.

Basic Components#

Icon#

Property	Type	Default Value	Required	Description
type	String		Yes	The type of the icon.
size	String	`1em`		The size of the icon
color	String			The color of the icon. It is the same as the color of the css.

type Type =  | 'circle'  | 'download'  | 'info'  | 'safe-success'  | 'safe-warn'  | 'success'  | 'success-circle'  | 'success-no-circle'  | 'waiting'  | 'waiting-circle'  | 'warn'  | 'info-circle'  | 'cancel'  | 'search'  | 'clear'  | 'back'  | 'delete'  | 'success-no-circle-thin'  | 'arrow'  | 'arrow-bold'  | 'back-arrow'  | 'back-arrow-thin'  | 'close'  | 'close-thin'  | 'back-circle'

BMP use base64 (background-image: url(data:image/svg+xml,..);) internally.

RichText#

Property	Type	Default Value	Required	Description
nodes	Array, String	`[]`		The node list/HTML string.
space	String			Displays consecutive spaces.

nodes#

Currently, two nodes are supported, which are distinguished according to the type: element node and text node. It is the element node by default. HTML nodes are displayed in the rich text area.

Element node: `type = node`#

Property	Description	Type	Required	Remarks
name	Tag name	String	Yes	Supports some trusted HTML nodes.
attrs	Property	Object		Supports some trusted properties. The name complies with the Pascal naming convention.
children	Child node list	Array		The structure of child nodes is the same as that of nodes.

Text node: `type = text`#

Property	Description	Type	Required	Remarks
text	Text	String	Yes	Supports entities.

Trusted HTML Nodes and Properties#

The class and style(rpx is supported) properties are supported globally. The id property is not supported.

Node	Property
a
abbr
address
article
aside
b
bdi
bdo	dir
big
blockquote
br
caption
center
cite
code
col	span, and width
colgroup	span, and width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img	alt, src, height, and width
ins
label
legend
li
mark
nav
ol	start and type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
table	width
tbody
td	colspan, height, rowspan, and width
tfoot
th	colspan, height, rowspan, and width
thead
tr	colspan, height, rowspan, and width
tt
u
ul

Bug & Tip#

tip: String is not recommended for nodes, because the performance may deteriorate.
tip: The rich-text component blocks events of all nodes.
tip: The attrs property does not support the id property, but supports the class property.
tip: The name property is case-insensitive.
tip: If an untrusted HTML node is used, this node and all of its child nodes will be removed.
tip: The img tag supports network images only.

Text#

Property	Type	Default Value	Required	Description
userSelect	Boolean	`false`		Specifies whether the text is selectable.

Form Components#

Button#

Property	Type	Default Value	Description
size	String	`default`	The size of the button.
type	String	`default`	The style class of the button.
plain	Boolean	`false`	Specifies whether the button is hollow with transparent background.
disabled	Boolean	`false`	Specifies whether to disable the component.
loading	Boolean	`false`	Specifies whether a loading icon exists before the name.
hoverClass	String	`button-hover`	The style class the button that is tapped. When `hoverClass="none"`, the tap state is not displayed.
hoverStopPropagation	Boolean	`false`	Specifies whether to block the tapped state from the ancestor node of this node.
hoverStartTime	Number	`20`	Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTime	Number	`70`	Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
formType	String		Used in the form component. When it is tapped, the submit and reset events of the form component are separately triggered.
openType	String		Binance open ability
onOpenSetting	eventhandle		Callback after opening the authorization settings page, openType = openSetting language
onGetUserProfile	eventhandle		Gets the user's information callback, valid when openType = getUserProfile

Valid values of `size`#

Value	Description
`default`	Default size.
`mini`	Minimum size.

Valid values of `formType`#

Value	Description
`submit`	Submits the form.
`reset`	Resets the form.

Valid values of `openType`#

Value	Description
`getUserProfile`	Get user information. Which you can get from the onGetUserProfile callback.
`openSetting`	Open Authorization Settings Page. You can get Settings from the onOpenSetting callback.
`share`	Trigger the user to share.

Checkbox#

Property	Type	Default Value	Description
value	String		The ID of the checkbox component. When it is selected, a checkbox-group change event is triggered, carrying the value of checkbox.
disabled	Boolean	`false`	Specifies whether to disable the component.
checked	Boolean	`false`	Specifies whether to select the checkbox by default.
Color	String	`#F0B90B`	The color of the checkbox. It is the same as the color of the css.

CheckboxGroup#

Property	Type	Default Value	Required	Description
onChange	Event handler			A change event triggered when selected options in checkbox-group change. `detail = {value: value \\| value[]}`

Form#

Property	Type	Default Value	Required	Description
onSubmit	Event handler			Triggers a submit event that carries the form data. `event.detail = {value : {'name': 'value'}}`
onReset	Event handler			Triggers a reset event when the form is reset.

Input#

Property	Type	Default Value	Description
value	String, Number		The initial content in the input box.
type	String	`text`	The type of input.
password	Boolean	`false`	Specifies whether the input is password-type content.
placeholder	String		The placeholder used when the input box is empty.
placeholderStyle	String		Specifies the style of the placeholder.
placeholderClass	String	`input-placeholder`	Specifies the style class of the placeholder.
disabled	Boolean	`false`	Specifies whether to disable the component.
maxlength	Number	`140`	The maximum length. When it is set to `-1`, the maximum length is not limited.
cursorSpacing	Number	`0`	Specifies the distance between the cursor and the keyboard. It is either the distance between the input box and the bottom of the screen or the distance specified via `cursorSpacing`, whichever is smaller..
autoFocus	Boolean	`false`	(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focus	Boolean	`false`	Gets focus.
confirmType	String	`done`	Sets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHold	Boolean	`false`	Specifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped.
cursor	Number		Specifies the cursor position during focusing.
selectionStart	Number	`-1`	The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEnd	Number	`-1`	The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPosition	Boolean	`true`	Specifies whether to automatically push up the page when the keyboard is displayed.
holdKeyboard	Boolean	`false`	Specifies whether to hide the keyboard when clicking page while the input is focused.
onInput	Event handler		Triggered when the user taps the keyboard. `event.detail = { value, cursor, keyCode }`, where keyCode is the key value.box.
onFocus	Event handler		Triggered when the input box is focused. `event.detail = { value, height }`, where height is the height of the keyboard.
onBlur	Event handler		Triggered when the input box is unfocused. `event.detail = { value }`.
onConfirm	Event handler		Triggered when the Done button is tapped. `event.detail = { value }`.
onKeyboardHeightChange	Event handler		Triggered when the height of the keyboard changes. `event.detail = { height, duration}`.
autoFill	String		'username', 'password', 'newPassword', 'oneTime2FA', 'oneTimeEmail', 'oneTimeSMS', 'none'

Valid values of `type`#

Value	Description
`text`	Keyboard for text input.
`number`	Keyboard for number input.
`digit`	Numeric keypad with decimal point.

Valid values of `confirm-type`#

Value	Description
`send`	Indicates that the button in the lower right corner is Send.
`search`	Indicates that the button in the lower right corner is Search.
`next`	Indicates that the button in the lower right corner is Next.
`go`	Indicates that the button in the lower right corner is GO.
`done`	Indicates that the button in the lower right corner is Done.

open-type Legal value#

Value	Description
`share`	Trigger the user to share.

Textarea#

Property	Type	Default Value	Description
value	String		The initial content in the input box.
placeholder	String		The placeholder used when the input box is empty.
placeholderStyle	String		Specifies the style of the placeholder. Only color, font-size, and font-weight styles are supported.
placeholderClass	String	`textarea-placeholder`	Specifies the style class of the placeholder.
disabled	Boolean	`false`	Specifies whether to disable the component.
maxlength	Number	`140`	The maximum length. When it is set to `-1`, the maximum length is not limited.
autoFocus	Boolean	`false`	(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focus	Boolean	`false`	Gets focus.
autoHeight	Boolean	`false`	Specifies whether the height automatically increases. If this property is specified, style.height does not take effect.
fixed	Boolean	`false`	If the textarea is in an area of `position:fixed`, the value of the specified property should always be true.
cursorSpacing	Number	`0`	Specifies the distance between the cursor and the keyboard. It is either the distance between `textarea` and the bottom of the screen or the distance specified via `cursorSpacing`, whichever is smaller.
cursor	Number	`-1`	Specifies the cursor position during focusing.
showConfirmBar	Boolean	`true`	Specifies whether to display the bar containing the `Done` button above the keyboard.
selectionStart	Number	`-1`	The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEnd	Number	`-1`	The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPosition	Boolean	`true`	Specifies whether to automatically push up the page when the keyboard is displayed.
holdKeyboard	Boolean	`false`	Specifies whether to hide the keyboard when clicking page while the input is focused.
disableDefaultPadding	Boolean	`false`	Specifies whether to remove the default padding behavior on iOS.
confirmType	String	`return`	Sets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHold	Boolean	`false`	Specifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped.
onInput	Event handler		Triggered when the user taps the keyboard. `event.detail = { value, cursor, keyCode }`, where keyCode is the key value.box.
onFocus	Event handler		Triggered when the input box is focused. `event.detail = { value, height }`
onBlur	Event handler		Triggered when the input box is unfocused. `event.detail = { value, cursor }`.
onLineChange	Event handler		Called when the number of lines in the input box changes. `event.detail = { height: number, heightRpx: number, lineCount: number }`
onConfirm	Event handler		Triggered when the Done button is tapped. `event.detail = { value }`.
onKeyboardHeightChange	Event handler		Triggered when the height of the keyboard changes. `event.detail = { height, duration}`.

Valid values of `confirm-type`#

Value	Description
`send`	Indicates that the button in the lower right corner is Send.
`search`	Indicates that the button in the lower right corner is Search.
`next`	Indicates that the button in the lower right corner is Next.
`go`	Indicates that the button in the lower right corner is GO.
`done`	Indicates that the button in the lower right corner is Done.
`return`	Indicates that the button in the lower right corner is Return.

Label#

Property	Type	Default Value	Required	Description
for	String			The ID of the bound control.

Picker#

Property	Type	Default Value	Description
mode	String	`selector`	The type of the picker.
disabled	Boolean	`false`	Specifies whether to disable the component.
onCancel	Event handler		Triggered when selection is canceled.

Valid values of `mode`#

Value	Description
`selector`	Common picker.
`multiSelector`	Multi-column picker.
`time`	Time picker.
`date`	Date picker.

In addition to the preceding general properties, picker has different properties specific to different modes.

Common picker: mode = selector#

Property	Type	Default Value	Description
range	Array	`[]`	Valid when the mode is selector or multiSelector.
range-key	string		Specifies the key value of the object as the content to be displayed on the picker when range is an object array.
value	Number	`0`	Indicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChange	Event handler		A change event is triggered when value is changed. `event.detail = {value}`.

Common picker: mode = multiSelector#

Property	Type	Default Value	Description
range	Array/object array	`[]`	Valid when the mode is selector or multiSelector.
range-key	string		Specifies the key value of the object as the content to be displayed on the picker when range is an object array.
value	Number	`[]`	Indicates the sequence number (starting from 0 in the subscript) of the item selected in range.
onChange	Event handler		A change event is triggered when value is changed. `event.detail = {value}`.
onColumnChange	Event handler		Triggered when the column changes. `event.detail = {value, column}`.

Time picker: mode = time#

Property	Type	Description
value	String	The selected time, in the form of "hh:mm".
start	String	The start of the valid time range, in the form of "hh:mm".
end	String	The end of the valid time range, in the form of "hh:mm".
onChange	Event handler	A change event triggered when the value is changed. `event.detail = {value}`.

Date picker: mode = date#

Property	Type	Default Value	Description
value	String	today	The selected date, in the form of "YYYY-MM-DD".
start	String		TThe start of the valid date range, in the form of "YYYY-MM-DD".
end	String		The end of the valid date range, in the form of "YYYY-MM-DD".
fields	String	`day`	The granularity of the picker. Valid values include "year", "month", and "day".
onChange	Event handler		AA change event triggered when the value is changed. `event.detail = {value}`.

Valid values of `fields`#

Value	Description
`year`	The granularity of the picker is year.
`month`	The granularity of the picker is month.
`day`	The granularity of the picker is day.

Radio#

Property	Type	Default Value	Description
value	String		The ID of the radio component. When it is selected, a radio-group change event is triggered, carrying the value of radio.
disabled	Boolean	`false`	Specifies whether to disable the component.
checked	Boolean	`false`	Specifies whether to select the radio by default.
Color	String	`#F0B90B`	The color of the radio. It is the same as the color of the css.

RadioGroup#

Property	Type	Default Value	Required	Description
onChange	Event handler			A change event triggered when selected options in radio-group change. `detail = {value}`

Slider#

Property	Type	Default Value	Description
min	Number	`0`	The minimum value.
max	Number	`100`	The maximum value.
step	Number	`1`	The step. Its value must be greater than 0, and can be exactly divided by (max – min).
disabled	Boolean	`false`	Specifies whether to disable the component.
value	Number		The current value.
showValue	Boolean	`false`	Specifies whether to display the current value.
activeColor	String	`#F0B90B`	The selected color.
backgroundColor	String	`#e9e9e9`	The color of the background bar.
onChange	Event handler		The event triggered after the swiper is dragged. `event.detail = {value}`.
onChanging	Event handler		The event triggered during dragging of the swiper. `event.detail = {value}`.

Switch#

Property	Type	Default Value	Description
checked	Boolean	`false`	Specifies whether the item is selected.
disabled	Boolean	`false`	Specifies whether to disable the component.
Color	String	`#F0B90B`	The color of the switch component. It is the same as the color of the css component.
onChange	Event handler		A change event triggered when checked changes. `event.detail = {value}`.

Navigators#

Navigator#

Property	Type	Default Value	Description
target	String	`self`	Specifies the target to be redirected from. It is the current Mini Program by default.
url	String		The redirection link in the current Mini Program.
appId	String		The appId of the Mini Program to be opened. It is valid when target="miniProgram".
path	String		The path of the page to be opened. It is valid when target="miniProgram". If the value is empty, the homepage is opened.
extraData	object		The data to be passed to the target Mini Program. It is valid when target="miniProgram". The target Mini Program can obtain this data from App.onLaunch() and App.onShow().
version	'preview', 'experience', 'published'	`published`	The `channel` of the Mini Program to be opened. It is valid when target="miniProgram".
type	'app', 'web', 'webview'	`app`	The type of the Mini Program to be opened. It is valid when target="miniProgram".
rev	String		The rev of the Mini Program to be opened. It is valid when target="miniProgram".
onSuccess	Event handler		The callback function for a successful API call.
onFail	Event		The callback function for a failed API call.
onComplete	Event		The callback function used when the API call completed (always executed whether the call succeeds or fails).

BMP use mpService.navigateTo(url) internally.

Valid values of `target`#

Value	Description
`self`	Current Mini Program.
`miniProgram`	Other Mini Programs.

Usage of target='miniProgram'#

<Navigator  appId={}  path={}  extraData={}  version={}  type={}  rev={}  target="miniProgram"  onSuccess={}  onFail={}  onComplete={}>  Link</Navigator>

Media Components#

Image#

Property	Type	Default Value	Required	Description
src	String		Yes	The image resource address.
lazy-load	Boolean	`false`	No	Picture lazy loading, in about to enter a certain range (up and down three screens) before starting to load.
mode	String	`scaleToFill`	No	Image Cropping, Zooming Mode.
onLoad	Event handler		No	Triggered when the image is loaded, event. detail = {height, width}
onError	Event handler		No	Triggered when an error occurs, event. detail = {errMsg}

Tip#

It is recommended to use numeric values for width and height instead of auto or *%.
Before version 4.0.0, if the mode attribute is used and the value is not scaleToFill, it will be rendered with background-image; otherwise, it will be rendered with the <img /> tag.
If the value of src is a http resource, BMP will use mpService.downloadFile(src) to download image.
The image reuqests from <Image /> will have header: Referer: https://servicesbinance.com/${mp-app-id}/${mp-app-version}

mode Legal value#

value	Introductions
`scaleToFill`	Zoom mode, which scales the image without maintaining the aspect ratio, so that the width and height of the image are completely stretched to fill the image element.
`aspectFit`	Zoom mode, which maintains the aspect ratio and zooms the image so that the long side of the image is fully displayed. That is, the picture can be displayed completely.
`aspectFill`	Zoom mode, which maintains the aspect ratio and zooms the image, only ensuring that the short side of the image can be fully displayed. That is, the picture is usually only complete in the horizontal or vertical direction, the other direction will be cropped.
`widthFix`	Zoom mode, the width remains unchanged, the height changes automatically, and the aspect ratio of the original image remains unchanged
`heightFix`	Zoom mode, the height does not change, the width changes automatically, and the aspect ratio of the original image remains unchanged
`top`	Crop mode, do not scale the picture, only show the top area of the picture
`bottom`	Crop mode, do not zoom the picture, only show the bottom area of the picture
`center`	Crop mode, do not zoom the picture, only show the middle area of the picture
`left`	Crop mode, do not zoom the picture, only display the left area of the picture
`right`	Crop mode, do not zoom the picture, only display the right area of the picture
`top left`	Crop mode, do not zoom the picture, only display the upper left area of the picture
`top right`	Crop mode, do not zoom the picture, only display the upper right area of the picture
`bottom left`	Crop mode, do not zoom the picture, only display the lower left area of the picture
`bottom right`	Crop mode, do not zoom the picture, only display the lower right area of the picture

Video#

Property	Type	Default Value	Required	Description
src	String		Yes	The address of the video to be played.
controls	Boolean	`true`	No	Specifies whether to display default playback controls (Play/Pause buttons, playback progress, and timeline).
autoplay	Boolean	`false`	No	Specifies whether to enable auto playback.
loop	Boolean	`false`	No	Specifies whether to enable loop playback.
muted	Boolean	`false`	No	Specifies whether to enable muted playback.

Canvas#

Property	Type	Default Value	Required	Description
type	string	`2d`	No	The type of the canvas. Only webGL is supported.
disableScroll	Boolean	`false`	No	Disables screen scrolling and swipe-down-to-refresh features when the a finger taps to move on the canvas and a gesture event is bound.
onTouchStart	Event handler		No	Finger touch starts.
onTouchMove	Event handler		No	Finger moves after touch.
onTouchEnd	Event handler		No	Finger touch ends.
onTouchCancel	Event handler		No	Finger touch is interrupted by call reminder, pop-up window, etc.
onLongTap	Event handler		No	Triggered when a finger taps and holds on the screen for 500 ms. After this event is triggered, moving on the screen does not trigger screen scrolling.

Example#

import mpService from '@binance/mp-service'
function Example() {  React.useEffect(() => {    mpService.nextTick(() => {      const query = mpService.createSelectorQuery()      query        .select(`.myCanvas`)        .fields({ node: true, size: true })        .exec(res => {          const canvas = res[0].node          canvas.width = res[0].node.width          canvas.height = res[0].node.height          const ctx = canvas.getContext('2d')
          ctx.fillStyle = 'green'          ctx.fillRect(20, 10, 150, 100)        })    })  }, [])
  return <Canvas className="myCanvas" />}

Canvas api#

Property	Description
`Canvas.createImage()`	Creates an image object.
`Canvas.createPath2D(Path2D path)`	Create a Path2D object.

Context api not supported#

measureText
direction
createConicGradient
drawFocusIfNeeded
scrollPathIntoView
isPointInPath
isPointInStroke

Open Capabilities#

WebView#

Property	Type	Required	Description
src	String	No	The link from the webview to a webpage.
onLoad	Event handler	No	Triggered when a webpage is loaded. `e.detail = { src }`
onError	Event handler	No	Triggered when a webpage failed to be loaded. `e.detail = { src }`
onMessage	Event handler	No	Triggered when a webpage send message to mini-program. `e.detail = { data }`

Related interface#

You can use the interface provided by WebView-SDK to send messages to the mini-program page. The supported interfaces are:

Interface	Description
bn.miniProgram.postMessage	Send a message to the mini-program, trigger the onMessage event of the component.
bn.onMessage	Handle message

Example#

In the WebView page#

Import the following WebView-SDK file on the page where the JS API needs to be called: https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.1.min.js

<script src="https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.1.min.js"></script>

And it is recommended that developers put the webview-sdk file on their own CDN so that they can provide users with a uniform and controlled speed experience.

web-view page code：

<script src="https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.1.min.js"></script>
<script>  // PostMessage from web page to mini-program  bn.miniProgram.postMessage({ foo: 'bar' })  // Receive messages from mini-program.  bn.onMessage = function (e) {    console.log(e) // { data: 'baz' }  }</script>

Note: Support for using AMD/CMD

In the mini-program page#

import * as React from 'react'import { WebView } from '@binance/mp-components'import mpService from '@binance/mp-service'
function Page() {  return (    <WebView      className="web-view"      src="https://www.binance.com/en/js-sdk-demo-ui/webview"      onLoad={e => console.log('[WebView] onLoad', e.detail)}      onError={e => console.log('[WebView] onError', e.detail)}      // handle message from webview      onMessage={async e => {        await mpService.showModal({          title: 'Message From WebView',          content: JSON.stringify(e.detail.data),        })
        // get webview context by querySelector API        mpService          .createSelectorQuery()          .select('.web-view')          .context(result => {            // post message            result.context.postMessage('baz')          })          .exec()      }} // renderer --> worker      //    />  )}
export default Page

View Containers#

View#

CoverView#

CoverImage#

ScrollView#

Tip#

Swiper#

easingFunction Legal value#

change event source Return value#

Bug & Tip#

Basic Components#

Icon#

RichText#

nodes#

Element node: type = node#

Text node: type = text#

Trusted HTML Nodes and Properties#

Bug & Tip#

Text#

Form Components#

Button#

Valid values of size#

Valid values of formType#

Valid values of openType#

Checkbox#

CheckboxGroup#

Form#

Input#

Valid values of type#

Valid values of confirm-type#

open-type Legal value#

Textarea#

Valid values of confirm-type#

Label#

Picker#

Valid values of mode#

Common picker: mode = selector#

Common picker: mode = multiSelector#

Time picker: mode = time#

Date picker: mode = date#

Valid values of fields#

Radio#

RadioGroup#

Slider#

Switch#

Navigators#

Navigator#

Valid values of target#

Usage of target='miniProgram'#

Media Components#

Image#

Tip#

mode Legal value#

Video#

Canvas#

Canvas#

Example#

Canvas api#

Context api not supported#

Open Capabilities#

WebView#

Related interface#

Example#

In the WebView page#

In the mini-program page#

`change` event `source` Return value#

Element node: `type = node`#

Text node: `type = text`#

Valid values of `size`#

Valid values of `formType`#

Valid values of `openType`#

Valid values of `type`#

Valid values of `confirm-type`#

Valid values of `confirm-type`#

Valid values of `mode`#

Valid values of `fields`#

Valid values of `target`#