WeChat applet basic and important grammar finishing summary (data binding, operation expression, loop rendering, conditional rendering, event binding (pass parameter))

table of Contents

• Data binding
• Operation expression
• Loop rendering
• Conditional rendering
• Event binding (passing parameters)

First sort out the initialized applet directory (picture from an institution).

Supplement:
sitemap configuration: sitemap. The json file in the root directory of the applet is used to configure whether the applet and its pages are allowed to be indexed by WeChat.

Data binding

wxml data display

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view> 是否: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>

<!-- 6 使用bool类型充当属性 checked  
字符串和 花括号之间一定不要存在空格 否则会导致识别失败 -->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>

Data simulation data in js

Page({
  data: {
    msg: "hello mina",
    num: 10000,
    isGirl: false,
    person: {
      age: 1,
      height: 165,
      name: "fur"
    },
    isChecked:false,
  }
});

Operation expression

1. You can add expressions in curly braces – "statements"
2. Expressions refer to some simple operations, numeric operations, string concatenation, and logical operations. .
   1. Addition and subtraction of numbers
   2. String concatenation
   3. Ternary expression

<view>{{1+1}}</view> 
<view>{{'1'+'1'}}</view>
<view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>
<!--输出
2
11
奇数
-->

cycle

1. List loop

1. wx: for = "{{array or object}}"
2. wx: for-item = "name of loop item"
3. wx: for-index = "index of loop item"
4. wx: key = "" Unique value "is used to improve the performance of list rendering

If wx: key is bound to an ordinary string, then the string name must be the only attribute of the object in the circular array.
If wx: key = "* this", it means that your array is an ordinary array. * This means It is a loop item.
Note:
When the nested loop of the array appears, especially pay attention to the following binding name. Do not duplicate the name.
wx:for-item="item" wx:for-index="index"
By default, we do not write wx:for-item="item" wx:for-index="index", the applet will also set the name of the loop item and index to item and index.
if only one loop wx:for-item="item" wx:for-index="index"can be omitted

Second, the object cycle

1. wx: for = "{{object}}" wx: for-item = "value of object" wx: for-index = "attribute of object"
2. When looping objects, it is best to modify the names of item and index wx:for-item="value" wx:for-index="key"

<!-- 列表循环-->
 <view>
   <view 
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id">
     索引：{{index}} -- 值:{{item.name}}
   </view>
 </view>
<!-- 对象循环-->
 <view>
   <view 
  wx:for="{{person}}"
  wx:for-item="value"  
  wx:for-index="key"
  wx:key="id">
     属性:{{key}} -- 值:{{value}}
   </view>
 </view>

js data element

person: {
	  id:1,
      age: 1,
      height: 165,
      name: "fur"
    },
list:[
      {
        id:0,
        name:"fur"
      },
      {
        id:1,
        name:"furfur"
      }
    ]

block tag

1. Placeholder label
2. When you write the code, you can see that this tag exists, and the applet will remove it when the page is rendered.

<view>
    <block 
   wx:for="{{list}}"
   wx:for-item="item"
   wx:for-index="index"
   wx:key="id"
   class="my_list" >
      索引：{{index}}
      --
      值:{{item.name}}
    </block>
  </view>

Conditional rendering

Two methods can show and hide page elements

1. wx:if、wx:elif、wx:else
2. hidden usage
   1. Add attribute hidden directly on the label
   2. hidden="{{true}}"

Which scene to use

1. When the label is not frequently switched, use wx: if first, and remove the label directly from the page structure.
2. When the label is frequently switched and displayed, the hidden priority is used,
   and the display is switched by adding styles. Note: The hidden attribute should not be used with the style display! Will be overwritten, because the principle of hidden is to increasedisplay:none

   <view>
     <view>条件渲染</view>
     <view wx:if="{{true}}">显示</view>
     <view wx:if="{{false}}">隐藏</view>

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

     <view hidden >hidden1</view>
     <view hidden="{{false}}" >hidden2</view>

     <view wx:if="{{false}}">wx:if</view>
        <!-- 错误用法 ：hidden无法被隐藏 -->
     <view hidden  style="display: flex;" >hidden</view>
   </view>

Print the result:

Event binding

Example: Make the elements entered in the input box displayed on the page element, click the button to realize the addition and subtraction operation

Step analysis:

1. You need to bind the input event to the input tag and bind the keyword bindinput
2. Get the value of the input box, through the event source object e.detail.value
3. Assign the value of the input box to the data, note that it can not be directly assigned, which is different from vue! Assignment via this.setData
4. Click the button, you need to add a click event bindtap,
5. Note: It is not possible to pass parameters directly in the event in the applet, pass the parameter through the custom attribute method, and then obtain the custom attribute through the event source

wxml page

<view>  
  {{num}}
</view>
输入：
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

js file

Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    this.setData({
      num: e.detail.value
    })
  },
  // 加 减 按钮的事件
  handletap(e) {
    // 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  }
})