我一直以来很少去做 H5 页面，准确来说很少愿意去开发。

一方面 H5 本身技术并不是关键点，而设计或者是整体的营销宣传才是关键点，另一方面，成熟的 H5 解决方案（如 易企秀、兔展、MAKA等等）也很多，都是傻瓜式的操作，完全没什么技术含量。

但是使用免费的解决方案不可避免的问题就是存在广告和平台宣传的 LOGO ，本身还是很少的。

最近需要帮朋友搞一个 H5 的页面，首先，品牌宣传效果来说，他不希望存在像是 易企秀 这样存在平台自身logo的，易企秀去 logo 价格好像还可以，但是必须是 ￥500 起充，充完就放在哪里放着没啥用。

H5在线制作平台存在的很大问题在于， 无法做到很好的适配，这对设计师进行设计的时候，必须做的很好，否则非常麻烦。

我尝试过几个平台之后，最终用了一下 百度H5 来出样。

一、 百度 H5

地址：https://h5.bce.baidu.com

说说优点：

  • 动画很多、操作简单，表单统计方面快捷。
  • 微信分享 logo 支持非常好分享朋友圈或者发送给好友效果很好。
  • 全局背景和全局前景什么支持很好

说说缺点：

  • 响应式会存在问题：

    • 比如我在 5s 上和 6sp 上测试都没问题，到了 7 上面会存在问题，需要调整的内容较多

  • 宽度高度只支持 px 数值，而不支持 100%

    • 很多时候我们希望是撑满的，如果是 px 像素宽高，在 iphonex 这样的设备上无法显示全

  • 多显示屏预览比较敷衍

    • 为了测试不同的设备，进行多显示屏效果查看的时候，他的预览显示器就是加了长度，宽度完全没放在其中

二、iSlider by be-fe

上面存在的问题是我在使用百度H5的时候遇到的问题，这种问题肯定也在其他的 H5 平台上存在的，本身 H5 对于手机的多设备的满足程度就不是很高，因此无法做到完全的匹配也是正常的。

如果想要自己去开发写代码做 H5 页面的话，我分别尝试了两个库。

地址：

islider 是 百度 BE-FE 的开源移动端全屏滚动库。

滑动效果很好。

缺点：

  • 所有的 DOM 都放在 js 中，对于 DOM 复杂的 H5 来说比较困难。（一般H5都力求简单）

三、iSlider

这个 iSlider 是腾讯的一位前端开发者维护的库，应该是 QQ 音乐的。

相比于 百度 iSlider ，这个 iSlider 的 DOM 不需要非得写在 js 中，通过 class 来控制 play ，动画使用的是 css3 的动画。

在页面进入的时候，加上一个 play 的 class,然后对 play 下面的内容进行 class animation。从而实现动画。

效果也不错，可以试试：