Basics of Mini Program Development - Data Binding Part 1 (7)

As written in the previous tutorial, the WeChat applet framework divides the program into a logical layer (.js file) and a view layer (.wxml file). This is a common programming method that separates UI and logic. The developed program is more flexible and easy to expand.

This programming method usually solves two problems:

The UI layer responds to changes in the logic and data of the logic layer
The UI layer feeds back the user's operations to the logic layer

Generally speaking, the UI layer and the logic layer can expose interfaces to each other. However, for flexibility and scalability considerations, a middle layer will be introduced for management, which can avoid the UI layer. and direct dependencies between logic layers.

The WeChat applet framework is designed based on this model. The .wxml file describes the UI layer (the official name of WeChat isView layer, and the tutorial will also useview later) layerto name), the .js file handles the logic layer, and WeChat’s framework serves as the middle layer to manage the calls between the two.

In order to better help developers develop WeChat applets, WeChat defines some syntax and rules to help developers connect the view layer and the logic layer.

Data binding

Display string content

//page.wxml {{motto}} //page.js data: { motto: 'Hello World', },

By embedding "{{motto}}" into the view layer In the code, the interface will display "Hello World"

Change the string content

setData({ motto:'Hello My World' })

When the above code is executed, the interface will display "Hello My World"

There are two points that need to be explained in the above part:

1: The view layer is embedded with{{motto}}instead of{{data.motto}}By default, the WeChat framework sets the variables bound to the view layer to be defined in thedata attributeof the Page object. That is to say, if the variable needs to be bound to the view layer, thedata attribute## must be defined. #中

setData(Page object predefined) method of the Page object, the interface data can be updated, butsetting the variable directly is invalid, so For variables bound to the view layer, always use thesetDatamethod to set the variable value

Display picturesOn the program homepage generated by default in the development tool, The user's avatar is displayed, and the relevant code is as follows: The
src

//index.wxml  //index.js onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }

Property binding

src# of theimagetag above) ##Attribute),Note that when binding to an attribute, you need to add a pair of double quotes outside.

src="{{userInfo.avatarUrl}}"

Assume that you want to make a student management program. The page uses a list to display user data. When the user clicks on a certain student information, the student's details are entered. page pages.

You can bind variables to the hidden attribute of the view component. By changing the value of the hidden attribute of the component, you can control whether the component is displayed. .

As mentioned above, you can control whether the view component is displayed through the property binding method, and you can also achieve this function by controlling properties.

//Page.wxml   //Page.js Page({ data: { condition: true } })

attribute, you can control whether the component is displayed.The framework also provides wx:elif and wx:else attributes. The usage is as follows:

 1   2   3 

<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>

, and if the conditions are unlikely to change at runtime, wx:if is better.

The framework provides two keywords to representtrue
andfalsetrue
: true of boolean type, representing true value.false
: boolean type false, representing a false value.Code example

For more information about data binding, please stay tuned

The above is the detailed content of Basics of Mini Program Development - Data Binding Part 1 (7). For more information, please follow other related articles on the PHP Chinese website!