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所示。
■图10-23 第10章阶段案例最终效果图
本案例主要为了演示通过对加速度传感器监听确认用户进行了摇一摇功能，顺便复习了如何触发手机振动的功能。该案例全部都是上上签，表达了对各位读者朋友们的祝愿。开发者如有兴趣还可继续添加更多类型的签进去。