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

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

疯狂点击为用户提供一个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

上一篇:PHP第一课:开发环境配置


下一篇:html 简单的table样式