开发答题小程序之倒计时开始页面及背景音乐实现

pages/show/show.wxml

<view class="question-box">
        <view class="clip1 {{count==0?'':'clip1'}}">3</view>
        <view class="clip2 {{count==1?'':'hide'}}">2</view>
        <view class="clip3 {{count==2?'':'hide'}}">1</view>
        <view class="clip4 {{count==3?'':'hide'}}">开始</view>
        <view animation="{{gameStartAnimationData}}" class="box">
            <view bindtap="_bgMusciControl" class="music {{isMusicOn?'music-on':'music-off'}}"></view>
            <view class="tips">
                <text>连续答对{{30}}题即挑战成功</text>
            </view>
        </view>
    </view> 

     <view class="keyboard-box">
        <view class="rule {{gameStart?'hide':''}}">
            <text>挑战规则</text>
            <text>连续答对{{35}}题即挑战成功</text>
        </view>
    </view> 

pages/show/show.js

// pages/show/show.js
const innerAudioContext=wx.createInnerAudioContext();
const bgMusic = wx.getBackgroundAudioManager() //创建背景音乐
bgMusic.title="1"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //gameStartAnimationData: {},
    gameStart: !1,
    gameStatus: "",
    isGameOver: null,
    countDownMusic: "",//出场音乐
    bgMusic: "",//答题开始音乐
    result: "",
    minScore: 40,
    duration: 1e4,
    currDuration: 0,
    rightAudio: "",
    wrongAudio: "",
    isMusicOn: !1,
    speed: 0,
    count: ""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this._init(), this._gameReady(); 
  },
 onUnload: function() {
  bgMusic.stop();
},

onHide: function() {
  bgMusic.stop();
},

_bgMusciControl: function() {
  this.setData({
      isMusicOn: bgMusic.paused
  }), this.data.isMusicOn ? bgMusic.play() : bgMusic.pause();
},


  _init: function() {
    var a = this, t = (this.data.duration / this.data.minScore).toFixed(0) - 0;
    this.setData({
        speed: t,
        currDuration: this.data.duration,
        //isGameOver: !1,
       // isSuccess: !1,
        gameStart: !1,
         countDownMusic: "http://127.0.0.1:8080/bgm/快乐.mp3",
         bgMusic: "http://127.0.0.1:8080/bgm/快乐.mp3",  
         rightAudio: "../../audio/success.mp3",
         wrongAudio: "../../audio/fail.mp3",
        x: 0
    });
  
},

//倒计时准备
  _gameReady: function() {
    var t = this, a = null, e = 0;
    a = setInterval(function() {
        if (3 == e) 
        return clearInterval(a), 
        e = 3, 
        t.setData({
            count: e
        }),  
        t._gameStart(),
        !1;
        t.setData({
            count: ++e
        });
        console.log("hahah"+e)
        if(e==3){
          wx.navigateTo({
            url: '../music/music',
          })
        }
    }, 1e3), this._playAudio(this.data.countDownMusic);
   
},

//播放音频
_playAudio: function(t) {
  innerAudioContext.stop(), innerAudioContext.src = t, innerAudioContext.play();
},

//开始动画
_gameStart: function() {
  var t = wx.createAnimation({
      duration: 1e3,
      timingFunction: "ease"
  });
   innerAudioContext.stop(), 
   bgMusic.src = this.data.bgMusic, bgMusic.play(), 
  this.setData({
      gameStart: !0,
      isMusicOn: !0
  })
}

})

pages/show/show.wxss

page {
  height: 100%;
}

.hide {
  display: none;
}

.container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #fffae1;
}

.question-box {
  position: relative;
  width: 100%;
  height: calc(100% - 384rpx);
  background: #ff5f21;
  border-bottom-left-radius: 38rpx;
  border-bottom-right-radius: 38rpx;
  box-shadow: 0 8rpx 0 #eb4102;
  color: #fff;
}

@keyframes scaleDown {
  from {
      transform: scale(5);
      opacity: 0;
  }

  to {
      transform: scale(0);
      opacity: 1;
  }
}

.question-box .clip1,.question-box .clip2,.question-box .clip3,.question-box .clip4 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin-left: -144rpx;
  margin-top: -144rpx;
  width: 288rpx;
  height: 288rpx;
  line-height: 288rpx;
  text-align: center;
  font-size: 192rpx;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: scale(5);
  animation: scaleDown 1s linear forwards;
}

.question-box .clip4 {
  font-size: 102rpx;
}

.question-box .box {
  position: relative;
  height: 100%;
  opacity: 0;
  transform: translateY(-100%);
}

.question-box .music {
  position: absolute;
  bottom: 28rpx;
  right: 28rpx;
  width: 52rpx;
  height: 52rpx;
}

.question-box .music-on {
   /* background-image: url();  */
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  animation: rotate 2s linear infinite;
}

@-webkit-keyframes rotate {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

.question-box .music-off {
  /* background-image: url();  */
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
}

.question-box .tips {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  height: 10%;
  font-size: 34rpx;
  color: #fff000;
}
.keyboard-box {
  position: relative;
  width: 100%;
  height: 384rpx;
}

.keyboard-box .rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 42rpx;
}

.keyboard-box .rule.hide {
  display: none;
}

.keyboard-box .rule text {
  line-height: 84rpx;
}

.keyboard-box .rule text:first-child {
  font-size: 52rpx;
}

app.json 中需要注册 “requiredBackgroundModes”:[“audio”],