标签 jquery 下的文章

要在一个微信页面上实现录音功能，要求不复杂，一个录音按钮按下开始录音，松开停止（并上传保存）。

以为jq本身对移动端的交互事件支持和优化不够 一开始被 jQuery MOBILE 插件给误导了

研究了半天的 .on("tap") 点按和 .on("taphold")长按，但是没有找到手指离开屏幕的事件，而且触发的顺序总是很奇怪

而且jq mobile 很坑的一个绑定的 css 样式，会令我原有的页面样式搞的支离破碎。

绕回原点发现根本没有那么麻烦，用jq自己的 touchstart 和 touchend 不需要额外的插件。

$("#btn_rec").on("touchstart mousedown",function(){
    rec_start();
});

$("#btn_rec").on("touchend mouseup",function(){
    rec_end();
});

顺带追加一个关于微信 jssdk 录音功能备忘：

文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#23

没有难度，照搬代码就能实现上文的业务功能。

执行顺序分别是

  • wx.startRecord() 开始录音（第一次执行会询问授权）
  • wx.stopRecord() 停止录音 或 wx.onVoiceRecordEnd() 超60秒自动停止，获得本地资源id
  • wx.uploadVoice() 上传本地资源，换领微信服务端临时素材资源id (暂存3天)
  • 从微信服务器下载素材文件到本地或自有服务器：官方文档

需要备忘的是：wx.onVoiceRecordEnd() 只有录制达到60秒的时候自动停止才会触发。它并不是主动停止录音 stopRecord 会回调的事件。

总结：

百度害人呐~~

接了个H5小游戏的需求，用到一个第三方的开源代码，其中用到了名为 lufylegend 的canvas框架。

上手难度不高，唯一遇到的问题是发现它和 jQuery配合使用时 .click() .bind() 交互事件时无法触发。
看了控制台并没有报错，怀疑是 lufylegend 对象初始化时为了避免触摸拖拽点击等交互的一些用户行为冲突所以屏蔽了。

结论很简单就网上搜到了，确实如此，解决的办法也不难，只需要在js初始化控件的时候加上一行

LGlobal.preventDefault = false; //允许jquery点击事件

我的项目UI只有一屏高，不涉及滚屏滑动，所以设置前后没有感觉到对原来的游戏交互影响

问题解决。