正常来说，音频播放结束后，音频的src是不变的，再次 play() 应该是可以的。但在小程序中偏偏不行，得重新赋值src才能重新播放，这应该是小程序的一个bug。。。
所以需要判断一下 暂停 和 停止 的情况，用不同的办法播放。正常来说，音频暂停时 currentTime 是不为0的，而结束时 currentTime 会为0。
所以可以通过 currentTime （最好是自己维护的变量）来判断暂停和停止的情况: 如果currentTime不为0，表示是暂停的情况，可以用 play() ,如果小于等于0，则重新赋值src播放 ：
if (currentTime) { this.audio.play() } else { this.audio.src = 'xx.mp3' }
mpvue不支持直接在template上直接绑定函数
这个是mpvue文档上有写的，不过一开始并不是很理解，也踩坑了，所以在这里提一下，避免不知道的同学踩坑找半天。
<template> <div v-for="(item, index) in list" :key="index">{{ formatItem(item) }}</div> </template> <script> export default { data () { return{ list: [1, 2, 3] } }, methods: { formatItem (item) { return `我是${item}` } } } </script>
上面的代码应该是日常vue中比较常用的，就是将数据传参给方法做一些处理，这个在mpvue中是不支持的，会被编译成一个空字符串。
小程序中可放心使用css3的一些特性
比如高斯模糊
filter: blur(50px);
如果要使用动画，尽量用 css 动画代替 wx.createAnimation
在实际使用时， wx.createAnimation 做动画其实很卡，性能很差，所以在需要使用动画时，建议尽量使用css做动画。
在小程序中是支持css动画的， transition , animation , @keyframes 这些特性都支持。
比如做一个div一直旋转的动画，大家可以对比一下两个版本：
wx.createAnimation 版本
原理：通过setInterval()不断更新div的旋转位置
<template> <div :animation="animationData"></div> </template> <script> export default { data () { return { animationData: '', animation: '', rotateCount: 0, timer: '' } }, components: { }, methods: { startRotate () { this.timer = setInterval(() => { this.rotateAni(++this.rotateCount) }, 100) }, rotateAni (n) { if (!this.animation) { return } // 每100毫秒旋转10度 this.animation.rotate(10 * n).step() this.animationData = this.animation.export() } }, onShow () { // 页面从隐藏到显示时才执行 if (!this.animation) { this.animation = wx.createAnimation() this.startRotate() } }, onReady () { // 第一次初始化时会执行 if (!this.animation) { this.animation = wx.createAnimation() this.starRotate() } }, onHide () { // 页面隐藏时会执行，避免频繁的setData操作，将定时器停掉 this.timer && clearInterval(this.timer) }, beforeDestroy () { // 页面卸载，也停掉定时器 this.timer && clearInterval(this.timer) } } </script> <style scoped lang="scss"> .cover { left: 20px; bottom: 70px; border-radius: 50%; background: #fff; position: absolute; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; z-index: 10000; } </style>
使用css的 @keyframes 做旋转动画
<template> <div :style="coverStyle"></div> </template> <script> export default { } </script> <style scoped lang="scss"> // 定义一个动画名为 rotate @keyframes rotate { 0%, 100% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .cover { left: 20px; bottom: 70px; border-radius: 50%; background: #fff; position: absolute; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; z-index: 10000; // 使用动画 animation: rotate 4s linear infinite; } </style>
用js写的动画需要控制好setInterval的间隔时间和旋转角度，比较难调。而用css写动画很简单，性能比js好，代码量也很少。
使用css动画时建议开启硬件加速
为了动画更流畅，想尽办法做优化，虽然不知道有没效果，反正用了再说[手动滑稽]。
可以用will-change和transform: translate3d(0,0,0) 开启硬件加速。我也不太会用，具体用法大家自行百度Google。
will-change: auto; transform: translate3d(0, 0, 0);
iPhoneX需要底部导航条预留34px（68rpx）的高度。