Skip to main content

BNS

BNS#

BNS (Binance Script) is a set of scripting languages for miniprogram. Combined with BXML, the page structure can be constructed.

Introduction#

BNS code can be written in the <bns>...</bns> tag in the bxml file, or in a file with a .bxs extension.

Each .bns file and <bns>...</bns> tag is a separate module.

Each module has its own independent scope. That is, variables and functions defined in a module are private by default and invisible to other modules.

If a module wants to expose its internal private variables and functions, it can only be realized through module.exports.

There are two attributes in the <bns>...</bns> tag, module and src, and the module attribute is required and should be unique. The src attribute is optional. If it is not specified, the content of the <bns>...</bns> tag is used as the module code.

Event binding#

Use the BNS function to respond to miniprogram events. Currently, it can only respond to built-in component events, and does not support custom component events. In addition to pure logic operations, BNS functions can also be accessed through the encapsulated ComponentDescriptor instance and set the class and style of the component. For interactive animation, setting the style and class is enough.

eg:

bxml:


<view class="container">    <bns module="foo" src="./foo.js"></bns>    <bns module="bar">        module.exports = {            changeToRed(e, instance) {                instance.setClass('red');            },            changeToBlue(e, instance) {                instance.setClass('blue')            },        }    </bns>    <view bindtap="foo.changeTo20Px">Click to change font-size to 20px</view>    <view bindtap="bar.changeToRed">Click to change color to red</view>    <view bindtap="bar.changeToBlue">Click to color to blue</view></view>

js:

// /pages/comm.bnsmodule.exports = {    changeTo20Px(e, instance) {        instance.setStyle({        'font-size': '20px'        })  }}

the event handler receives two parameters: e and instance.

  • e is Event Target, same as the event object in the miniprogram event binding function.
  • instance is the ComponentDescriptor instance of the current component, which can be used to set the class and style of the component. now, only two methods are supported, setClass and setStyle.