第四章 “我要点爆”微信小程序云开发之疯狂点击与糖果点爆页面制作

疯狂点击点爆方式页面制作

疯狂点击为用户提供一个60秒的按钮点击时间，同时点击过程中有背景音乐，系统根据用户点击按钮的此时来进行热度值的计算。

<view class="the_header">
  <text>疯狂点击</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="button1">
  <button hover-start-time='100' hover-stay-time='1' bindtap='dianji'><image src="/images/button1.png"></image></button>
</view>
<view class="selectd_button">
  <button disabled="{{disabled}}" bindtap="start">{{btext}}</button>
</view>

背景音乐使用：通过BackgroundAudioManager背景音频管理器来进行背景音乐的播放
在云开发控制台存储中新建背景音乐文件夹bg，上传mp3格式背景音频文件，复制File ID，
给管理器backgroundAudioManager设置好音频标题title，专辑名epname和音频数据源src，当src设置后音频自动开始播放，这里我们直接将云存储中音频文件的File ID赋给src即可直接播放云端音频文件。

const backgroundAudioManager = wx.getBackgroundAudioManager()
Page({
  data: {
    num: 0,
    btext: '开始',
    disabled: false,
    dok: false
  },
  //如果页面被卸载时被执行
  onUnload: function () {
    backgroundAudioManager.stop();
  },
  //开始计数
  start: function () {
    //如果按钮为开始，进行开始的操作，否则跳转页面
    if (this.data.btext == '开始') {
      let ber = 60
      backgroundAudioManager.title = '点击'
      backgroundAudioManager.epname = '点击'
      backgroundAudioManager.src = 'cloud://dbx-s55q1.6462-dbx-s55q1/bg/dianjif.mp3'
      //开始技术后让点击变为true可以记录值
      this.setData({
        btext: ber,
        disabled: true,
        dok: true
      })
      //设置秒数减少定时器,减少完后让点击不再计数dok:false
      let dian = setInterval(() => {
        ber--
        if (ber == -1) {
          backgroundAudioManager.stop();
          this.setData({
            btext: '下一步',
            disabled: false,
            dok: false
          })
          clearInterval(dian)
        } else {
          this.setData({
            btext: ber
          })
        }
      }, 1000)
    } else {
      //记录点击数量值到本地
      wx.setStorageSync('wnum', this.data.num)
      wx.navigateTo({
        url: '../selectdok/selectdok'
      })
    }
  },
  //点击,当开始后才记录点击次数
  dianji: function () {
    let n = this.data.num
    if (this.data.dok) {
      n++
      this.setData({
        num: n
      })
    }
  },
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '疯狂点击'
    })
  }
})

此时我们进行测试时会发现背景音频在播放时，Console中报这样一个错误

我们要在app.json中加下面这条语句，通过requiredBackgroundModes申明需要后台运行的能力，audio后台音乐播放

疯狂点击确认页面制作

selectdok.wxml

<view class="the_header">
  <text>疯狂点击</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="button1">
  <image src="/images/button2.png"></image>
  <text>爆炸热度：{{wtemperature}}</text>
</view>
<view class="selectd_button">
  <button bindtap="add">确定</button>
</view>
<view class="the_btn">
    <button bindtap="seal">封存</button>
</view>

selectdok.js

var util = require('../../utils/utils.js');

const db = wx.cloud.database()
const _ = db.command;
Page({
  data: {
    wtemperature: 0
  },
  add: function () {
    wx.showLoading({
      title: '',
      mask: true
    })
    var wy = wx.getStorageSync("wy")
    if (wy == "w") {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        avaterUrl: wx.getStorageSync('avater'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        wtext: wx.getStorageSync('wtext'),
        wmood: wx.getStorageSync('wmood'),
        wway: wx.getStorageSync('wway'),
        temperature: wx.getStorageSync('wnum') * 10,
        wtime: util.formatTime(new Date())
      }
    } else {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        filename: wx.getStorageSync('filename'),
        fileIDy: wx.getStorageSync('fileIDy'),
        ymood: wx.getStorageSync('ymood'),
        yway: wx.getStorageSync('wway'),
        temperature: wx.getStorageSync('wnum') * 10,
        ytime: util.formatTime(new Date())
      }
    }
    db.collection('bao').add({
      data: data,
      success: res => {
        console.log('bao存入成功')
        wx.showToast({
          title: '点爆成功',
        })
        setTimeout(() => {
          wx.navigateTo({
            url: '../selectok/selectok'
          })
        }, 1000)
        wx.hideLoading()
      }
    })
  },
  //封存
  seal: function () {
    wx.showLoading({
      title: '',
      mask: true
    })
    var wy = wx.getStorageSync("wy")
    if (wy == "w") {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        avaterUrl: wx.getStorageSync('avater'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        wtext: wx.getStorageSync('wtext'),
        wmood: wx.getStorageSync('wmood'),
        wway: wx.getStorageSync('wway'),
        temperature: wx.getStorageSync('wnum') * 10,
        wtime: util.formatTime(new Date())
      }
    } else {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        filename: wx.getStorageSync('filename'),
        fileIDy: wx.getStorageSync('fileIDy'),
        ymood: wx.getStorageSync('ymood'),
        yway: wx.getStorageSync('wway'),
        temperature: wx.getStorageSync('wnum') * 10,
        ytime: util.formatTime(new Date())
      }
    }
    db.collection('seal').add({
      data: data,
      success: res => {
        console.log('seal存入成功')
        wx.showToast({
          title: '点爆成功',
        })
        setTimeout(() => {
          wx.navigateTo({
            url: '../selectok/selectok'
          })
        }, 1000)
        wx.hideLoading()
      }
    })
  },
  onLoad: function () {
    let temperature = wx.getStorageSync('wnum') * 10
    this.setData({
      wtemperature: temperature
    })
  }
})

效果图：

制作糖果点爆页面

app.json中增加selectt糖果点爆页面显示用户数量，用户输入要使用的糖果数，系统根据糖果数量提供热度值。
selectt.wxml

<view class="the_header">
  <text>糖果点爆</text>
  <image src="/images/fencun.png"></image>
</view>
<view class="button1">
  <view class="button1_tang">
    <label>
    糖果数量：<input type="number" value="{{t}}" bindinput="setSweet" maxlength="{{3}}"/>
    </label>
    <text>拥有糖果：{{userSweet}}</text>
  </view>
  <text>爆炸热度：{{wnum}}</text>
</view>
<view class="selectd_button">
  <button bindtap="add">确定</button>
</view>
<view class="the_btn">
    <button bindtap="seal">封存</button>
</view>

糖果点爆操作中在用户使用了糖果后，需要使用一个云函数来修改用户的糖果数量，新建一个updateSweet云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//声明数据库
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  //取得传过来的参数
  var userSweet = event.userSweet, openId = event.openId;
  //云函数，更新
  try {
    return await db.collection('users').where({
      _openid: openId
    }).update({
      data: {
        userSweet: userSweet
      },
      success: res => {
        console.log('云函数成功')
      },
      fail: e => {
        console.error(e)
      }
    })
  } catch (e) {
    console.error(e)
  }
}

selectt.js完整代码

var util = require('../../utils/utils.js');
const db = wx.cloud.database()
const _ = db.command;
Page({
  data: {
    userSweet: 0,
    wnum: 0,
    t: 0
  },
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '糖果点爆'
    })
    db.collection('users').where({
      _openid: wx.getStorageSync('openId')
    }).get({
      success: res => {
        this.setData({
          userSweet: res.data[0].userSweet
        })
      },
      fail: console.error
    })
  },
  setSweet: function (event) {
    var sweet = event.detail.value
    this.setData({
      wnum: sweet * 100,
      t: sweet
    })
  },
  add: function () {
    wx.showLoading({
      title: '',
      mask: true
    })
    //判断糖果输入
    if (this.data.t == 0 || this.data.t > this.data.userSweet) {
      wx.showToast({
        title: '糖糖有误',
      })
      this.setData({
        t: 0,
        wnum: 0
      })
      return
    }
    var wy = wx.getStorageSync("wy")
    if (wy == "w") {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        wtext: wx.getStorageSync('wtext'),
        wmood: wx.getStorageSync('wmood'),
        wway: wx.getStorageSync('wway'),
        temperature: this.data.wnum,
        wtime: util.formatTime(new Date())
      }
    } else {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        filename: wx.getStorageSync('filename'),
        fileIDy: wx.getStorageSync('fileIDy'),
        ymood: wx.getStorageSync('ymood'),
        yway: wx.getStorageSync('wway'),
        temperature: this.data.wnum,
        wtime: util.formatTime(new Date())
      }
    }
    db.collection('bao').add({
      data: data,
      success: res => {
        console.log('bao存入成功')
        var newSweet = this.data.userSweet - this.data.t
        //调用云函数，修改糖果数量
        wx.cloud.callFunction({
          name: 'updateSweet',
          data: {
            openId: wx.getStorageSync('openId'),
            userSweet: newSweet
          },
          success: res => {
            wx.showToast({
              title: '点爆成功',
            })
            setTimeout(() => {
              wx.navigateTo({
                url: '../success/success'
              })
            }, 1000)
            wx.hideLoading()
          }
        })
      }
    })
  },
  seal: function () {
    //判断糖果输入
    if (this.data.t == 0 || this.data.t > this.data.userSweet) {
      wx.showToast({
        title: '糖糖有误',
      })
      this.setData({
        t: 0,
        wnum: 0
      })
      return
    }
    wx.showLoading({
      title: '',
      mask: true
    })
    var wy = wx.getStorageSync("wy")
    if (wy == "w") {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        wtext: wx.getStorageSync('wtext'),
        wmood: wx.getStorageSync('wmood'),
        wway: wx.getStorageSync('wway'),
        temperature: this.data.wnum,
        wtime: util.formatTime(new Date())
      }
    } else {
      var data = {
        userId: wx.getStorageSync('userId'),
        openId: wx.getStorageSync('openId'),
        username: wx.getStorageSync('username'),
        gender: wx.getStorageSync('gender'),
        province: wx.getStorageSync('province'),
        avaterUrl: wx.getStorageSync('avater'),
        filename: wx.getStorageSync('filename'),
        fileIDy: wx.getStorageSync('fileIDy'),
        ymood: wx.getStorageSync('ymood'),
        yway: wx.getStorageSync('wway'),
        temperature: this.data.wnum,
        wtime: util.formatTime(new Date())
      }
    }
    db.collection('seal').add({
      data: data,
      success: res => {
        console.log('seal存入成功')
        var newSweet = this.data.userSweet - this.data.t
        //调用云函数，修改糖果数量
        wx.cloud.callFunction({
          name: 'updateSweet',
          data: {
            openId: wx.getStorageSync('openId'),
            userSweet: newSweet
          },
          success: res => {
            wx.showToast({
              title: '点爆成功',
            })
            setTimeout(() => {
              wx.navigateTo({
                url: '../selectok/selectok'
              })
            }, 1000)
            wx.hideLoading()
          }
        })
      }
    })
  },
})

效果图：

至此，疯狂点击和糖果点爆两种方式就完成了，下一章我们将进行从云端获取数据实现首页的讲解。

项目源码：https://github.com/xiedong2016/dbx