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

àì夳堔傛蜴生んèń 2022-05-31 13:42 326阅读 0赞

# **Web前端开发工作交接报告** #

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

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

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

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

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

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

## **二、各文件具体含义说明** ##

图1.1 项目文件

表1-1 css目录介绍

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

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

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

表1-2 js文件夹介绍

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

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之后添加如下代码** ##

<table> 
 <tbody> 
 <tr> 
 <td>&lt;action name="do_crop_animation"&gt; &lt;!-- 为热点注册属性 --&gt; registerattribute(xframes, calc((imagewidth / %1) BOR 0)); registerattribute(yframes, calc((imageheight / %2) BOR 0)); registerattribute(frames, calc(xframes * yframes)); registerattribute(frame, 0);&nbsp; set(crop, '0|0|%1|%2');&nbsp; 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)); ); ); &lt;/action&gt;</td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td>&lt;hotspot name="spot2" url="skin/new_spotd1_gif.png" onloaded="do_crop_animation(64,64, 60);" &nbsp;&nbsp;ath="-15" atv="-12" οnclick="loadscene(get(linkedscene))" linkedscene="scene_01"/&gt;</td> 
 </tr> 
 </tbody> 
</table>

其中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进行压缩，原使用主机已经配置完成。只需要配置要压缩的文件目录即可。

<table> 
 <tbody> 
 <tr> 
 <td>cssmin:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stripBanners:true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;banner: '/*! &lt;%= pkg.name %&gt; &lt;%= grunt.template.today("yyyy-mm-dd") %&gt; */\n'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_target: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files: [{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expand:true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cwd:'src/',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src:'*.css',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest : 'test/css',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ext: '.min.css' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;uglify:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stripBanners:true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;banner: '/*! &lt;%= pkg.name %&gt; &lt;%= grunt.template.today("yyyy-mm-dd") %&gt; */\n'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_target: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files: [{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expand:true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cwd:'src/',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src:'*.js',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest : 'test/js'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</td> 
 </tr> 
 </tbody> 
</table>

将上面代码的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插件  用于测试开发的网站在不同的分辨率下显示的效果。打开开发的网站，网站加载完成后打开插件，选择不同的分辨率进行测试。