当前位置：首页 > news >正文

微信小程序开发案例 | 幸运抽签小程序（下）

news 2025/11/12 5:27:02

01、逻辑实现

1 首页逻辑

首页主要功能就是监听用户的摇一摇动作，然后随机抽签后传递给结果页去显示。

1）监听摇一摇动作

在index.js中自带的生命周期函数onLoad(options)中追加对摇一摇动作的监听，一旦监听到用户的相关动作就让手机较长时间振动。

index.js相关代码如下：

1. // index.js
2. Page({
3. …,
4. /**
5. * 生命周期函数--监听页面加载
6. */
7. onLoad: function (options) {
8. // 监听传感器变化
9. wx.onAccelerometerChange(res => {
10. // 任意一个方向超过指定值（数字越大需要摇的力度越大些）
11. if (res.x > 1 || res.y > 1 || res.z > 1) {
12. // 让手机振动
13. wx.vibrateLong()
14. }
15. })
16. },
17. …18. }

第9行使用了wx.onAccelerometerChange()来监听加速度传感器的变化，根据变化幅度来判断是否发生了“摇一摇”动作；第13行使用了wx.vibrateLong()来让手机较长时间的振动。

注：微信开发工具暂时不支持监听振动幅度超过1的摇一摇，请开发者用真机预览或调试来实现，或临时把数值调低例如0.1进行电脑端测试。

2）抽签并跳转结果页

因为一共6张幸运签，因此可以在抽签时利用Math.random()生成随机数0-5之间任意一个数字，并将此数字传递给结果页。

index.js相关代码修改如下：

1. // index.js
2. Page({
3. …,
4. /**
5. * 生命周期函数--监听页面加载
6. */
7. onLoad: function (options) {
8. // 监听传感器变化
9. wx.onAccelerometerChange(res => {
10. // 任意一个方向超过指定值（数字越大需要摇的力度越大些）
11. if (res.x > 1 || res.y > 1 || res.z > 1) {
12. // 让手机振动
13. wx.vibrateLong()
14. 
15. // 随机产生一个数字
16. let x = Math.floor(Math.random() * 6)
17. // 打开新页面
18. wx.reLaunch({
19. url: '../result/result?x=' + x,
20. })
21. }
22. 
23. })
24. },
25. …26. }

上述代码中第16行Math.random()*6可以生成一个[0.0,6.0)之间的小数，因此还需要用Math.floor()去尾法来保留整数部分，这样就可以得到一个[0,5]之间的整数了。

这里第19行用了wx.reLaunch()打开新页面，这表示关闭其它所有页面只打开结果页，以免首页还在进行摇一摇监听。（注：由于只有两页，用wx.redirectTo()也是可以的，这表示直接在当前页面重定向到结果页，此时首页也一样关掉了。）

最后记得在result.js自带的生命周期函数onUnload()里面停止对摇一摇动作的监听。

index.js相关代码修改如下：

1. // index.js
2. Page({
3. …,
4. /**
5. * 生命周期函数--监听页面卸载
6. */
7. onUnload: function () {
8. // 停止监听加速传感器
9. wx.offAccelerometerChange()
10. }11. }

当已经抽完签准备打开结果页时就可以停止监听传感器了。

此时首页逻辑就已全部完成。

2 结果页逻辑

1）显示指定的幸运签

修改result.wxml代码，将需要显示的幸运签图片名称改为变量方便更新。

result.wxml相关代码修改如下：

1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 抽签结果卡片 -->
4. <image src="/images/cards/{{cardName}}.jpg" mode="widthFix"></image>
5. <!-- 3 按钮 -->
6. <button bindtap="backToHome">再来一次</button>
7. </view>

这样就和之前设计完成的效果保持一致了。

在result.js顶部记录所有抽签卡片名称，并在生命周期函数onLoad(options)中接收首页传递过来的参数x。

result.js相关代码更新如下：

1. // result.js
2. Page({
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. cardName: 'xingfu'
8. },
9. …10. }

此时已经可以和首页连贯起来测试抽签功能了。

由于摇一摇功能需要用真机预览或调试，开发者如果不方便来回切换可以顶部“普通编译”处新增结果页的编译模式。参数配置可参考图10-21。

■ 图10-21 结果页编译模式配置参数示例

注：这里的x取值可以是[0,5]之间任意整数。

最终效果如图10-22所示。

■ 图10-22 结果页显示指定幸运签

2）返回首页

修改result.wxml代码，为按键追加自定义点击事件backToHome。

result.wxml相关代码修改如下：

1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 抽签结果卡片 -->
4. <image src="/images/cards/{{cardName}}.jpg" mode="widthFix"></image>
5. <!-- 3 按钮 -->
6. <button bindtap="backToHome">再来一次</button>
7. </view>

在result.js中追加自定义函数backToHome，相关代码如下：

1. // result.js
2. Page({
3. …,
4. /**
5. * 自定义函数--回到首页
6. */
7. backToHome: function () {
8. // 关闭所有页面，只打开首页
9. wx.reLaunch({
10. url: '../index/index',
11. })
12. },
13. …14. }

至此整个阶段案例就完成了，完整运行效果如图10-23所示。