状态与数据

概述

类似 vue2，在方法 Page() 的属性 data 中声明定义变量，在 wxml 中使用双大括号的方式使用变量。表达式中支持简单的运算：

• 算数运算
• 三元运算
• 逻辑判断
• 其他

注意不要在 Mustache 语法中写语句，也不能调用 js 相关的方法

动态样式类

下面代码采用了动态样式类，前面的 state 是通用类（静态类）后面根据对象属性 item.isAudited 动态加载样式类 audited 和 wait-audit

<view class="state {{item.isAudited ? 'audited':'wait-audit'}}"><text>{{item.progress}}</text></view>

CRUD

Page({
  data: {
    num: 12 as number,// 同时声明了数据类型
    seq: 11,
    arr: [] as string[],// 声明为字符串类型的数组
    userInfo: {
      id: 1001,
      name: '张三'
    },
	userProfile: {} as IUserProfileRes,// 初始化为空对象，同时指定类型是IUserProfileRes
  },
  
  // 使用 setData 方法在修改数据的同时驱动更新视图
  handleIncrease(){
    this.setData({
      seq: this.data.seq+1
    })
  },
    
  // 新增、修改对象属性
  updateName(){
    this.setData({
      'userInfo.name': '李四'
    })
  },
  addAttr(){
    this.setData({
      'userInfo.gender': '男'
    })
  },
    
  // 使用ES6语法修改对象属性
  updateES6(){
    const newObj = {
      ...this.data.userInfo,
      name: '李四'
    }
    
    this.setData({
      userInfo: {...newObj}
    })
  },
    
  // 使用 Object.assign 合并对象属性来修改数据
  // Object.assign 从后向前将多个属性合并到第一个对象中
  // 有重复的属性则覆盖
  updateAssign(){
    const userInfo = Object.assign(this.data.userInfo, { name:'李四' })
    this.setData({userInfo})
  },
    
  // 删除属性
  delAttr(){
    delete this.data.userInfo.id
    this.setData({
      userInfo: this.data.userInfo
    })
  },

  // 使用展开运算符删除多个属性，解构出来的 rest 是剩余的
  // 保留的多个属性构成的对象
  delAttrMult(){
    const { id,gender, ...rest } = this.data.userInfo
    this.setData({
      userInfo: {...rest}
    })
  },
    
  // 数组操作
  // 追加元素
  listAdd(){
    this.data.list.push(4)
    this.setData({
      list: this.data.list
    })
  },
    
  // 也可以通过展开运算符追加数据
  listAdd(){
    const newList = [...this.data.list, 4]
    this.setData({
      list: [...newList]
    })
  },
    
  // 通过数据路径的方式修改指定序号的数组元素
  listUpdate(){
    // 修改数字数组index=2的元素为6
    this.setData({
      'list[2]': 6
    })
      
    // 修改对象数组第一个元素的name
    this.setData({
        'list[0].name': '张三'
    })
  },
}

简易双向绑定

类似 vue 做双向绑定

<input type="text" model:value="{{inputVal}}" />

注意两点：

1. 只能单一字段绑定，不可使用表达式 <input model:value="值为 {{value}}">
2. 不能使用数据路径，即不能 <input model:value="{{a.b}}">

checkbox 的双向绑定

<checkbox model:checked="{{agreeTerm}}" />

Page({
  data: {
    agreeTerm: false,
  }
})

渲染列表数据

注意指定属性为 key 时不需要 mustache 语法

fruit: [
    {id: 1001, name: '🍎'},
    {id: 1002, name: '🍌'},
    {id: 1003, name: '🍉'},
]
<view wx:for="{{fruit}}" wx:key="id">{{item.name}}</view>

for 循环渲染列表数据时默认 index 作为数组的下标，默认 item 作为数组的元素，如果要修改默认需要使用 wx:for-item 和 wx:for-index

在渲染列表时可以使用元素 <block /> 作为包裹容器，类似 vue 的 <template> 元素，它仅仅是一个包裹元素不会在页面中做任何渲染，只接受控制属性

条件渲染

条件渲染用来控制页面结构的展示和隐藏，在小程序中实现条件渲染的方式有：

1. 使用 wx:if , wx:elif , wx:else 属性组
2. 使用 hidden 属性

wx:if 和 hidden 的区别：

wx:if 通过新增/移除节点的方式实现显示/隐藏，hidden 是通过 display 样式属性来实现