[小程序]你也要开发小程序?交互提示声少不了(2020/5/6第一次更新)

   日期:2020-05-07     浏览:89    评论:0    
核心提示:你也要开发小程序?交互细节特色少不了听说你准备开发小程序,这套细节特色送给你目录:1.来点交互的提示javascript

你也要开发小程序?交互细节特色少不了

听说你准备开发小程序,这套细节特色送给你

目录:

1.来点交互的music?
2.来点交互的震动动?(待更)

1.来点交互的music?


  如果你是一个苹果用户的话,你一定会沉浸于哪华丽的锁屏/开屏/支付声,如果不是的话,您可能也对转账收款声,或者是百度云下载完成的声音,更或许是钉钉的声音印象深刻

所以对我们来说,一个好的产品的声音交互细节少不了

本期的分享第一部分就是教你们如何设置一个交互的提示音来提高用户的好感度
第一步:上资源:(百度劝退?不存在的,来个蓝奏云)
点击上车


第二步:上代码展示
(实际点击成果怎么展示呢这声音。。。。):
以一个点击按钮为例,
关键是讲解这个APIwx.createInnerAudioContext()的调用,微信文档里实在是坑呀,光给你API没有说明,真让人心酸
下面是JavaScript的代码

#Javascript  //这是给代码强调呀别复杂进去呀
//By 以太
const testAudio=wx.createInnerAudioContext()
testAudio:function(e){
    testAudio.src='/images/111.ogg'
    testAudio.play()
    console.log(e)
  },

第三步:讲解

首先,讲解一下这个功能的涉及到的事件问题

点击查看官方对事件分类的介绍
在这里我选择的是bind:touchend即手指触摸动作结束后响应

然后再回到上面的JavaScript部分,先是
const testAudio=wx.createInnerAudioContext()了一下,个人习惯问题,可以忽略直接在下面调用然后就是用一个.再来一个src表示地址,这里有个bug,好像是只能用绝对路径哦,用play()表示开始播放。


第四步:思维发散
上面只是一个很简单的小例子,我们可以发散一下思维,怎么用才能让用户用你的产品用的开心呢?

场景1:支付完成后,让用户感受到交易的实际存在
场景2:代办事项完成后,点击勾上完成任务同时来一个完成提 示声
场景3:某项操作成功/出错
场景4:完成一个input后来个在界面展示出表单后再出现提示音·····················································································

  而有些人可能想要实现一些复杂的操作,比如说完成一个input后来个在界面展示出表单后再出现提示音,哪就把这个放在那个表单展示的后面区域里,后浪们,你能看到这里,肯定是有想法的,一定已经想过怎么操作了,所以就动手亲自试试看吧,相信自己可以做到的,我会慢慢更新这个交互提示声的博客的,欢迎各位小伙伴的批评指正与一同学习。

                                      不要脸的我想要你们的一个来支持一下我的创作

2.来点交互的震动动?(待更)

能不能更新就看大家能不能催催我了,我还要很多想法在想法库里,但是都还没分享出来











                        **see you again**

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服