第四章 “我要点爆”微信小程序云开发之疯狂点击与糖果点爆页面制作
2019-05-26 09:36
1506 查看
疯狂点击点爆方式页面制作
疯狂点击为用户提供一个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
相关文章推荐
- 我要点爆”微信小程序云开发之项目建立与我的页面功能实现
- 微信小程序开发(5)-新闻页面制作之banner
- 微信小程序开发-点击事件,获取元素id,页面传值 & 获取js里的数据
- 微信小程序开发2-点击列表中的某一行跳转到新的页面显示该列的详细信息
- 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现
- 微信小程序开发 简单的点击页面跳转,加载别的页面(bindtap事件)
- 【原创】前端开发人员如何制作微信小程序模板
- 微信开发入门第四章:文章列表页面
- 微信小程序实战篇-分类页面制作
- 微信小程序开发 [00] 写在前面的话,疯狂唠唠
- 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
- 微信小程序前端开发框架,快速自动生成前端页面
- 社群团购小程序 平邑微信小程序app开发 淘宝网店制作
- 个人开通附近小程序,个人开发制作微信小程序
- 微信小程序开发之页面分享 onShareAppMessage 分享参数用处
- 微信小程序开发阅读&电影小程序之(2)——阅读页面轮播图实现
- 微信小程序开发页面跳转教程
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
- 微信小程序开发(四) - 页面配置 - json 文件
- 微信小程序实战之登录页面制作(5)