听说你准备开发小程序,这套细节特色送给你 所以对我们来说,一个好的产品的声音交互细节少不了 本期的第一部分就是教你们 第二步:上代码展示 第三步:讲解 首先,讲解一下这个功能的涉及到的 点击查看官方对事件分类的介绍 第四步:思维发散 而有些人可能想要实现一些复杂的操作,比如说完成一个input后来个在界面展示出表单后再出现提示音,哪就把这个放在那个表单展示的后面区域里,后浪们,你能看到这里,肯定是有想法的,一定已经想过怎么操作了,所以就动手亲自试试看吧,相信自己可以做到的,我会慢慢更新这个交互提示声的博客的,欢迎各位小伙伴的批评指正与一同学习。 能不能更新就看大家能不能催催我了,我还要很多想法在想法库里,但是都还没出来
你也要开发小程序?交互细节特色少不了😀
目录:
1.来点交互的music?
![[小程序]你也要开发小程序?交互提示声少不了(2020/5/6第一次更新)javascriptweixin45863921的博客-](https://img-blog.csdnimg.cn/20200506084253341.png#pic_center)
如果你是一个苹果用户的话,你一定会沉浸于哪华丽的锁屏/开屏/支付声,如果不是的话,您可能也对转账收款声,或者是百度云下载完成的声音,更或许是钉钉的声音印象深刻如何设置一个交互的提示音来提高用户的好感度
第一步:上资源:(百度劝退?不存在的,来个蓝奏云)
点击上车
(实际点击成果怎么展示呢这声音。。。。):
以一个点击按钮为例,
关键是讲解这个API🖱wx.createInnerAudioContext()🖱的调用,微信文档里实在是坑呀,光给你API没有说明,真让人心酸
下面是JavaScript的代码
![[小程序]你也要开发小程序?交互提示声少不了(2020/5/6第一次更新)javascriptweixin45863921的博客-](https://img-blog.csdnimg.cn/20200506222630482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg2MzkyMQ==,size_16,color_FFFFFF,t_70)
#Javascript //这是给代码强调呀别复杂进去呀 //By 以太 const testAudio=wx.createInnerAudioContext() testAudio:function(e){ testAudio.src='/images/111.ogg' testAudio.play() console.log(e) }, 事件问题
![[小程序]你也要开发小程序?交互提示声少不了(2020/5/6第一次更新)javascriptweixin45863921的博客-](https://img-blog.csdnimg.cn/20200506223527449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg2MzkyMQ==,size_16,color_FFFFFF,t_70)
在这里我选择的是bind:touchend即手指触摸动作结束后响应
![[小程序]你也要开发小程序?交互提示声少不了(2020/5/6第一次更新)javascriptweixin45863921的博客-](https://img-blog.csdnimg.cn/20200506223418682.png)
然后再回到上面的JavaScript部分,先是
const testAudio=wx.createInnerAudioContext()了一下,个人习惯问题,可以忽略直接在下面调用然后就是用一个.再来一个src表示地址,这里有个bug,好像是只能用绝对路径哦,用play()表示开始播放。
上面只是一个很简单的小例子,我们可以发散一下思维,怎么用才能让用户用你的产品用的开心呢?
场景1:支付完成后,让用户感受到交易的实际存在
场景2:代办事项完成后,点击勾上完成任务同时来一个完成提 示声
场景3:某项操作成功/出错
场景4:完成一个input后来个在界面展示出表单后再出现提示音·····················································································
不要脸的我想要你们的一个👍来支持一下我的创作
![[小程序]你也要开发小程序?交互提示声少不了(2020/5/6第一次更新)javascriptweixin45863921的博客-](https://img-blog.csdnimg.cn/20200506225630186.png#pic_center)
2.来点交互的震动动?(待更)
**see you again**
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)