移动端布局小问题

最近写移动端页面的时候遇到的一些小问题， 主要是微信页面

1.布局问题

flex布局，在写这个移动端页面的时候我布局很多时候都是使用的最新的flex 布局，写起来很舒服 ， 效果也很好 ，在大部分移动端机型上效果也如预期的一样， 但是到了iOS8.1的手机上的时候 ， 我发现flex布局就完全不起作用 ， 我开始还认为是前缀的问题 ，加上-webkit-之后还是没有效果 ，我又尝试了老版的flex-box，结果还是不行 ， 这就比较蛋疼了， 最终为了兼容，还是放弃了flex布局。

2.css3动画

在移动端页面上经常会用到很多css3动画的效果 ， 但是自己去写又很花时间 ， 所以我推荐用 animate.css ， 它预设了很多常用的动画效果 ， 用到动画不是很多的时候 ， 可以在里面找到想要的动画效果把代码拿出来。

3.audio标签

预加载audio，使用onloadedmetadata事件

加载完成之后需要先 play()、pause()，然后再使用。否则会有一些奇怪的问题， 比如：加载完成直接播放audio1 ， 在到一个点暂停audio1，播放audio2的时候会在ios9，ios10等一些机器上出现 只有audio1有声音，audio2没有声音的情况。

4.微信接口获取用户昵称

有些微信用户昵称含有图片字符 ， 在拿到的时候会转换为乱码有时会包含 单引号 或者 双引号，所以不能通过模板变量直接赋值的方式获取 ， 需要放在隐藏域通过dom方式获取value或者隐藏的div获取其html的方式获取。