Web前端开发工作交接报告

一、项目总体逻辑及后续工作进展

本次项目为公司的网站开发。开发中使用的语言包括html，css，css3。使用到的前端框为angularjs。在整个开发过程中，使用了MVC的设计模式，其中Model层为index.js，由index.js进行路由分发。View层，是整个前端页面的展示层，其文件包含在views目录下的所有文件。Controller层，是整个开发的关键，其文件为所有以Ctrl结尾的js文件。

具体代码含义，见于开发中注释。

目前工作完成进度：目前工作的基本框架已经完成。主页面、产品展示部分页面等页面的前端设计已经完成。

后续工作进展：完成未完成的页面设计（具体页面设计的设计写在view层，页面的交互处理写在Controller层）。

项目完成之后工作进展：全景图设计（见Krpano操作）。上线前的优化工作（见项目优化）。

二、各文件具体含义说明

图1.1 项目文件

表1-1 css目录介绍

lib目录	所有的外部css文件
global.css	项目中需要使用的公共css样式
living.css	view里面的living.html文件样式
newproduct.css	view里面的newproduct.html文件样式
productdetail.css	view里面的productdetail.html文件样式
sofa.css	view里面的sofa.html文件样式

fonts目录，为此次开发所需使用的字体文件。

img目录，为此次开发所需的图片文件。

表1-2 js文件夹介绍

lib目录	所有的外部js文件
xx目录	存放指令文件
Index.js	注册angular及路由分发机制
mainCtrl.js	包含各view的各个controller文件
其他文件	对应于单个view界面的文件

testImg文件夹为先前测试的img文件，在最后项目上架的时候建议删掉。

views文件夹是包含又有前端的展示页面的html文件。在书写页面的时候，需要将页面放在这个目录下。

三、Krpano操作

krpano是制作全景图的一个工具。

使用规则：将需要的制作成全景图的图片选中（可多选），通过鼠标拖放放于krpano-1.19-pr8/MAKE VTOUR (NORMAL) droplet.bat文件上面，这时候会弹出一个正在处理的过程，等到处理完毕，按enter键完成操作。如下图3-1所示

图 3-1

在完成之后能够看见图片所在目录下会多出一个vtour目录，将vtour目录配置在服务器下面，打开tour.html就能查看制作好的初步全景图。

如何给全景图添加跳转的热点。此具体操作见于桌面/全景图/总结文档。

一、如何添加动态图

首要要有动态图

其次修改主xml文件

第一步：在scene之后添加如下代码

registerattribute(xframes, calc((imagewidth / %1) BOR 0));

registerattribute(yframes, calc((imageheight / %2) BOR 0));

registerattribute(frames, calc(xframes * yframes));

registerattribute(frame, 0);

set(crop, '0|0|%1|%2');

setinterval(calc('crop_anim_' + name), calc(1.0 / %3),

if(loaded,

inc(frame);

if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );

mod(xpos, frame, xframes);

div(ypos, frame, xframes);

Math.floor(ypos);

mul(xpos, %1);

mul(ypos, %2);

calc(crop, xpos + '|' + ypos + '|%1|%2');

clearinterval(calc('crop_anim_' + name));

);

</action>

第二步：在要设置热点的图片中添加热点

找到对应的场景 scene 在其中加入如下代码

其中url是要动态图片的地址，图片是一个要动态显示的不同大小的图集。Onloaded是要执行的上面的action。至此就完成了。

二、使用导航条按钮

三、如何给热点添加文字

<hotspot name="spot2" style="skin_hotspotstyle" ath="112.376" atv="37.536" linkedscene="scene_studyroom" text="书房"/> text就是显示的文字

需要学习的网站：http://www.krpano360.com/yihuajiemu-10/

已完成的Dome,请参考HBuilder里面的testKrpano文件，里面有初步的完成的全景图设计。

四、项目优化

项目上架之前需要进行的部分优化：

css压缩：利用cssmin进行压缩，原使用主机已经配置完成。只需要配置要压缩的文件目录即可。

cssmin:{

options:{

stripBanners:true,

banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

my_target: {

files: [{

expand:true,

cwd:'src/',

src:'*.css',

dest : 'test/css',

ext: '.min.css'

}]

}

将上面代码的cwd对应的目录改成你所需要压缩的css文件目录，将dest对应后面的目录，修改成为你需要保存的压缩后的文件目录，最后在命令行输入grunt就能进行压缩操作。

Js压缩：利用uglify进行压缩，原使用主机已经配置完成。只需要配置要压缩的文件目录即可。

uglify:{

options:{

stripBanners:true,

banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

my_target: {

files: [{

expand:true,

cwd:'src/',

src:'*.js',

dest : 'test/js'

}]

将上面代码的cwd对应的目录改成你所需要压缩的js文件目录，将dest对应后面的目录，修改成为你需要保存的压缩后的文件目录，最后在命令行输入grunt就能进行压缩操作。

图片压缩：在你使用的电脑上有一个图片压缩.exe的可执行文件，他在本机的桌面上，你需要双击来打开大，会发现需要填写要压缩的文件目录和压缩后生成的文件目录，按照你要压缩的文件和你要生成的文件填写即可。生成目录下的文件就是压缩后的图片文件。

图片压缩工具只能对图片进行压缩，如果存在其他文件，会报错，但是并不影响你自己的图片压缩。另外对于图标文件，不需要进行压缩，图标文件在压缩后会失真明显。

项目上架后需要进行的优化：

CSS整合:有部分页面的css存在冗余，需要多余的css 删除，减少css文件大小。

按需加载js：页面js在读文件中异步加载，待项目上架后需要考虑按需来加载js。按需加载js可以考虑使用requireJS来完成。

交互优化：部分页面在特效上不够炫酷，上架以后望考虑使用原生js进行优化操作。

五、前端辅助工具说明

取色器：见于桌面下侧导航栏最左侧位置。打开后鼠标移动到UI所给的页面上进行取色。

Google各插件介绍：各插件安装在google浏览器上。

1.ie7兼容性插件用户测试开发的网站是否能够兼容ie7。网页访问网站，在访问成功后打开插件，这时候你所访问的网站就是ie7下的网站，如果有些兼容性不能适配，就需要进行修改适配。

2.Window Resizer插件用于测试开发的网站在不同的分辨率下显示的效果。打开开发的网站，网站加载完成后打开插件，选择不同的分辨率进行测试。

3.Web Deloper插件，主要用于对所开发网站的调试。可以去除cookie，去除图片，去除和修改css进行调试，便于整个网站在上架前测试工作的进行。

Grunt介绍：对于grunt的配置，已经在webStorm中配置完成。在文件gruntTest中能够进行前端所需要的grunt操作。具体操作写在gruntTest目录下的GruntFile.js文件下。

总结的这么详细还是不会简直了唉继续加油

上个前端的交接文档感觉真的不错相关推荐

离职交接文档_如何写好离职工作交接文档？
交接文档的重要性一个业务员与客户建立起了私下的信赖关系,可是当他因工作调动而离开原岗位,由另一个人接替的时候,原来的关系很可能就会一下子断裂. 百货商店也一样,如果柜台的营业员换人了,有些顾客就不会 ...
前端开发规范文档(html,css,js)
首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的 ...
项目交接文档_项目管理反思
我从尾巴到头来反思我在公司期间和郑州扁担科技有限公司的合作. 我和扁担科技的李总最近的一次交谈,是关于交接项目的. 看到项目交接,可不要认为是项目完成交接哦,而是扁担科技因为人员离职的问题,导致没有能 ...
前端常用的文档及组件库
前端在使用过程中会用到很多的组件或者文档,需要进行引用.在此归纳自己常用的库目录一.W3school 官网推出教程:JS.HTML.CSS.XML等二.MDN(mdn web docs) 三. ...
华为方舟编译器来了，快！上！船！- 开发者文档 [源代码包/二进制包下载]
本次方舟编译器开源的是编译器框架部分源码,包括编译器中间表示(IR)和语言编译实现,同时搭配编译器其他二进制组件,实现Java程序到aarch64汇编指令的编译过程. 开发者可以通过如下方式获得相关代 ...
【交接文档】如何写好工作交接文档
反驳不需要写文档的言论有很多工程师都持有一个观点:"不用看(写)文档,文档都在代码里",还有一部分人认为,文档容易过时,很难跟上代码的更新节奏,因而没有必要写文档. 接手业务的时 ...
在Ubuntu 14.04 64bit上生成ATS本地离线文档
下面是在Ubuntu 14.04 64bit上生成ats本地离线文档的方法首先请安装配置好sphinx环境,参见我前面的博文 http://blog.csdn.net/tao_627/article ...
【板栗糖GIS】怎么将网络上只能在线预览文档另存为pdf（插件篇）
怎么将网络上只能在线预览文档另存为pdf(插件篇) 目录 1.使用插件,这里推荐FireShot,好用免费 2.安装该插件的方式 3.打开在线预览文档的网址 4.点击插件-截取整个页面并且-另存为pd ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
wps如何把文档上传到云服务器,WPS上传技巧：WPS怎么上传文件到云文档
摘要腾兴网为您分享:WPS上传技巧:WPS怎么上传文件到云文档,作业盒子,粤警民通,一直播,一起发等软件知识,以及悦考,手机虚拟机,党务管理信息系统,闪炫,数据提取工具,深度终端,爱酷学习网,首汽 ...

上个前端的交接文档感觉真的不错

Web前端开发工作交接报告

一、项目总体逻辑及后续工作进展

二、各文件具体含义说明

三、Krpano操作

一、如何添加动态图

第一步：在scene之后添加如下代码

第二步：在要设置热点的图片中添加热点

二、使用导航条按钮

四、项目优化

五、前端辅助工具说明

上个前端的交接文档感觉真的不错相关推荐

最新文章

热门文章

上个前端的交接文档 感觉真的不错

Web前端开发工作交接报告

一、项目总体逻辑及后续工作进展

二、各文件具体含义说明

三、Krpano操作

一、如何添加动态图

第一步：在scene之后添加如下代码

第二步：在要设置热点的图片中添加热点

二、使用导航条按钮

四、项目优化

五、前端辅助工具说明

上个前端的交接文档 感觉真的不错相关推荐

最新文章

热门文章

上个前端的交接文档感觉真的不错

上个前端的交接文档感觉真的不错相关推荐