微信小程序基础事件&渲染

Posted 2022-05-30 白瑕

文章目录

• • 事件绑定
  • 事件传参
  • 数据绑定
  • 条件渲染
  • 遍历渲染

事件绑定

事件处理函数要写在Page()里.

<input bindinput="handleBindInput"></input>

事件类型	绑定手法	说明
tap	bindtap / bind:tap	触屏点击
input	bindinput / bind:input	文本框输入
change	bindchange / bind:change	状态改变

共性是, 这些事件会返回一个对象, 里面包含有关本次事件的信息, 以下为这个返回对象中的内容:

属性	类型	说明
type	String	事件的类型
timeStamp	Integer	页面打开到触发该事件经历的毫秒数
target	Object	事件函数所绑定的组件的属性值集合
currentTarget	Object	当前组件的属性值集合(不常用)
detail	Object	额外信息, 比如input的值
touches	Array	当前停留在屏幕中的触摸点信息的数组
changeTouches	Array	当前变化的触摸点信息的数组

事件传参

虽然事件绑定像Vue那样方便, 但是传参要另外写出, 像Vue那样把参数直接写在事件处理函数上会被解析成函数名的一部分而报错:

data-参数名="参数值"  //传String/Number
data-参数名="参数值"  //传变量, 不加双括号不解析

这个例子通过给第一个button的事件函数传参来改变第二个button的内容

<!-- 参数为String/Number时 -->
<button bindtap="handleBindTap" data-canshu="someParams">changeText</button>
<button>text</button>

Pages(
  data: 
    text: "原始Text"
  ,
  handleBindTap(event)   //event为返回的事件对象
    this.setData(
      text: event.target.dataset.canshu
    )
  
)

另外部分参数可以直接从返回的事件对象中获取, 比如input的value:

<input 
  bindinput="handleBindTap" 
  placeholder="pleaseInput"
>
</input>
<button>text</button>

Page(
  data: 
    text: ""
  
  handleBindTap(event) 
    this.setData(
      text: event.detail.value
    )
  ,
)

---

数据绑定

同样的效果也可以用数据双向绑定来实现, 会稍微麻烦一点:
官方提供的简单实现双向绑定的方法是:

model:某属性="data中的某个参数" 
//将该元素的某属性绑定到data中的某个参数

比如下面将input的value绑定到data的msg
然后通过输入事件函数的处理方法实时将msg的值赋给text.
对比v-model

<input 
  model:value="msg" 
  bindinput="handleBindInput" 
  placeholder="input"
/>
<text>text</text>

Page(
  data:
    msg: "",
    text: ""
  ,
  handleBindInput(e) 
    this.setData(
      text: this.data.msg
    )
  ,
)

条件渲染

主要使用

  wx:if="表达式"

来实现, 这就跟v-if一样的…
写的时候想到能不能像Vue的computed一样在外部进行运算, 然后直接返回结果到条件渲染判断?
这个例子把info的运算放到justice()中进行:

<input 
  model:value="msg" 
  bindinput="handleBindInput" 
  placeholder="Please input..." 
/>
<view wx:if="text">text:text</view>
<view wx:elif="justice">info:info</view>
<view wx:else>msg:msg</view>
<!-- else不需要加判定 -->

Page(
  data: 
    info: 'Hello World',
    text: "",
    msg: ""
  
  justice() 
    if (info === 'Hello World') 
      return true;
     else 
      return false;
     
  
)

可见初始情况下info的判定是有效的, 在text存在后又展示了text.

小程序的条件渲染增加了<block>, 一个不会被渲染的标签, 可以把条件渲染判别式写在block上来操控block内标签的渲染, 终于不用再拿个div去套了…

<input model:value="msg" bindinput="handleBindInput" placeholder="Please input..." />

<block wx:if="msg">
  <text>if:</text>
  <view>msg:msg</view>
</block>

<block wx:elif="justice">
  <text>elif:</text>
  <view>info:info</view>
</block>

<block wx:else>
  <text>else:</text>
  <view>text:text</view>
</block>

Page(
  data: 
    info: 'Hello World',
    text: "",
    msg: ""
  
  justice() 
    if (info === 'Hello World') 
      return true;
     else 
      return false;
     
  
)

hidden
并非控制渲染与否, 仅仅控制显示, 其与wx:if的区别如同v-show和v-if, opacity:0和 display: none:

hidden="表达式"

<!-- justice返回true -->
<view>msg:msg</view>
<view hidden="justice">info:info</view>
<view>text:text</view>

hidden不能和block标签配合食用, 会报错.

---

遍历渲染

参考v-for, 不过它甚至连item和index都可以不写…
但还是要通过wx:key=""绑定key, 不然会警告:

<view wx:for="数组名" wx:key="绑定到key的项">

<view wx:for="anArray" wx:key="index">
<text>index: index </text>
<text>item: item</text>
</view>

Page(
  data: 
    anArray: [1, 2, 3, 4, 5]
  ,
)

也支持通过wx:for-index=""和wx:for-item=""手动设定item和index:

<view 
  wx:for="anArray" 
  wx:key="index" 
  wx:for-index="ind" 
  wx:for-item="ite">
</view>

<view 
  v-for="(ite, ind) in anArray" 
  >
</view>