实现振动效果(微信小程序)

社区服务
高级搜索
猴岛论坛电脑百科实现振动效果(微信小程序)
发帖 回复
倒序阅读 最近浏览的帖子最近浏览的版块
4个回复

[技术小组]实现振动效果(微信小程序)

楼层直达
算账

ZxID:29357411

等级: 版主
配偶: 浓酒与歌

举报 只看楼主 使用道具 楼主   发表于: 2023-08-17 0









一、微信官方文档资料

官方地址:https://developers.weixin.qq.com/miniprogram/dev/api/device/vibrate/wx.vibrateShort.html



1、wx.vibrateShort(Object object)
  • 基础库 1.2.0 开始支持,低版本需做兼容处理。
    以 Promise 风格 调用:支持
    小程序插件:支持,需要小程序基础库版本不低于 1.9.6

功能描述:

  使手机发生较短时间的振动(15 ms)。仅在 iPhone 7 / 7 Plus 以上及 Android 机型生效

参数:



案例说明:

wxml代码

  1. <button bindtap="vibrateShortTap">振动(15ms)</button>


js代码

  1. vibrateShortTap: function () {
  2.     // 使手机振动15ms
  3.     wx.vibrateShort();
  4.   },


2、wx.vibrateLong(Object object)
  • 基础库 1.2.0 开始支持,低版本需做兼容处理。
    以 Promise 风格 调用:支持
    小程序插件:支持,需要小程序基础库版本不低于 1.9.6

功能描述:

  使手机发生较长时间的振动(400 ms)

参数:

  1. 属性        类型        默认值        必填        说明
  2. success        function                否        接口调用成功的回调函数
  3. fail        function                否        接口调用失败的回调函数
  4. complete        function                否        接口调用结束的回调函数(调用成功、失败都会执行)


案例说明:

wxml代码

  1. <button bindtap="vibrateLongTap">振动(400ms)</button>


js代码

  1. vibrateLongTap: function () {
  2.     // 使手机振动400ms
  3.     wx.vibrateLong();
  4.   },



二、手机振动应用场景(以 wx.vibrateLong() 方法为例)
1、如何实现一直震动?

  • 要实现一直震动的效果,可以使用 wx.vibrateLong() 方法以一定的时间间隔重复调用自身来实现。


以下是一个示例代码,实现一直震动的效果:

  1. function vibrateContinuously() {
  2.   wx.vibrateLong({
  3.     success: function () {
  4.       // 在成功回调中递归调用自身,以实现震动的连续效果
  5.       vibrateContinuously();
  6.     },
  7.     fail: function (err) {
  8.       console.error('震动调用失败:', err);
  9.     }
  10.   });
  11. }
  12. // 调用函数开始连续震动
  13. vibrateContinuously();


在上述代码中,我们定义了一个名为 vibrateContinuously 的函数,在该函数中调用 wx.vibrateLong() 来触发长震动。在成功回调函数中,我们使用递归的方式再次调用 vibrateContinuously() 函数,从而实现连续震动的效果。

2、如何关闭连续震动?
  • 要关闭连续震动,需要使用 wx.stopVibrate() 方法来停止当前正在进行的震动。以下是一个示例代码,用于关闭连续震动


  1. // 定义标记用于判断是否要停止震动
  2. let shouldStopVibrating = false;
  3. function vibrateContinuously() {
  4.   // 检查是否需要停止震动
  5.   if (shouldStopVibrating) {
  6.     return; // 停止震动
  7.   }
  8.   
  9.   wx.vibrateLong({
  10.     success: function() {
  11.       // 在成功回调中递归调用自身,以实现连续震动的效果
  12.       vibrateContinuously();
  13.     },
  14.     fail: function(err) {
  15.       console.error('震动调用失败:', err);
  16.     }
  17.   });
  18. }
  19. // 调用函数开始连续震动
  20. vibrateContinuously();
  21. // 通过设置 shouldStopVibrating 为 true 来停止震动
  22. shouldStopVibrating = true;
  23. // 停止当前正在进行的震动
  24. wx.stopVibrate();


在上述代码中,我们使用了一个名为 shouldStopVibrating 的标记变量,通过将其设置为 true 来停止震动。然后在递归函数 vibrateContinuously 中添加条件判断,如果 shouldStopVibrating 变量为 true,就直接退出函数,从而停止连续震动。最后,调用 wx.stopVibrate() 方法来停止当前正在进行的震动。

  通过设置 shouldStopVibrating 变量为 true 可以立即停止震动,而调用 wx.stopVibrate() 方法可以停止正在进行的震动。根据你的具体需求,可以选择其中的一种或两种方式来关闭连续震动。





本帖de评分: 1 条评分 DB +10
DB+10 2023-08-18

优秀文章

老赵.

ZxID:7272

等级: 版主
配偶: 大小姐 
啊?

举报 只看该作者 沙发   发表于: 2023-08-18 0
哇,很复杂不学了
归遇

ZxID:5231

等级: 版主

举报 只看该作者 板凳   发表于: 2023-08-18 0
感谢分享
Null.

ZxID:171717

等级: 版主
配偶: 金度延
接电脑组装配置咨询  IP查定位等

举报 只看该作者 地板   发表于: 2023-08-18 0
优秀文章
晚安

ZxID:63131

等级: 版主
和平精英板块欢迎您
举报 只看该作者 4楼  发表于: 2023-08-19 0
我这种人不适合
« 返回列表
发帖 回复