扔骰子微信小程序案例

只有index界面所以直接

1，wxml

<view class="container">
  <view class="dice-area">
    <image class="dice" src="{{diceImage}}" bindtap="rollDice" />
  </view>
  <view class="result">{{result}}</view>
</view>

2，wxss

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  
  .dice-area {
    margin-bottom: 30px;
  }
  
  .dice {
    width: 200px;
    height: 200px;
  }
  
  .result {
    font-size: 28px;
    color: #333;
  }
  

3，js

Page({
    data: {
      diceImage: '/images/dice-1.png',
      result: '',
      diceList: ['/images/dice-1.png', '/images/dice-2.png', '/images/dice-3.png', '/images/dice-4.png', '/images/dice-5.png', '/images/dice-6.png']
    },
  
    rollDice: function() {
      const index = Math.floor(Math.random() * this.data.diceList.length);
      const diceImage = this.data.diceList[index];
      const result = `点数为：${index + 1}`;
      this.setData({
        diceImage: diceImage,
        result: result
      });
    }
  })
  

这些你看自己的情况可以换成其他照片原理就生成随机数