瘋狂點擊點爆方式頁面制作
瘋狂點擊為用戶提供一個60秒的按鈕點擊時間，同時點擊過程中有背景音樂诚纸，系統(tǒng)根據(jù)用戶點擊按鈕的此時來進(jìn)行熱度值的計算丈钙。
<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背景音頻管理器來進(jìn)行背景音樂的播放
在云開發(fā)控制臺存儲中新建背景音樂文件夾bg剪芥，上傳mp3格式背景音頻文件，復(fù)制File ID，
給管理器backgroundAudioManager設(shè)置好音頻標(biāo)題title煌贴，專輯名epname和音頻數(shù)據(jù)源src御板，當(dāng)src設(shè)置后音頻自動開始播放，這里我們直接將云存儲中音頻文件的File ID賦給src即可直接播放云端音頻文件牛郑。
const backgroundAudioManager = wx.getBackgroundAudioManager()
Page({
data: {
num: 0,
btext: '開始',
disabled: false,
dok: false
},
//如果頁面被卸載時被執(zhí)行
onUnload: function () {
backgroundAudioManager.stop();
},
//開始計數(shù)
start: function () {
//如果按鈕為開始怠肋，進(jìn)行開始的操作，否則跳轉(zhuǎn)頁面
if (this.data.btext == '開始') {
let ber = 60
backgroundAudioManager.title = '點擊'
backgroundAudioManager.epname = '點擊'
backgroundAudioManager.src = 'cloud://dbx-s55q1.6462-dbx-s55q1/bg/dianjif.mp3'
//開始技術(shù)后讓點擊變?yōu)閠rue可以記錄值
this.setData({
btext: ber,
disabled: true,
dok: true
})
//設(shè)置秒數(shù)減少定時器,減少完后讓點擊不再計數(shù)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 {
//記錄點擊數(shù)量值到本地
wx.setStorageSync('wnum', this.data.num)
wx.navigateTo({
url: '../selectdok/selectdok'
})
}
},
//點擊,當(dāng)開始后才記錄點擊次數(shù)
dianji: function () {
let n = this.data.num
if (this.data.dok) {
n++
this.setData({
num: n
})
}
},
onLoad: function () {
wx.setNavigationBarTitle({
title: '瘋狂點擊'
})
}
})
此時我們進(jìn)行測試時會發(fā)現(xiàn)背景音頻在播放時淹朋，Console中報這樣一個錯誤
我們要在app.json中加下面這條語句笙各，通過requiredBackgroundModes申明需要后臺運行的能力，audio后臺音樂播放
瘋狂點擊確認(rèn)頁面制作
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糖果點爆頁面顯示用戶數(shù)量础芍，用戶輸入要使用的糖果數(shù)杈抢，系統(tǒng)根據(jù)糖果數(shù)量提供熱度值。
selectt.wxml
<view class="the_header">
<text>糖果點爆</text>
<image src="/images/fencun.png"></image>
</view>
<view class="button1">
<view class="button1_tang">
<label>
糖果數(shù)量：<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>
糖果點爆操作中在用戶使用了糖果后仑性，需要使用一個云函數(shù)來修改用戶的糖果數(shù)量惶楼，新建一個updateSweet云函數(shù)
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//聲明數(shù)據(jù)庫
const db = cloud.database()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
//取得傳過來的參數(shù)
var userSweet = event.userSweet, openId = event.openId;
//云函數(shù)，更新
try {
return await db.collection('users').where({
_openid: openId
}).update({
data: {
userSweet: userSweet
},
success: res => {
console.log('云函數(shù)成功')
},
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
//調(diào)用云函數(shù)诊杆，修改糖果數(shù)量
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
//調(diào)用云函數(shù)歼捐，修改糖果數(shù)量
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()
}
})
}
})
},
})
效果圖：
至此，瘋狂點擊和糖果點爆兩種方式就完成了晨汹，下一章我們將進(jìn)行從云端獲取數(shù)據(jù)實現(xiàn)首頁的講解豹储。
