初次微信web开发遇到的问题

最近的工作是进行公司的宣传相关内容制作，包括什么宣传资料啦，产品宣传图啦还有网站和微信页这些东西。 虽然平时也经常会做做平面设计，不过毕竟不是专业的，所以做的时候还是感觉比较辛苦的。

最近这两天在尝试开发微信宣传页，之前做过的微信宣传页是使用在线平台开发的。 就是那种在线像PPT一样制作一张一张的过渡动画，然后自动轮播。但是这次我想自己从底层进行开发。 结果移动端web经验不足的我遇到了很多的问题。

Viewport在各浏览器的效果不同问题

在这些让我受不了的问题中Viewport是首当其冲的。在我之前的开发中，Phonegap开发移动端APP就使用到Phonegap。 对Viewport的兼容性早有了解。在PhoneGap中如果使用crosswalk核心进行开发则可以对Viewport完全兼容。 我们可以将视图宽度设置成固定值，这样对我们的开发是很有帮助的（当然，这只是Viewport的一个功能）。 这样我们可以针对固定的宽度进行内容的布局，整个视图会相应的自动缩放。

<meta name="viewport" content="width=520,user-scalable=no" />

我们把上面的代码加入到title标签前面就可以达到把视图宽度固定为520px像素。 我们就可以根据520px宽度的页面进行布局开发。刚接触到时我觉得这简直就是我们前端开发者的福音。

可是没想到的是，这个针对移动端的属性居然也有兼容性的问题存在。IOS没有开发过并不清楚， 不过据说IOS的自带浏览器很强大。安卓的自带浏览器和PhoneGap基本核心（应该就是自带内核）对Viewport是不完全兼容的。 它们并不支持将宽高设置成固定值(按理说可以，只是没有成功过)。但是还是有两个值可以选择:默认尺寸以及 设备尺寸。默认尺寸的具体意义其实我依然没弄明白，遇到过的有320*480和480*640两种。 然而设备尺寸就是设备屏幕分辨率的宽高了。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

上面是PhoneGap新项目中自动生成的Viewport代码。它将视图宽度设置为设备宽度，设置默认缩放为1并且禁止缩放。 这在移动端开发中其实还是相当有用的。默认尺寸的大小相对而言还是比较小，我在前端开发时经常使用双border来做内容分割。 但是在默认尺寸下边线显得太大了，我们使用设备尺寸进行开发通过一些交互式适配对页面的效果意义还是比较大的。

其实Viewport的不完全支持在之前我也是知道的。当我打开我的手机微信进入网页之后， 我发现我的手机微信对Viewport的视图大小设置完全不支持，我不知道是不是细节上的问题。 配置:小米3安卓4.4。这我就很尴尬了，只能另寻它法适配微信页大小。

我的解决办法

我所使用的解决办法是使用CSS的transform进行手动尺寸适配。通过JS获取窗口宽高， 配合内容宽高比率进行内容缩放。内容加入一些出血来做不同比率的屏幕适配。

var w = innerWidth,h = innerHeight;
var yw = dom.offsetWidth;
var yh = dom.offsetHeight;
var bl = w/h;
if(bl > yw/yh)
    zoom = h/yh;
else
    zoom = w/yw;
dom.style["transform"] = "scale3d("+zoom+","+zoom+",1)";
dom.style["-webkit-transform"] = "scale3d("+zoom+","+zoom+",1)";

上面的代码首先获取设备的宽高，再获取容器的宽高，进行比率的对比计算缩放比率。 最终将比率用于大小的适配。这里的dom是要适配大小的容器。

不过还有别忘了设置另一个CSS属性

dom.style["transform-origin"] = "50% 0px";
dom.style["-webkit-transform-origin"] = "50% 0px";

这里的transform-origin默认值是50% 50%。这个属性可以改变对象的中心点，也就是缩放、旋转的相对点 (SVG元素也可以使用这个属性)。我们把它设置到顶部中间，这样我们缩放时它会以顶部对齐进行缩放。

不过我就算到了这里依然还有问题，我所读取到的微信浏览器的设备宽度是380，但是我检测到的微信浏览器的body宽度是520。 可是实际视图的部分的确是380，导致内容显示不全。最终我选择了强制设置body宽度。

document.body.style["width"] = w+"px";
document.body.style["height"] = h+"px";

上面的代码强制让body的宽度和高度等同设备尺寸，设备尺寸是之前获取的。现在页面尺寸总算正常了。

JS动画执行效率低

我在自己的框架中写了一个js的动画扩展。实际上并没有真正测试过执行效率的问题（虽然自己发现了好几个影响执行效率的地方） 我初始进行动画设计的时候使用的是电脑的chrom浏览器，执行效率根本不是问题。可是到了微信里完全不一样了， 我在电脑上的每秒60帧到了手机上只有仅仅一秒1到2帧的执行效果。然后写了一个CSS动画进行测试，差不多每秒30帧左右。 一下子让我觉得我应该另寻出路了。

在网上查了一下，实际上不管在移动端还是PC端中JS动画的执行效率都没有CSS动画那么高， 不过CSS动画对低版本的兼容性差一些，并且JS动画更容易控制。移动开发中的动画能用CSS完成的就别用JS了， 并且多用transform3D，硬件加速的动画执行效率更高。

知道了问题所在那解决方法也很明了，放弃JS动画转为CSS动画，但是我当然不满足于创建一个CSS文件写一大堆预设效果。 虽然可控性很难做到JS那么强但是至少自由度要足够高。所以我打算用JS动态生成CSS动画并赋值给Dom。

JS动态生成CSS动画

如果大家也想通过JS来生成CSS动画，我这里给一些我实现过程的基本想法。其实最基本的生成CSS动画当然是新建一个Style 节点然后在innerHTML中写入CSS动画然后加入节点到网页中。在IE8 及以下的浏览器是不支持style元素的innerHTML赋值的，不过我们移动端不需要考虑IE的兼容性。

其次就是构造一个id名分配机制，使得不同的内容使用不同的动画名。最后就是数据的解析，设计一个便捷的动画编写方式， 然后通过JS转换为CSS动画并用到Dom上。

相应的例子

这里是我这两天做的针对微信开发的我的框架的扩展。可以通过html属性进行简单的动画。

例子

框架扩展

文章为原创内容并且是个人观点和见解，如有错误或问题欢迎指出
本文的地址为 :  http://evillcg.com/blog/item/1466426207/