分类 前端 下的文章

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

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

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

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

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

$("#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 会回调的事件。

总结:

百度害人呐~~

网上查到的版本是上一版的,注册及导入素材之类很多操作要靠批处理和命令行实现和当前版本已经不一致。
所以还是对照着官方文档自己先摸索一下吧,感觉并不需要太深入研究高阶的功能。

初期目标:

  1. 能批量导入场景,后期能追加删除场景
  2. 能自定义导航工具条的部分样式
  3. 能添加和编辑自定义的热点(hotspot)把众多场景链接起来

大概这样便足够了(这个并不是本篇要完成的全部目标)


- 阅读剩余部分 -

自从网易博客玩球后,改用 Typecho 写日志已经有一段时间。可能我要求比较低,一直满意。

心血来潮想加个日历插件在右侧栏上, 搜了下现有的插件emmm ...只有一个2016年的版本,功能比较简陋就真的只显示个月历而已。
眼看博客程序已经3年没有更新,估计是指望不上别人自己动手改造一个。
看了一下 Typecho的插件开发说明,嫌麻烦。还是按自己熟悉的粗暴手法来强行嫁接吧!

最终效果如图(如果没出错的话应该在页面右边已经看到实物了)

QQ截图20201010034140.png

我要实现的功能不多

  1. 要能显示月历,能前后翻月
  2. 样式要简洁,不突兀,与界面低调融合在一起
  3. 要标记有博客的日期,点上去的话要切换到当天
  4. 如果从下面按月归档的链接点进去的话,日历要跟随切换到当前月份

想了下,我用过的layDate日历插件应该能满足这个需求,也是一个已经3、4年没有更新的项目正好凑一对。
下面开干!




- 阅读剩余部分 -

用chrome从甲方提供的网页上保存了一批图片素材用于制作H5活动页。发布后反馈iOS上部分图片不显示,自己测试确实如此,找微信客服也抓头没办法解决只给了一些常规套路让我检查是不是文件太大,路径有中文、文件名大小写之类的问题。

最离谱的是 图片url直接在微信里也是打不开的,用图像处理软件处理过(tinypng压缩)也还是不显示。但是在安卓和PC端的开发工具上显示则正常。

情况实在太诡异,最后用文本工具直接打开图片,看到头部 RIFF ... WEBPVP8 !!! 恍然大悟

QQ截图20200928151342.png

Chrome保存的时候帮我转换成了 webp?!

试试直接在 Safari 里打开有问题的素材url ,果然是iOS自身不支持webp,也不能显示。

解决办法无他,webp-> jpeg/png 替换掉原素材,完事!