近期H5项目开发小结

前言：2016差不多又过了半啦，最近参与了公司好几个h5项目（严格来说，也只能算是推广页面活动）。主要是新品牌的推广需要，当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广；就主要的运用技术，页面优化，以及存在的短板做总结。

一、主题与设计；

 2个h5主题主要与4.1愚人节与5月的母亲节做对应；然后要比较婉转自然地为新品牌作铺垫，自然推广是主要的目的，但是又不能那么直白明显；所以2个h5分别选择了虚拟产品介绍与游戏参与为设计思路；主要设计图如下：

 愚人节：       扫描体验；

母亲节：     只能微信扫描体验

2个h5 分别以流程展示和游戏互动参与为操作主线进行，在最后通过时节的特点（愚人节自然是整蛊咯，母亲节则是温馨情感）导向品牌网站。个人对UI的整体设计还是比较认可的。

 

一、主要的技术点与亮点；

 两个h5的UE交互比较相似，所以在技术层面上也比较贴切。整体没有太大的难度，与之前开发的H5互动页面技术采用差别不大；不过创意总是无限的，根据设计师的设计理念，并与之交流后确定的交互展示方式算得上是这2个h5的一大亮点。围绕效果对采用的技术作分析总结。

 

1.重力感应动画效果，摇一摇；

　　项目里已不是第一次运用html5手机api，时至今日，几乎所有智能手机都很好地支持了DeviceOrientation 和DeviceMotion 这个2个手机接口；根据设计配合了css3的transform动画，营造了视觉差的效果；代码实现也是比较简单，单纯地调用接口代码即可；至于摇一摇动能，之前的文章也有提到过，so，不复赘述。

window.addEventListener('deviceorientation',  function(e) {var x = parseInt(e.gamma);var w = parseInt(0.4*x);if(Math.abs(x) < 80){$('.p0_cen').css('webkitTransform',' translate3d('+0.8*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) ');$('.p0_tip').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) ');if($('.p1').hasClass('on')){ //p1$('.p1_bg').css('webkitTransform','translate3d('+1.5*w+'px,0px,-100px) rotate3d(0,1,0,' + 0.8*w + 'deg) scale(1.5)');$('.p1_tit1').css('webkitTransform',' translate3d('+1.4*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) ');$('.p1_tit2').css('webkitTransform',' translate3d('+1*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) ');$('.p1_tit3').css('webkitTransform',' translate3d('+1.2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) ');$('.p1_tit4').css('webkitTransform',' translate3d('+.7*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) ');$('.p1_bot').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 0.6*w + 'deg) ');};        };
});

2.帧动画，css spite，css animation；

　　页面中的动画效果主要还是由css3 的animation组成，比较直观可控；由于设计的特殊性，需要用到大量仿真的场景动画效果，这时候显然是图片输出为主，尽管css sprite动画也可以做到，不过对于大帧数的效果，一个是不易导出整张图片，存储大小过大，另外一点就是不利于网页加载速度；所以用js控制images替换的帧动画比较合适。当然，提前预加载图片，时间控制，与音频的同步也是需要注意的细节。

 

var barTimer = setInterval(function(){if(num < 52){var path = 'res/img/p5/all_000'+num+'.jpg';$('.p5_anigla').attr('src',path);num++;}else{clearInterval(barTimer);};},50);

3.html5 <video>的使用；

　　由于母亲节设计的原因，在初始loading完资源后会涉及到视频的自动播放，好的一点是在微信内置浏览器里，可以自动播放，外置浏览器比如safari还是需要用户交互才能执行，所以根据项目的运行环境还是需要做不同的事件处理；

　　另外一点值得注意的就是，在微信内置浏览器里非wp.weixin.com域名下的视频资源，在安卓下引用会出现各种各样的播放组件（比如播放完后会出现播放按钮，视频下方的进度条等；），ios暂无此等问题；所以，在运用视频的时候就需要针对安卓用户考虑是否接受这样一个效果体验；否则，还是做平台的不同处理吧。

4.移动自适应的优化；

　　此次还有一点就是针对以前的页面适配问题再次作了一次普遍的优化；由于市面上的各种显示屏大小，分辨率的存在，间可能减少在码css的时候针对分辨率做媒体查询；所以，结合网上的一些代码案例，将之前的纯rem，依靠screen width适配的方案进行了提升：

　　1）约定了基础设计图纸的大小；

　　2）根据屏幕高度采取了比例缩放，使得布局不再仅仅依据屏幕宽度做调整；

 

!function(win, option) {var count = 0, designWidth = option.designWidth, designHeight = option.designHeight || 0, designFontSize = option.designFontSize || 20, callback = option.callback || null,root = document.documentElement,body = document.body,rootWidth, newSize, t, self;//返回root元素字体计算结果function _getNewFontSize() {var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;return parseInt( scale * 10000 * designFontSize ) / 10000;}!function () {rootWidth = root.getBoundingClientRect().width;self = self ? self : arguments.callee;//如果此时屏幕宽度不准确，就尝试再次获取分辨率，只尝试20次，否则使用win.innerWidth计算if( rootWidth !== win.innerWidth &&  count < 20 ) {win.setTimeout(function () {count++;self();}, 0);} else {newSize = _getNewFontSize();//如果css已经兼容当前分辨率就不管了if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) {root.style.fontSize = newSize + "px";return callback && callback(newSize);};};}();//横竖屏切换的时候改变fontSize，根据需要选择使用win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {clearTimeout(t);t = setTimeout(function () {self();}, 200);}, false);}(window, {designWidth: 640, designHeight: 1136,designFontSize: 100,callback: function (argument) {/*console.timeEnd("test")*/}});

 

三、缺陷与短板；

由于开发时间与进程等各种原因，几个h5堆积起来也是蛮紧张的，即时基础模板与样式库大同小异，不过还是聊下在各种调整与优化中出现的不足；

1.css3 3D动画

　　1）很早之前的h5使用css3 3D animation的时候已经提出过这个问题，就是在ios系统上的ratateX，Y系列总会与页面元素之间出现穿透遮挡的问题，一直没有找到代码层面的原因，究其根本还是浏览器自身的支持与解析造成的吧，总之安卓上webkit内核是没有这种情况出现的；

不过问题还是要处理掉的，方法无非就是外层容器溢出隐藏：overflow:hidden;另外就是在z距上的translate ，再相应地scale缩放。

　　2）对3D变换的更深理解：不可或缺的perspective，意为透视，视角；正确使用将会给使用者在视觉上造成3D的视觉，主要表示的就是观察者距离屏幕的px距离；正为前方观察，负值为后方；

-webkit-perspective:620px;

 　　自然，你可以将这个属性单独设置到舞台容器上，也可以针对不同视觉效果单独给元素添加；

　　3）还是那个老问题，针对低端安卓机，即使开启了硬件加速，也会或多或少地出现动画卡顿不流畅的情况，所以根据以后h5的设计趋势，动画效果占比越来越大，css3的动画应该尽量少用，转为canvas；

2.音视频的控制

　　以后的H5几乎都会有音视频的加入吧，也算是一个整体流行趋势，不管是吴亦凡H5 还是前段时间的宝马M2，视频的运用已经比较普遍；但是兼容性还是存在各种问题，比如（安卓不能同时播放2个多媒体，自动全屏播放，预加载，不同网络状况下的处理等等）；

所以考虑到以后的优化手段与开发效率，需要一些动画库来管理与处理，比如以前开发中使用过的craftyJs一类的动画框架，最近也在研究腾讯TGideas的几个 动画H5，个人觉得creatJs这个类库也是方案很好的解决途径之一。

3.图片处理

　　图片上传显示也算是在移动网页上，尤其是一些互动性h5常见的功能点，此次为了配合最后的大头贴功能，也着实是对图片压缩适配做了不少工作；包括截取的自适应，热区感应，位置对齐等，不过经过前几个h5的经验，最后还是比较完美地处理；不过手机浏览器对input的限制也是大不相同；有的安卓依旧不能选择摄像头即时拍照；编辑卡顿的现象。不过这也是很少在手机移动端出现图片大功能编辑的原因之一，总之还是根据实际功能需求来调整。

 

结束语：现在的移动端H5热潮差不多是一个稳定的阶段，通俗一点就是烂大街了，不过依旧会有大厂的神来之笔出现让人眼前一亮；微信衍生出来的这个移动平台也极大地推广了移动web的发展；各种技术与创意也是层出不穷。

即使前段时间 腾讯放出的H5推广浏览率分析，有点让人开发者心灰意冷；但是也很好地说明了，技术与创新结合，想象力与设计，给用户新颖舒适的体验才能催发更优秀的作品。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/3colors/p/5474700.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/403844.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue-cli3中的vue.config.js配置

vue-cli3中的vue.config.js配置

vue-cli3中的vue.config.js配置 我的跨域是配置通过chrome浏览器的跨域设置&#xff0c;前端修改跨域问题&#xff0c;以此解决跨域的&#xff0c; 故如果需要配置代理&#xff0c;就看proxy部分&#xff1b; const path require(path) const resolve (dir) > path.join…
阅读更多...
获取python版本

获取python版本

import sys# global variablepyVersion 2 # set default python version to 2.x# init global variable(s)def init():global pyVersionpyVersion sys.version_info[0] # get major version of pythondef test():print(pyVersion)if __name__ __main__:init()test()运行情况…
阅读更多...
会计的思考（37）：“弱水三千，只取一瓢饮”--业务人员的财务意识

会计的思考（37）：“弱水三千，只取一瓢饮”--业务人员的财务意识

关键字: 会计体系 财务意识 投入产出 "任凭弱水三千&#xff0c;我只取一瓢饮"&#xff0c; 出自《红楼梦》,第九十一回里&#xff0c;贾宝玉曾经这样语带机锋地试图去化解林黛玉刚刚上来的醋劲。本文以此引出对业务人员的财务意识的思考。 成功企业家&#xff0c;如…
阅读更多...
编译QtAV工程库

编译QtAV工程库

去https://github.com/wang-bin/QtAV下载源代码 去https://sourceforge.net/projects/qtav/files/depends/QtAV-depends-windows-x86%2Bx64.7z/download下载依赖库QtAV-depends-windows-x86x64.7z 将里面的include目录内容和lib内容分别拷贝到Qt的include和lib目录下 QtAV解压后…
阅读更多...
make -j32 21 | tee show.log

make -j32 21 | tee show.log

2. 2>&1是什么意思&#xff1f;2>&1应该分成两个部分来看&#xff0c;一个是2>以及另一个是&1&#xff0c;其中2>就是将标准出错重定向到某个特定的地方&#xff1b;&1是指无论标准输出在哪里。所以2>&1的意思就是说无论标准出错在哪里(哪怕…
阅读更多...
依赖包报错Invalid options object. Less Loader has been initialized using an options object that does not

依赖包报错Invalid options object. Less Loader has been initialized using an options object that does not

1.问题&#xff1a;yarn安装依赖包&#xff0c;启动项目报错 error in ./node_modules/ant-design-vue/dist/antd.less Module build failed: ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the A…
阅读更多...
Windows下显示目录大小及文件个数

Windows下显示目录大小及文件个数

From: http://blog.csdn.net/wmnothing/article/details/6590376 用批处理实现Windows下子目录大小统计功能 吴旻 泰岩网络工作室 统计当前目录下各文件夹的大小&#xff0c;在Linux下面比较简单&#xff0c;一个 du -sh * 命令就基本解决问题了。虽然在资源管理器是单击右键…
阅读更多...
Asp.net页面和Html页面之间的关系

Asp.net页面和Html页面之间的关系

Asp.net页面显然要转化为普通的html页面才能在浏览器中显示&#xff0c;但是对于两者的关系&#xff0c;或者说从服务器在接受请求处理请求这段时间内对asp.net页面的操作一直不是很明白&#xff0c;下边的一段话可以让人豁然开朗&#xff0c;虽然并未谈论技术&#xff0c;但简…
阅读更多...
kmalloc/kfree,vmalloc/vfree函数用法和区别

kmalloc/kfree,vmalloc/vfree函数用法和区别

1.kmalloc1>kmalloc内存分配和malloc相似&#xff0c;除非被阻塞否则他执行的速度非常快&#xff0c;而且不对获得空间清零.< tiger说明&#xff1a;在用kmalloc申请函数后&#xff0c;要对起清零用memset()函数对申请的内存进行清零。> 2>kamlloc函数原型&#xf…
阅读更多...
SQL Server开发接口生成方法

SQL Server开发接口生成方法

为提高开发效率&#xff0c;生成固定格式的接口是必须的&#xff0c;以下以提供新增/修改/删除/读取接口为例&#xff1a; 以常见的表结构为例&#xff0c;特殊表结构可自己尝试去调整方法 主要通过系视图 sys.columns生成方法:为包含列的对象&#xff08;如视图或表&#xff0…
阅读更多...
vue-cli2定制ant-design-vue主题

vue-cli2定制ant-design-vue主题

本篇是vue-cli2定制主题&#xff0c;vue-cli3通过vue.config.js定制主题点击此处 1.引入less和less-loader&#xff08;如果报错&#xff0c;请将less-loader版本更改到5.0.0&#xff09; npm install less less-loader --save2.在 vue cli 2 中定制主题&#xff0c;修改build…
阅读更多...
python中thread的setDaemon、join的用法

python中thread的setDaemon、join的用法

From: http://doudouclever.blog.163.com/blog/static/17511231020127232303469/ python中得thread的一些机制和C/C不同&#xff1a;在C/C中&#xff0c;主线程结束后&#xff0c;其子线程会默认被主线程kill掉。而在python中&#xff0c;主线程结束后&#xff0c;会默认等待子…
阅读更多...
谈谈软件兼容性测试

谈谈软件兼容性测试

1.软件兼容性测试兼容性测试之待测试项目在特定的硬件平台上&#xff0c;不同的应用软件不同&#xff0c;不同的操作系统平台上&#xff0c;在不同的网络等环境中能正常的运行的测试。兼容性测试的目的&#xff1a;带测试项目在不同的操作系统上正常运行&#xff0c;包括待测试…
阅读更多...
YUV视频格式分析

YUV视频格式分析

Andrew Huang <bluedrum163.com> 转载请注明作者及联络方式在摄像头之类编程经常是会碰到YUV格式,而非大家比较熟悉的RGB格式. 我们可以把YUV看成是一个RGB的变种来理解.YUV的原理是把亮度与色度分离&#xff0c;研究证明,人眼对亮度的敏感超过色度。利用这个原理&#x…
阅读更多...
自定义ant中table表格的展开图标 修改ant-vue-design中嵌套表格table的expandIcon自定义图标

自定义ant中table表格的展开图标 修改ant-vue-design中嵌套表格table的expandIcon自定义图标

效果&#xff1a; 1. <a-table:expandIcon"expandIcon":loading"loading":columns"columns":data-source"data"class"components-table-demo-nested"change"onChangeTable":scroll"{x:1300,y:y}":p…
阅读更多...
Foundationd和Application Kit的类层次

Foundationd和Application Kit的类层次

Foundationd类 Application Kit类 转载于:https://www.cnblogs.com/ikodota/archive/2012/08/01/2618590.html
阅读更多...
python多线程编程(1): python对多线程的支持

python多线程编程(1): python对多线程的支持

From: http://www.cnblogs.com/holbrook/archive/2012/03/01/2376408.html 前面介绍过多线程的基本概念&#xff0c;理解了这些基本概念&#xff0c;掌握python多线程编程就比较容易了。 在开始之前&#xff0c;首先要了解一下python对多线程的支持。 虚拟机层面 Python虚拟机…
阅读更多...
三个数从小到大排序

三个数从小到大排序

描述 现在要写一个程序&#xff0c;实现给三个数排序的功能 输入输入三个正整数 输出给输入的三个正整数排序 样例输入20 7 33 样例输出 7 20 33 测试代码 1 #include "stdio.h"2 3 int main()4 {5 int a, b, c, t;6 scanf("%d%d%d", &a, &…
阅读更多...
监听vuex的某条数据

监听vuex的某条数据

需要现在计算属性里获取 computed: {tabType: {get() {return this.$store.state.tabType;},set(val) {this.$store.state.tabType val;},}},watch: {tabType(val) {this.allType this.$store.state.tabType;}, }
阅读更多...
dup和dup2的使用方法

dup和dup2的使用方法

/*本文通过标准输出的重定向和恢复的过程来解释dup和dup2的使用方法*/#include <stdio.h> #include <unistd.h>#include <fcntl.h>//STDIN_FILENO标准输入描述符&#xff08;0&#xff09;//STDOUT_FILENO标准输出描述符&#xff08;1&#xff09; //STDERR_…
阅读更多...
最新文章

Copyright @ 2022~2023