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 is View layer, and the tutorial will also use view later) layer to 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
<text class="user-motto">{{motto}}</text>

//page.js
 data: {
    motto: &#39;Hello World&#39;,
  },

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 the data attribute of the Page object. That is to say, if the variable needs to be bound to the view layer, the data attribute## must be defined. #中

2: By calling the

setData(Page object predefined) method of the Page object, the interface data can be updated, but setting the variable directly is invalid, so For variables bound to the view layer, always use the setData method 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

attribute of the

//index.wxml
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

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

image tag is bound to the userInfo.avatarUrl variable, and in In the onLoad method, userInfo is set by calling the setData method.

Property binding

You can bind variables to the property values ​​of the view component (such as the

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

src="{{userInfo.avatarUrl}}"

In addition to displaying images, attribute binding has many functions.

Associated data

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.

When the user's click event is obtained, it is necessary to know which student's data is clicked. At this time, the student's ID can be bound to the ID attribute of the view component for data association.

Control the hiding/showing of the view

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. .

Control properties

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
<view wx:if="{{condition}}"> </view>

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

By binding data to the

wx:if

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

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

If you want to control multiple view components at the same time, you can use

block wx:if

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xml;toolbar:false;">&lt;block wx:if=&quot;{{true}}&quot;&gt; &lt;view&gt; view1 &lt;/view&gt; &lt;view&gt; view2 &lt;/view&gt; &lt;/block&gt;</pre><div class="contentsignin">Copy after login</div></div>

Similarly, double quotes need to be added when controlling attribute binding

wx:if vs hidden

Generally Say, wx:if has a higher switching cost and hidden has a higher initial rendering cost. Therefore, if frequent switching is required, it is better to use hidden

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

Keywords

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

<checkbox checked="{{false}}"> </checkbox>

Special note: Do not write checked="false" directly. The calculation result is a string, which is converted to a boolean type to represent a true value.

For more information about data binding, please stay tuned

Basics of Mini Program Development: Data Binding (8)

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!