(1/3)从零开始,手搓一台与微信小程序交互的排队叫号机:概述与思路
项目需要,在门店摆一台排队叫号一体机,类似银行、医院、办证大厅、餐厅的那种。
这个没什么特别,本质是台一体式机身的触摸显示屏+热敏打印机。网上有很多成品的产品,价格一般在 3000 - 5000 之间。
需求特殊之处是要求和项目的小程序结合。是个会员制收费服务。要求排队取号的时候就从顾客的小程序账号上相应的计费,然后才吐出排队小票。
理了一下整个排队取票+叫号的业务流程和结构如下:
项目需要,在门店摆一台排队叫号一体机,类似银行、医院、办证大厅、餐厅的那种。
这个没什么特别,本质是台一体式机身的触摸显示屏+热敏打印机。网上有很多成品的产品,价格一般在 3000 - 5000 之间。
需求特殊之处是要求和项目的小程序结合。是个会员制收费服务。要求排队取号的时候就从顾客的小程序账号上相应的计费,然后才吐出排队小票。
理了一下整个排队取票+叫号的业务流程和结构如下:
H5项目用到微信JS-SDK拍照预览上传功能。
按 官方文档 思路实现,调用 wx.chooseImage()
测试阶段得到反馈安卓功能正常,iOS选择或拍照后不能显示预览图
解决办法也在同一份文档下,针对iOS机型额外做 wx.getLocalImgData()
即可以解决,并不难。
网上查资料绕了一下弯路,发现网络流传的资料不少有误。备忘一下,以防下次再次遇到。
给某个链接(按钮)旁边加上角标,有新消息提示时加上红点或直接标出有多少条新消息。
以前是大费周章 JS去控制 DOM 。脚本非常的臃肿
今天想了想用 ATTR() 来实现,把想法丢给 AI 让AI帮我把 CSS 和 JS 给完善了一下
要在一个微信页面上实现录音功能,要求不复杂,一个录音按钮按下开始录音,松开停止(并上传保存)。
以为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秒自动停止,获得本地资源idwx.uploadVoice()
上传本地资源,换领微信服务端临时素材资源id (暂存3天)需要备忘的是:wx.onVoiceRecordEnd()
只有录制达到60秒的时候自动停止才会触发。它并不是主动停止录音 stopRecord
会回调的事件。
总结:
网上查到的版本是上一版的,注册及导入素材之类很多操作要靠批处理和命令行实现和当前版本已经不一致。
所以还是对照着官方文档自己先摸索一下吧,感觉并不需要太深入研究高阶的功能。
初期目标:
大概这样便足够了(这个并不是本篇要完成的全部目标)