制作html5微信页面的经验总结。
先罗列一下我遇到的问题：
- 用户可选择图片上传，但是图片比较大（基本都是2M以上），而且还得异步上传。
- 由于操作上比较多的设计都是隐性的例如滑动之类，需要手势动画作提示。
- 块内元素滚动时不流畅，或不能滚动问题。
- 由于设计师设计的布局复杂度高，会出现比较多的元素需使用绝对定位。
- 如果页面是推广页面，绝大部分用户都是首次进入，而设计中的元素前端不能复现只能使用图片时，会产生加载时间较长的问题。
问题有这么多，我来一个个说。
问题1的解决方案是上传前预压缩，其实就是将原来的图片大小缩小到你可以接受的程度，再上传给服务器。使用的是canvas的接口和FileReader对象来进行操作，具体实现就不说了看这《使用HTML5的两个api，前端js完成图片压缩。》。其次是文件的异步上传，可以使用FormData把要提交的内容整合就可以了，减少很多麻烦，代码如下：
$(document.forms['ajax']).submit(function(e){
var formData = new FormData(this)；
$.ajax({
...
type: 'post',
data: formData,
/*
* 由于jquery会默认处理提交数据，所以必须关闭。
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
//原理同上，XMLHttpRequest会自动加上正确的Content-Type
contentType: false,
...
})
});最近有空把图片压缩的代码做成插件了。可以看这：
https://coding.net/u/packy/p/ImageCompress/git
问题2，这个写个动画库通用了就好XD，解决方法很多。
问题3，块内滑动问题，由于我这个卡内滑动元素还是一个fixed了的块，所有我参考了bootstrap的modal模块是如何处理的，至于百度出来的大多数并没什么卵用╮(╯_╰)╭。先上代码：
/*可滚动的块：*/ overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; /*块内加上一个div：*/ -webkit-transform: translate(0, 0); width: auto;
到底什么机制导致能解决这个问题目前还没时间去深究，如果看文章的你知道请务必和我说说！
问题4，该如何解决呢？这个其实得和设计师沟通互相理解，具体看会项目成本和耗时，不得就改设计吧！但是还是会有必须那样设计的问题，所有这里建议使用sass来处理不同手机尺寸的处理，能大大减少手写代码。上我先的一段处理（各位看官轻喷，我就看了一上午sass文档）。
//各手机尺寸，和比例。比例这里因设计给的是ip6的，所有就拿它来做基准。
$iPhone5: 320px 523px 0.85;
$iPhone6: 375px 622px 1;
$iPhone6-P: 414px 691px 1.1;
$screens: $iPhone5 $iPhone6 $iPhone6-P;
//用于套屏幕处理的
@mixin max-screen($res){
@media only screen and ( min-width: $res )
{
@content;
}
}
$btnImgSize: 191px 89px, 228px 94.5px, 128px 48.5px, 170px 67.5px, 308px 48px, 308px 48px, 308px 48px, 121.5px 129.5px;
@for $i from 1 through 8 {
.ui-img#{$i} {
background-image: url(images/btn-img#{$i}.png);
}
}
//循环屏幕数组
@each $screen in $screens {
//套用上面预设的屏幕代码
@include max-screen(nth($screen,1) - 1) {
@for $i from 1 through 8 {
.ui-img#{$i} {
width: nth(nth($btnImgSize,$i),1) * nth($screen,3);
height: nth(nth($btnImgSize,$i),2) * nth($screen,3);
}
}
}
}问题5，这个尽量和设计师谈妥，不行就得处理图片加载了，如果大图多而且都是用到img标签的得写个预加载功能，不然还要动画什么的首次加载基本看不出，因为图片都没加载完你动画能看的出来么╮(╯_╰)╭ ，这里就不说预加载了（看官请看这Javascript实现图片的预加载功能）。还有单页面使用到background里的尽量弄成雪碧图，但是单元面里分成多页显示的，有先后次序的，还是每页的图片分开打包吧，浏览器会异步加载的了。
下周压力略大要弄个打地鼠游戏，虽然之前用egret写过游戏，但是对于egret新知识不了解，想提高工作效率还得去学，祝我顺利吧。