关于你有一条未读短信的静态单页

拉家常

最近一直没有时间写博客，忙自己的人生大事，没有经历过，说实在的事情太多太多，不提前准备真心不行，还好各种事情准备就绪，安心上班，等待时间慢慢逼近。
在最近利用晚睡前的时间做了一个小的静态页面，放在sae上的，没去github pages的原因是我还想写点儿PHP在里面。

没图没逼格，有码才诱惑

有图逼格依旧不行啊，只是一个简单的模拟的iphone的短信界面

iphone短信对话框效果

之前是搜了一下相应的效果，看了看也有很不错的，我还是想自己瞎写，于是找了个iPhone，手机截屏了一个短信界面。肯定不是直接用图片了，容我上代码

html

<div>我是iphone短信</div>

css

div { position: relative; display: inline-block; margin: 20px 10px auto 10px; padding: 10px 8px; max-width: 60%; border-radius: 15px; background: #e6e5ea; color: #07070b; text-align: left; } div:before, div:after { content: ''; position: absolute; bottom: 0; display: block; width: 15px; height: 15px; } div:before { left: -7px; border-bottom-right-radius: 15px; background: #e6e5ea; } div:after { left: -15px; border-bottom-right-radius: 7px 15px; background: #fff; }

发送信息

没有后台数据支持，只是为用户显示固定好的信息，模拟数据中一个question，一个answer，用户只是需要点击“发送”就可以了。
第一次加载时自动接收一条来自我的信息，下一个question添加在下面的模拟文本框中，左侧点击直接给我手机发送短信。点击发送发出question，延迟1s收到answer，将下一次的question又自动添加到模拟文本框中，如此反复。
添加audio，收到回复消息play(),此处需要记住的是移动端的audio.play()存在不自动播放的问题，查询ios上说的是需要手动触发才能播放，Android也会出现同样的不自动播放的问题，测试UC浏览器可以自动播放。其他的需要点击发送后才能触发。

自动滚屏消息

消息满屏后自动向上滚动，使用的transform的translate3d，这个有遇见几个问题
移动浏览器中需要添加浏览器前缀，否者不能有顺畅移动效果。
移动后会增加外层容器的高度，出现空白。这个暂时都没能很好的解决。
最近看见一篇文章说的是css动画性能还要好一些，具体的也没细看文章，找时间再详细看一些再实际应用。

使用PHP获取数据

最后信息发送完以后，会弹出一个对话框，对话框的内容是分享到QQ空间，本来想使用微信API的，没备案，放弃了。就只是使用了qzone share，本来的想法是获取用户的QQ信息，但是实际的数据基本都是空白，因为大部分朋友都是使用的qzone的客户端访问进来的，没有http_referer信息，也就失败了。没有更好的办法，看来不能随意获取用户啊。

最后总结

只是收到了用户的一条短信，结局是失败的，用户体验中现实与理论不一致
好了，周末了，去海底捞吃一顿（一年就此一次啊！）