小程序中的模版语法

模板语法

今天我们来介绍一下小程序中的模版语法!!!

1. 声明和绑定数据

小程序页面中使用的数据均需要在 Page() 方法的 data 对象中进行声明定义

在将数据声明好以后,需要在 WXML 中绑定数据,数据绑定最简单的方式是使用 Mustache 语法(双大括号)将变量包起来。

在 {{ }} 内部可以做一些简单的运算,支持如下几种方式:

  1. 算数运算

  2. 三元运算

  3. 逻辑判断

  4. 其他…

📌 注意事项:

​ 在 {{ }} 语法中,只能写表达式,不能写语句,也不能调用 js 相关的方法

定义数据:

Page({
  // 页面的初始数据
  data: {
    num: 1
  }
    
  // coding...
}

使用数据:

➡️ pages/index/index.wxml

<!-- 如果需要展示数据,在 wxml 中需要使用双大括号写法将变量进行包裹 -->

<!-- 展示内容 -->
<view>{{ school }}</view>
<view>{{ obj.name }}</view>

<!-- 绑定属性值,如果需要动态绑定一个变量,属性值也需要使用双大括号进行包裹 -->
<view id="{{ id }}">绑定属性值</view>

<!-- 如果属性值是布尔值,也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}" />

<!-- 算术运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view>

<!-- 三元运算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view>

<!-- 逻辑判断 -->
<view>{{ id === 1 }}</view>

<!-- 在双大括号写法内部,只能写表达式,不能写语句,也不能调用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
<!-- <view>{{ for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{{ obj.name.toUpperCase() }}</view>

➡️ pages/index/index.js

// index.js
Page({

  // 在小程序页面中所需要使用的数据均来自于 data 对象
  data: {
    id: 1,
    isChecked: false,
    school: '尚硅谷',
    obj: {
      name: 'tom'
    }
  }

})
     

2. 声明和修改数据

小程序中修改数据并不能直接进行赋值,而是要通过调用 this.setData 方法才能实现

将需要修改的数据以 key:value 的形式传给 this.setData 方法。

this.setData 方法有两个作用:

  1. 更新数据
  2. 驱动视图更新
Page({
  // 页面的初始数据
  data: {
    num: 1
  },

  updateNum() {
    this.setData({
      // key 是需要修改的数据
      // value 是最新值
      num: this.data.num + 1
    })
  }
 
  // coding...
}

3. setData-修改对象类型数据

在实际开发中,我们经常会在 data 中声明对象类型的数据,小程序中通过调用 setData 方法可以修改页面的数据,包括对象类型的数据。下面是修改对象类型数据的方法:

  1. 定义一个对象

    Page({
      // 定义页面中使用的数据
      data: {
        userInfo: {
          name: 'Tom',
          age: 10,
          gender: '男'
        }
      }
    }
    
  2. 修改对象中的单个属性:

    this.setData({
      'userInfo.name': 'Jerry'
    })
    
  3. 修改对象中的多个属性

    // 修改对象中的多个属性
    this.setData({
      'userInfo.name': 'Jerry',
      'userInfo.age': 100
    })
    
  4. 使用 ES6 的展开运算符

    在修改对象类型的数据时,可以使用 ES6 的展开运算符先复制对象,然后利用新值对旧值覆盖的方式修改

    const userInfo = {
      ...this.data.userInfo,
      name: 'Jerry',
      age: 100
    }
    
    // 修改对象中的多个属性
    this.setData({
      userInfo
    })
    
  5. 使用解构赋值修改对象属性

    在修改对象类型的数据时,可以使用解构赋值来修改对象属性

    // 将 userInfo 从 data 中进行解构
    const { userInfo } = this.data
    // 产生一份新数据
    const newUserInfo = {
      ...userInfo,
      name: 'Jerry',
      age: 100
    }
    // 修改对象中的多个属性
    this.setData({
      userInfo: newUserInfo
    })
    
  6. 使用 Object.assign 方法合并对象

    在修改对象类型的数据时,可以使用 Object.assign 方法将多个对象合并为一个对象

    // 使用 Object.assign 方法将多个对象合并为一个对象
    const userInfo = Object.assign(
      this.data.userInfo, 
      { name: 'Jerry' },
      { age: 100 }
    )
    
    // 修改对象中的多个属性
    this.setData({
      userInfo
    })
    
  7. 删除对象中的属性

    在删除对象中的属性时,不能使用 delete 操作符,因为小程序的数据绑定机制不支持监听 delete 操作

    // 使用展开运算符拷贝一份数据,产生一个新对象
    const newUser = { ...this.data.userInfo }
    // 使用 delete 删除新对象中的属性
    delete newUser.age
    
    this.setData({
      // 将新的对象进行赋值
      userInfo: newUser
    })
    

📌 注意事项

小程序的数据绑定机制只能监听到 setData 方法中修改的数据,无法监听到直接删除属性的操作,所以在删除对象属性时,需要先将对象复制一份再进行操作,然后再调用 setData 方法更新数据。

4. setData-修改数组类型数据

数组类型数据也是经常会使用的数据格式之一,下面是修改数组类型数据的方法:

  1. 定义一个数组

    Page({
      // 定义页面中使用的数据
      data: {
        animalList: ['Tom', 'Jerry', 'Spyke']
      }
    
      // coding...
    }
    
  2. 使用数组的 concat 方法合并数组

    在修改数组类型的数据时,可以使用数组的 concat 方法来合并数组

    // 使用 concat 方法来合并数组
    const newList = this.data.animalList.concat('Tyke')
    
    // 使用 setData 进行赋值
    this.setData({
      animalList: newList
    })
    
  3. 使用数组的 push 方法新增属性

    在修改数组类型的数据时,可以使用数组的 push 方法来添加元素

    // 使用数组的 push 方法来添加元素
    this.data.animalList.push('Tyke')
    
    // 使用 setData 进行赋值
    this.setData({
      animalList: this.data.animalList
    })
    
  4. 使用 ES6 的展开运算符

    在数组类型的数据时,可以使用 ES6 的展开运算符先复制数组,然后进行合并

    // 使用 ES6 的展开运算符先复制数组,然后进行合并
    const newList = [...this.data.animalList, 'Tyke']
    
    // 使用 setData 进行赋值
    this.setData({
      animalList: newList
    })
    
  5. 修改数组中某个元素的值:

    利用索引的方式进行修改,但必须使用 wx:for 来进行渲染数组,否则会出现错误

    this.setData({
      'animalList[2]': 'Tyke' 
    })
    
  6. 使用数组的 filter 方法删除元素

    在修改数组类型的数据时,可以使用数组的 filter 方法来删除元素

    // 使用数组的 filter 方法来删除元素
    const newList = this.data.animalList.filter(item => item !== 'Tom')
    
    // 使用 setData 进行赋值
    this.setData({
      animalList: newList
    })
    

5. 数据绑定-简易双向绑定

在 WXML 中,普通属性的绑定是单向的,例如:

<input value="{{ num }}" />

如果使用 this.setData 来更新 numnum 和输入框的中显示的值都会被更新为值。但如果用户修改了输入框里的值,却不会同时改变 data 中的 num

如果需要在用户输入的同时也将 data 中的数据修改 ,需要借助简易双向绑定机制。此时可以在对应项目之前加入 model: 前缀即可,例如:

<input model:value="{{ value }}" />

如果使用 this.setData 来更新 numnum 和输入框的中显示的值都会被更新为值。

如果输入框的值被改变了, data 的数据也会随着改变。

同时, WXML 中所有绑定了数据的位置也会被一同更新

📌 注意事项:

简易双向绑定的属性值如下限制:

  1. 只能是一个单一字段的绑定,例如:错误用法:

  2. 尚不能写 data 路径,也就是不支持数组和对象,例如:错误用法:

落地代码:

<!-- 单向绑定:数据能够影响页面,但是页面更新不会影响到数据 -->
<!-- <input type="text" value="{{ value }}" /> -->

<!-- 双向绑定:数据能够影响页面,页面更新也能够影响数据 -->
<!-- 如果想实现简易双向绑定,需要再对应的属性之前添加 model: -->
<!-- <input type="text" model:value="{{ value }}" /> -->

<!-- 如果需要获取复选框的选中效果,需要给 checked 添加 model: -->
<checkbox model:checked="{{ isChecked }}" /> 是否同意该协议

<!-- 注意事项1:属性值只能是一个单一字段的绑定 -->
<!-- <input type="text" model:value="值为 {{ value }}" /> -->

<!-- 注意事项2:属性值不能写数据路径,也就是不支持对象和数组 -->
<!-- <input type="text" model:value="{{ obj.value }}" /> -->

6. 列表渲染-基本使用

基本使用

列表渲染:就是指通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上

只需要在组件上使用 wx:for 属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件

默认数组当前项的变量名默认为 item

默认数组的当前项的下标变量名默认为 index

在使用 wx:for 对数组进行遍历的时候,建议加上 wx:key 属性,如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,即以后数据不会改变,或者不必关注其顺序,可以选择忽略。

wx:key 的值以两种形式提供:

  1. 字符串:代表需要遍历的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变
  2. 保留关键字 *this 代表在 for 循环中的 item 本身,当 item 本身是一个唯一的字符串或者数字时可以使用

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且 提高列表渲染时的效率

📌 注意事项

​ 在使用 wx:for 对数组进行遍历的时候,建议加上 wx:key 属性,否则控制台会报警告

落地代码:

<!-- 如果需要进行列表渲染,需要使用 wx:for 属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是 item -->
<!-- 每一项下标(索引)的变量名默认是 index -->

<!-- 如果渲染的是数组,item:数组的每一项,index:下标 -->
<!-- <view wx:for="{{ numList }}">{{ item }} - {{ index }}</view> -->

<!-- 如果渲染的是对象,item:对象属性的值,index:对象属性 -->
<!-- <view wx:for="{{ obj }}">{{ item }} - {{ index }}</view> -->

<!-- ------------------------ 关于 Key --------------------------------- -->

<!-- wx:key 提升性能 -->
<!-- wx:key 的属性值不需要使用双大括号进行包裹,直接写遍历的数组 中 item 的某个属性 -->

<!-- wx:key 属性值有两种添加形式 -->
<!-- 字符串,需要是遍历的数组 中 item 的某个属性,要求该属性是列表中唯一的字符串或者数字,不能进行动态改变 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view>

<!-- 保留关键字 *this,*this 代表的是 item 本身,item 本身是唯一的字符串或者数字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>

// profile.js
Page({

  data: {
    numList: [1, 2, 3],
    fruitList: [
      { id: 1, name: '🍎', price: 66 },
      { id: 2, name: '🍋', price: 77 },
      { id: 3, name: '🍅', price: 88 }
    ],
    obj: {
      name: 'tom',
      age: 10
    }
  }

})

7. 列表渲染-使用进阶

修改默认下标和变量名:

如果需要对默认的下标和变量名进行修改,可以使用 wx:for-itemwx:for-index

  1. 使用 wx:for-item 可以指定数组当前元素的变量名

  2. 使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">
  {{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
</view>

渲染多节点结构块:

如果需要渲染一个包含多节点的结构块,可以使用一个 <block/> 标签将多个组件包装起来

<block wx:for="{{ animal }}">
  <view>
    <span>{{ item.name }}</span>
    <span>{{ item.avatar }}</span>
  </view>
</block>

注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

8. 条件渲染

知识点:

条件渲染主要用来控制页面结构的展示和隐藏,在微信小程序中实现条件渲染有两种方式:

  1. 使用 wx:ifwx:elifwx:else 属性组
  2. 使用 hidden 属性
<view wx:if="{{condition}}"> True </view>
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view
<view hidden="{{condition}}"> True </view>

wx:ifhidden 二者的区别:

  • wx:if :当条件为 true 时将内容渲染出来,否则元素不会进行渲染,通过移除/新增节点的方式来实现
  • hidden :当条件为 true 时会将内容隐藏,否则元素会显示内容,通过 display 样式属性来实现的

落地代码:

<!-- 使用 wx:if、wx:elif、wx:else 属性组控制元素的隐藏和控制 -->
<view wx:if="{{ num === 1 }}">num 等于 {{ num }}</view>
<view wx:elif="{{ num === 2 }}">num 等于 {{ num }}</view>
<view wx:else>大于 2</view>

<view hidden="{{ num !== 1 && num !== 2 && num !== 3 && num < 3}}">
  {{ num < 3 ? 'num 等于' + num : '大于 2' }}
</view>

<button type="primary" bindtap="updateNum">修改数据</button>

Page({
  // 页面的初始数据
  data: {
    num: 1
  },
  
  // 更新数据
  updateNum() {
    this.setData({
      num: this.data.num + 1
    })
  }
    
  // coding...
}

以上资料均来自于网络,希望对大家有所帮助!!!

  • 18
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Java微信小程序商城模版是一种用于开发微信小程序商城的模板,使用Java语言编写。它为开发人员提供了一套完整的基础架构和功能组件,以便快速搭建和定制微信小程序商城。 该模版具有以下特点: 1. 功能丰富:Java微信小程序商城模板提供了许多常见的商城功能,如商品展示、购物车、订单管理、支付功能等。开发人员可以根据实际需求进行定制和改进,以开发出独具特色的小程序商城。 2. 易于使用:该模版具有完善的开发文档和示例代码,使得开发人员能够快速上手并完成开发任务。同时,它也提供了可视化的界面编辑器,可以方便地进行页面布局和样式设计。 3. 高可扩展性:Java是一种面向对象的编程语言,具有良好的可扩展性。通过使用Java微信小程序商城模版,开发人员可以根据实际需求添加新的功能和模块,以满足不同的商城需求。 4. 多平台支持:Java微信小程序商城模版可以在各种操作系统上运行,包括Windows、Linux和MacOS等。同时,它也支持多种数据库,如MySQL、Oracle和SQL Server等。 总之,Java微信小程序商城模版为开发人员提供了一个快速、高效的开发平台,可以帮助他们快速搭建和定制微信小程序商城,并为用户提供丰富的商城功能和良好的使用体验。 ### 回答2: Java微信小程序商城模版是一种使用Java语言编写的微信小程序商城模版。它提供了基本的商城功能,包括商品展示、购买、支付、订单管理等功能。 首先,Java微信小程序商城模版可以实现商品展示功能。用户可以在小程序浏览商城的商品,包括商品的图片、名称、价格等信息。用户可以通过浏览商品列表或通过搜索来查找感兴趣的商品。 其次,Java微信小程序商城模版还具备购买功能。用户可以将心仪的商品加入购物车并进行批量购买。购物车功能可以方便用户进行商品管理和结算。 另外,Java微信小程序商城模版还具备支付功能。用户可以选择不同的支付方式进行支付,如微信支付、支付宝支付等。支付功能确保了购物流程的安全性和便捷性。 最后,Java微信小程序商城模版还包含订单管理功能。用户可以查看已购买的商品订单、订单状态以及物流信息。商家和管理员可以通过后台管理系统对订单进行处理和管理,包括订单确认、发货、退款等操作。 综上所述,Java微信小程序商城模版提供了一套完整的商城解决方案,包括商品展示、购买、支付、订单管理等功能。它可以满足用户购物的需求,并提供便捷的管理工具给商家和管理员。这样的模版可以帮助开发者快速搭建微信小程序商城,节省开发时间和成本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值