[WeChat Mini Programs Getting Started to Mastering]—Take you to uncover the true face of data binding

foreword

For the current form, WeChat mini-programs are a hot topic, so how do we learn and master them and then do practical projects?
For this reason, I specially set up this column to share it with you as I study!

This article mainly introduces the term data binding, so how do we define and use data on the applet page?

First, let's introduce the basic principles of data binding:
1. Define data in date
2. Use data in wxml

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

1. Defining data

请诸君打开微信开发者工具，接下里跟着我一步一步操作！

Statement: The definition and use of our data need to be differentiated. For example, each of our pages has its own data. If we want to use data on a specific page, we need to do it inside the specified page.

The location of defining the data is in the .js file corresponding to the page, and the data can be placed in the data object. (Next, the blogger chose the previous list page)

• Open .js, find data in it, define a data in it, the format is as follows

     Page({
        
        
  
    /**
     * 页面的初始数据
     */
    data: {
        
        
       xdl: '跟着一碗黄豆酱学习微信小程序！'
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        
        
  
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        
        
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        
        
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
        
        
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        
        
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        
        
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        
        
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        
        
  
    }
  })
  
  

  page 组件是初始化生成的，我们只需要关注上面代码的 data ，在代码开头。结构就是 名称 ： ‘内容’

2. Binding data

我们前面已经定义了数据，那么我们如何使用呢？首先我们介绍一下一个语法 — Mustache 语法（双大括号）

2.1 Mustache syntax

What can Mustache syntax be used for? Three main functions

• Dynamically bind content
• Dynamically bound properties
• Ternary operation

2.1.1 Dynamically Binding Content

Now that we have defined the data, how to call it? (dynamic binding)

  <view> {
    
    {
    
     需要绑定的数据名称 }} </view>

We only need to use Mustache syntax (double curly brackets) in .wxml to import the data we defined in .js, as shown in the above code

2.1.2 Dynamically Binding Properties

When we use some components, we need to set the corresponding attribute value to have an effect. For example, our image component needs the src attribute value, which tells us the position of our image in the image component. So how does our Mustache bind properties?

  data: {
    
    
     xdl: '跟着一碗黄豆酱学习微信小程序！',
     picsrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqimg.hxnews.com%2F2018%2F1114%2F1542153705958.jpg&refer=http%3A%2F%2Fqimg.hxnews.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667625105&t=96c03a127d2f0443361ae749461bb2cd'
  },

The format of the definition data is the same as the above. We take the src attribute of image as an example. We create a picsrc and store the path of our image in it. Next, we go into list.wxml to perform binding attribute operations.

<!--pages/list/list.wxml-->

  <view> {
    
    {
    
     xdl }} </view>

  <image src="{
    
    { picsrc}}"></image>

绑定方式就是将原本要填写属性值的地方改成了前面定义的数据名称而已，但是必须使用 Mustache 语法！（双括号）

Show results:

2.1.3 Ternary operations

The ternary operator is a fixed format in software programming, and the syntax is "conditional expression?expression1:expression2". Using this algorithm can filter the data one by one when calling. Next, the blogger will take you to experience the ternary operation.

  data: {
    
    
     xdl: '跟着一碗黄豆酱学习微信小程序！',
     picsrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqimg.hxnews.com%2F2018%2F1114%2F1542153705958.jpg&refer=http%3A%2F%2Fqimg.hxnews.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667625105&t=96c03a127d2f0443361ae749461bb2cd',
     a: '3'
  },

First, we define a data a in the data in list.js, and its value is 3

<!--pages/list/list.wxml-->

  <view> {
    
    {
    
     xdl }} </view>

  <image src="{
    
    { picsrc}}"></image>

  <view> {
    
    {
    
     a >=1 ? 'YES' :'NO'}}</view>

Then in list.wxml we use Mustache syntax, bind data a, and then judge >= 1. If a is greater than or equal to 1, it will display YES, otherwise it will display NO

Show results

2.2 Comprehensive use of Mustache syntax

Then I'll guide you through the operation

• Open list.js and define a variable random

    data: {
        
        
    random:(Math.random()*10)+2,
  },
  

• Open the .wxml of the corresponding page, and use the Mustache syntax to embed the data for random and 5 comparison output

   <view>{
        
        {
        
         random >=5 ? 'a的数值真的大于等于2哟！':'a的数值小于等于2捏！'}}</view>
  

• Show results

  

2.3 Data View

I believe that everyone must have a question, that is, how do we know what the generated random number is? Next, I will tell you how to view the data.

• Click on appdata inside the debugger

  

• View all of our defined data in a data frame

---

3. Data operation

我们前面讲的 Mustache 语法也可以进行算术运算，接下来博主带大家一起来操作一下

3.1 Digit limit (toFixed)

Next, we define two sets of data, one set with no digits, and one set with 3 digits

• define data

    data: {
        
        
    random:(Math.random()*10)+2 ,
    random2:Math.random().toFixed(3)
  },
  

• Data observation

  

我们可以看到设置位数的数据 random2 以及变成三位数

3.2 Arithmetic operations

接下里我们进行简单的算数运算展示

• Arithmetic operation using random2 created earlier (*1000)

   <view>{
        
        {
        
         random2*1000 }}</view>
  

• Data Display

  

• Show results

  

---

Summarize

Everyone should be happy every day, let's study happily together!