小程序基础

模板语法

数据绑定

数据绑定也叫插值表达式，是一种将变量渲染到页面中的技术

• 插值 把表达式插入到页面中的写法叫做插值， 符号是 {{}}

<!-- 插值表达式 -->
<view>{{name}}</view>

<!-- 插值表达式三元表达式写法 -->
<view>{{isRain?'睡觉':'吃饭'}}</view>

Page({
 data:{
   name:'小明',
   isRain:true
 }
}))

条件渲染

小程序中的条件渲染的方式有两种

• wx:if
• hidden 相同点： wx:if 和 hidden 都能控制标签的显示和隐藏

不同点： wx:if 实现标签隐藏是通过移除标签来实现的； hidden 实现标签隐藏是通过添加样式来实现的

如果一个标签频繁切换显示，建议使用 hidden， 实际开发中，很多人更多使用 wx:if

使用条件渲染时，双引号和大括号之间不能有空格

<view wx:if="{{isShow}}">isShow</view>
<view wx:if="{{isShow2}}">isShow</view>
<view hidden="{{hidden}}">isShow</view>
<view hidden="{{hidden2}}">isShow</view>

Page({
 data:{
isShow:true,
isShow2:false,
hidden:true,
hidden2:false,
 }
})

列表渲染

<view wx:for="{{list}}">{{item}}</view>
<view wx:for="{{list}}"
wx:for-index='i'
wx:for-index='v'>{{i}}--{{v}}</view>

Page({
 data:{
list:['小明','小红','小兰','小绿'],
 }
})

<!-- 项的变量名默认为 `item`      `wx:for-item` 可以指定数组当前元素的变量名 -->
<!-- 下标变量名默认为 `index`    `wx:for-index` 可以指定数组当前下标的变量名 -->
<!-- `wx:key` 用来提高数组渲染的性能

`wx:key` 绑定的值 有如下选择 -->
<!-- `string` 类型，表示 循环项中的唯一属性  -->
<view wx:for="{{list}}"
wx:key="id">{{item.name}}{{item.age}}了</view>
<!-- 保留字 `*this` ，它的意思是 `item` 本身 ，*this 代表的必须是 唯一的字符串和数组。 -->
<view wx:for="{{list}}"
wx:key="*this">{{item.name}}{{item.age}}了</view>

Page({
 data:{
list:[
  {name:'小明',age:18,id:1},
  {name:'小红',age:48,id:2},
  {name:'小蓝',age:28,id:3},
],
 }
})

事件绑定

小程序中绑定事件，通过关键字来实现

• bind是事件冒泡

<view bindtap="handelParent">点击父元素
  <view bindtap="handelChild">点击子元素</view>
</view>

Page({
  handelParent(){
    console.log('触发父元素');
  },
  handelChild(){
    console.log('触发子元素');
  }
})

  点击子元素后

• catch是事件捕获

<view catchtap="handelParent">点击父元素
  <view catchtap="handelChild">点击子元素</view>
</view>

Page({
  handelParent(){
    console.log('触发父元素');
  },
  handelChild(){
    console.log('触发子元素');
  }
})

事件传参

• 通过传递自定义属性的方式

<view data-num="100" bindtap="handleTap">输出100</view>

Page({
  handleTap(e){
    const num=e.target.dataset.num
    console.log(num);
  }
})

data的获取和设置

• 获取data中的值 this.data.属性名

• 设置data中的值 this.setData({属性名:属性值})

<view bindtap="handleTap">{{message}}</view>

Page({
data:{
  message:'hello world'
},
handleTap(data){
console.log('触发点击事件',data);
// 获取数据
console.log('触发点击事件',this.data.message);
// 修改数据
console.log('触发点击事件',this.setData({message:'hello,tom'}));
}
})