微信小程序开发学习笔记——3.6【小案例】熟练使用事件与数据绑定取随机值

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：https://www.bilibili.com/video/BV19G4y1K74d?p=20

点击时模块颜色发生改变，并产生随机数。

一、代码

event.wxss中添加如下代码

.box{
  margin:50rpx;
  width:200rpx;
  height:200rpx;
  background: pink;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

event.js中的代码添加如下部分

Page({
 data: {
    name:"咸虾米",
    age:18,
    num:0,
    color:"pink",
    size:300
  },
//点击颜色块
  clickBox(){
    let rdm=parseInt(Math.random()*100) //取整（取随机数）
    let r1=parseInt(Math.random()*255)
    let r2=parseInt(Math.random()*255)
    let r3=parseInt(Math.random()*255)
    let color=`rgb(${r1},${r2},${r3})` //放变量必须用它自己的表达式 ${}
    let size=parseInt(Math.random()*600)
    size=size<200? 200:size //如果生成的size随机数小于200就设其为200，大于200则为生成的随机数。
    this.setData({
      num:rdm,
      color:color,
      size:size
    })
    console.log(rdm);
  },
})

event.wxml中的代码如下

<view class="box" 
style="background:{{color}};width: {{size}}rpx;height: {{size}}rpx;" 
bindtap="clickBox">
  随机数：{{num}}
</view>

点击方块，随机数、方块大小、方块颜色都会改变 。