疯狂点击点爆方式页面制作
疯狂点击为用户提供一个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()
}
})
}
})
},
})
效果图：
至此，疯狂点击和糖果点爆两种方式就完成了，下一章我们将进行从云端获取数据实现首页的讲解。