《微信小程序前端开发》（黑马）课程笔记 Lesson 1 语法基础

本文链接：https://blog.youkuaiyun.com/LeungSr/article/details/121597132

本文详细介绍了微信小程序中的标签及其含义，包括text、view和checkbox的用法。通过实例展示了数据绑定的不同类型，如字符串、数字、布尔值和对象。接着，解释了运算表达式的应用，并探讨了列表与对象循环的wx:for指令。此外，还讲解了block标签的使用和条件渲染的wx:if与hidden的区别。最后，提供了JavaScript配置示例及完整的效果展示，是学习微信小程序开发的实用教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 标签及其含义

text: 相当于web中的span，一行内写多个不会换行
view：相当于web中div标签，一行内写多个会换行
checkbox: 以前的复选框标签

2. 数据绑定

<!-- 1. 字符串 -->
<view>{{msg}}</view>

<!-- 2. 数字类型 -->
<view>{{num}}</view>

<!-- 3.布尔类型 -->
<view>是否是女孩:{{isGirl}}</view>

<!-- 4. Object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

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

<!-- 
  6. 使用bool类型充当属性 自定义属性 checked
    1. 字符串和花括号之间不能存在空格
    2. 如  <checkbox checked="      {{isChecked}}"></checkbox>
  -->
<view>
  <checkbox checked="{{isChecked}}"></checkbox>
</view>

3. 运算表达式

<!-- 7. 运算表达式 -->
<view>{{1 + 1}}</view>

<view>{{'1'+'1'}}</view>

<view>{{11%2==0?'偶数':'奇数'}}</view>

4. 列表与对象循环

wx:for = "{{数组或对象}}" wx:for-item = "循环项" wx:for-index = "循环项的索引"
wx:key = "唯一的值"用于提高列表渲染性能(相当于数据库中的主键、唯一标识符)
- wx:key 绑定一个普通字符串的时候, 那么这个字符串名称肯定是循环数组中的对象唯一属性
- wx:key = "*this"就表示数组是一个普通的数组,*this是一个循环项
  如: [1, 2, 3, 4, 5]
当出现数组的循环嵌套的时候,要注意名称不要重名
默认情况下我们不写 wx:for-item = "item" wx:for-index = "index"
小程序也会把循环项的名称和索引名称称为item和index(只有一层循环代码可以省略)
对象循环
wx:for = "{{对象}}" wx:for-item = "属性" wx:for-index = "对象的属性"

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

 <view>
  <view>对象循环</view>
  <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
    属性:{{key}}
    -- 
    值:{{value}}
  </view>
 </view>

5. block标签的使用

占位符的标签
写代码的时候可以看到这些标签
页面渲染的时候小程序会将其移除
如果不想加入多余的标签

   <view>
    <view>对象循环</view>
    <block wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index"
    wx:key="age"
    class = "my_list">    
      索引:{{index}}
      -- 
      值:{{item.name}}
    </block>
   </view>

6. 条件渲染

wx:if="{{true/false}}""
if, else, if else(elif)
hidden
- 在标签上直加hidden,默认为true
- hidden = “{{true}}”
分场景使用
- 当标签不是频繁地切换显示优先使用wx:if(直接将标签从结构中删除)
- 当比爱钱频繁切换显示地时候,优先使用hidden(添加显示方法来实现)
- hidden不能与display混用

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

<view>---------混用----------</view>
<view wx:if="{{false}}">wx:if</view>
<view hidden style = "display:flex;">hidden</view>

7. JavaScript配置

// pages/demo03/demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello mina",
    num:10000,
    isGirl:false,
    person:{
      age:74,
      height:145,
      weight:200,
      name:"富婆"
    },
    isChecked : false,
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      }
    ]
  }
})