微信小程序开发案例 | 幸运转盘抽奖小程序（下）
阶段案例-幸运转盘抽奖小程序
01、逻辑实现
1 首页逻辑
首页主要功能就是监听用户点击按钮动作，然后随机抽奖后进行大转盘旋转动画5秒，最后传递中奖信息给结果页去显示。
1）点击“Start”按钮开始抽奖
首先要为转盘添加动画属性、并为按钮追加点击事件，index.wxml代码修改如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 转盘区域 -->
4. <view class="turntableBox">
5. <!-- 2-1 转盘 -->
6. <image class="turntable" src="/images/turntable/turntable.png" animation="{{ani}}"></image>
7. <!-- 2-2 指针 -->
8. <image class="arrow" src="/images/turntable/go.png"></image>
9. </view>
10.
11. <!-- 3 按钮 -->
12. <button bindtap="startGame">Start</button>
13. </view>1. // index.js
2. Page({
3. …,
4. /**
5. * 自定义函数--开始抽奖
6. */
7. startGame: function () {
8. // 随机生成抽奖结果（0-7之间的整数）
9. let x = Math.floor(Math.random() * 8)
10.
11. // 创建动画对象01
12. let ani01 = wx.createAnimation({
13. timingFunction: 'ease',//先慢，中间快，最后又慢回去
14. duration: 5000, //持续时间5秒（1000ms=1s）
15. })
16. // 描述动画01：先转5圈再转到正确的角度
17. ani01.rotate(360 * 5 + 45 * x).step()
18. // 导出动画01至转盘组件的动画属性
19. this.setData({ ani: ani01.export() })
20.
21. // 定时器5秒后跳转结果页
22. setTimeout(() => {
23. wx.navigateTo({
24. url: '../result/result?x=' + x,
25. })
26. }, 5000)
27. },
28. …29. }
■ 图11-24 抽奖过程功能实现
实际上还存在一个问题，按钮如果一直被用户点击会导致重复触发大转盘旋转动作和重复多次抽奖。下一节将介绍如何通过禁止按钮重复点击来解决此问题。
2）禁止按钮重复点击
为了防止按钮被多次点击导致错误，给其追加disable属性，index.wxml代码修改如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. …
4. <!-- 3 按钮 -->
5. <button disabled="{{isDisabled}}" bindtap="startGame">Start</button>
6. </view>1. // index.js
2. Page({
3. …,
4. /**
5. * 页面的初始数据
6. */
7. data: {
8. isDisabled: false //是否禁用按钮
9. },
10. …11. }index.js相关代码修改如下：
1. // index.js
2. Page({
3. …,
4. /**
5. * 自定义函数--开始抽奖
6. */
7. startGame: function () {
8. // 禁止按钮重复点击
9. this.setData({
10. isDisabled: true
11. })
12. …
13. },
14. …15. }这样就不怕用户重复多次点击按钮了，效果如下图所示。
■ 图11-25 禁止按钮重复点击功能实现
3）还原初始状态
当用户在结果页点击“重新开始”按钮时，需要回到首页进行第二轮抽奖。此时如果按钮还是保持禁用状态、转盘还是保持上一次的抽奖结果就不太合适了。
因此需要找到index.js文件的onShow()函数，将按钮和转盘都还原。
index.js的onShow()函数代码修改如下：
1. // index.js
2. Page({
3. …,
4. /**
5. * 生命周期函数--监听页面显示
6. */
7. onShow: function () {
8. // 重新允许按钮点击
9. this.setData({
10. isDisabled: false
11. })
12. // 创建动画对象02
13. let ani02 = wx.createAnimation({
14. duration: 5,
15. timingFunction: 'linear',
16. })
17. // 描述动画02：旋转0°=让转盘恢复初始位置
18. ani02.rotate(0).step()
19. // 导出动画02至转盘组件的动画属性
20. this.setData({
21. ani: ani02.export()
22. })
23. },
24. …25. })此时首页逻辑就全部完成了。
2 结果页逻辑
1）设置抽奖奖项数据
在utils的data.js文件中新增奖项数据，并提供给结果页result.js使用。
utils/data.js代码如下：
1. // 中奖数据
2. const rewards = [
3. {
4. text:'15积分',
5. filename:'15jifen.png'
6. },
7. {
8. text:'25积分',
9. filename:'25jifen.png'
10. },
11. {
12. text:'谢谢参与',
13. filename:'xiexie.png'
14. },
15. {
16. text:'25钻石',
17. filename:'25zuan.png'
18. },
19. {
20. text:'20元代金券',
21. filename:'20yuan.png'
22. },
23. {
24. text:'15积分',
25. filename:'15jifen.png'
26. },
27. {
28. text:'100元代金券',
29. filename:'100yuan.png'
30. },
31. {
32. text:'10钻石',
33. filename:'10zuan.png'
34. }
35. ]
36.
37. // 导出公共数据
38. module.exports = {
39. rewards:rewards40. }● text：中奖奖项的文字描述；
● filename：中奖奖项的图片文件名。
然后在结果页result.js顶部引用：
1. // pages/result/result.js
2. // 导入公共数据
3. const { rewards } = require('../../utils/data')4. …2) 显示指定的中奖结果
修改result.wxml代码，将需要显示的中奖图片和文字改为变量方便更新。
result.wxml相关代码修改如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 中奖图片 -->
4. <image src="/images/rewards/{{reward.filename}}" mode="widthFix"></image>
5. <!-- 3 中奖文字 -->
6. <text>{{reward.text}}</text>
7. …
8. </view>在result.js的data属性中先给予初始值，相关代码如下：
1. // result.js
2. Page({
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. reward:{
8. filename:'xiexie.png',
9. text:'谢谢参与'
10. }
11. },
12. …13. }这样就和之前设计完成的效果保持一致了。
在result.js的生命周期函数onLoad(options)中接收首页传递过来的参数x。
result.js相关代码更新如下：
1. // result.js
2. …
3. Page({
4. …,
5. /**
6. * 生命周期函数--监听页面加载
7. */
8. onLoad: function (options) {
9. // 获取参数x
10. let x = options.x
11. // 中奖结果更新到页面上
12. this.setData({
13. reward: rewards[x]
14. })
15. },
16. …17. }开发者如果不方便来回切换可以顶部“普通编译”处新增结果页的编译模式。参数配置可参考图11-26。
■ 图11-26 结果页编译模式配置参数示例
注：这里的x取值可以是[0,7]之间任意整数。
最终效果如图11-27所示。
■ 图11-27 结果页显示指定中奖结果
3）返回首页
修改result.wxml代码，为按键追加自定义点击事件backToHome。
result.wxml相关代码修改如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 中奖图片（…内容略…） -->
4. <!-- 3 中奖文字（…内容略…） -->
5.
6. <!-- 4 返回按钮 -->
7. <button bindtap="backToHome">重新抽奖</button>
8. </view>1. // result.js
2. Page({
3. …,
4. /**
5. * 自定义函数--返回首页
6. */
7. backToHome: function () {
8. wx.navigateBack()
9. },
10. …11. }
■ 图11-28 第11章阶段案例最终效果图
- 点赞
- 收藏
- 关注作者
评论（0）