微信小程序相关小知识

小编最近已经处于崩溃的边缘，分分钟脑仁疼，分分钟想shi。不知道是小编太笨还是真的是廉价劳动力，在结束vue项目之后，也许是因为最近小程序太火的原因，上司脑子一热就提出将vue项目再做个小程序版本，小编内心是拒绝的。但，奈何，人在屋檐下，不得不低头，小编也没有甩手就一句“世界那么大，我想去看看”的勇气，于是乎，撸起袖子，开始了崩溃的道路。虽然小程序已经封装了许多接口、组件等，十分的遍历，但还是不免有些方面会不幸入坑，故在此和大家说说我踩过的坑。
1、音频组件在切换音频src时不能直接播放
进行过小程序开发并触及到音频的人员都知道，关于音频播放的接口，微信就提供了许多个。有背景音乐的播放、录音的播放、一般音频的播放。在此说的是一般音频的播放。HTML中，音频的播放都是通过audio标签实现的，并通过audio标签的各个属性进行对音频的控制。在微信中，对于一般音频的播放有两种方式，一种也是通过audio标签进行音频播放，另一种是通过js进行创建。由于微信小程序无法像一般的HTML一般可以操作DOM和BOM，所以通过audio标签播放的音频需要
设置ID，并通过this.audio=wx.createAudioContext('ID名')进行获取。在本次小程序中，由于该音频需要进行切换src，在切换src时会发现音频不能直接播放，需要点击第二次才可以进行播放，为什么呢？小编问了一下度娘，发现也有人遇到过类似的情况，也找到了方法。原来，小程序对于音频的播放存在缓冲时间，故而不能直接播放，解决方式是setTimeout延迟执行。小编亲测，此方法是有效的，所以推荐给大家。
2、分享到群
小程序提供了分享接口，与微信JS-SDK不同，它不需要像JS-SDK一样需要进行各式分享类型的监听，且目前，小程序还未支持分享至朋友圈。小程序分享大致分为两种，一种是分享给单个好友，另一种是分享给群组。这两个的区分可以通过shareTickets进行区别，若是分享给好友，则shareTickets的值为null，若分享到群组，shareTickets的值是一串无规律的字符。在判断shareTickets的值时需要调用wx.showShareMenu接口，并设置withShareTicket为true。wx.showShareMenu({withShareTicket: true })我推荐大家在页面加载生命周期调用此接口。保证可以拿到shareTickets。
3、Ripples.wxss 动效库
一个项目或页面，若想吸引更多的用户进行访问和使用，除了独特的交互，页面的美观和炫酷的动画效果是必不可少的。动画效果虽然炫酷，但并不是每一个动效都需要前端人员去实现。HTML为了开发人员更好的使用动效而产生了Animate.css动效库，随着小程序的流行，若小程序需要实现和Animate.css中类似的动画，一般人就会想到直接使用Animate.css库。但，小程序中是不可使用animate.css库的。所以，为了开发人员更好的开发便有了Ripples.wxss库的诞生。Ripples.wxss 是一个为微信小程序量身定制的 css3 动效库，引领微交互的潮流。大部分动效源自 Animate.css。接下来说说Ripples.wxss库的使用方式。
（1）安装
①如果你的微信小程序项目基于 nodejs 开发，你可以使用 npm 安装，并拷贝到相关目录后 @import “path/ripples.min.wxss”
②或直接 clone \ download 仓库 https://github.com/jeasonstudio/Ripples.wxss.git，拷贝 ripples.wxss 或 ripples.min.wxss到相关目录后 @import “path/ripples.min.wxss”。
（2）使用
和 Animate.css使用相同，添加固定类名ripple以及想添加的效果类名即可。若想要持续播放该效果，可以添加infinite类名。例：<view class="ripple infinite bounce">element</view>
（3）支持的动效类名
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
-bounceInDown
-bounceInLeft
-bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
-fadeInDownBig
fadeInLeft
-fadeInLeftBig
fadeInRight
-fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
具体样式可以参考 Animate.css。