本文档由小幺鸡编辑

自主原创型步骤如下:

步骤1. 收到审核仔细阅览其内容并搞清楚需求 注意:已接收到设计稿 

步骤2. 用ps整体预览设计图,如有动画或者点击发生事件需和设计师沟通效果。

步骤3. 将网站需要的素材及元素进行切片 

注意:

(1)切出的图片,命名格式要规范,禁止使用中文或全数字格式来命名 

(2)切出大尺寸图片,保存时选择品质参数一般设置为60-80 

(3)小图标要使用雪碧图,将多个小图标拼接起来 

(4)切出png格式图片,保存之前需要把白色背景隐藏


步骤4. 先整体框架搭建,选好前端js框架,主流框架:bootstrapjs、Vuejs、jQueryjs、mui、Elment 

 注意:


(1)PC端开发:页面使用px像素,标签、属性兼容性IE8以上,页面内容如果在居中位置,就固定一个1200px包裹页面内容,让其居中。

(2)移动端开发:建议使用以前做过的借鉴网站的兼容框架拿过来修改,如引用媒体查询、flexible.js(减少开发时间);按照设计搞的布局及位置尺寸,移动端要注意rem设定格式,计算px与rem换算


步骤5. 边开发边测试兼容性 

步骤6. 添加邮箱提交的js和留言格式,测试提交 

注意:查看邮箱是否提交地址(http://data.haoshunjia.com/home/Login.aspx),账号密码统一由主管授权才能登陆
注意:邮箱提交留言格式需与发起审批人要求的邮箱提交格式相同。


步骤7. 添加商务通跳转,可设置一个类,用jQuery写一个跳转函数方法,添加需求所要的链接,改完测试是否可以跳转 

注意:跳转代码
pc端最好在新页面跳转,代码如下:
window.open(”里面为跳转的商务通代码”)

移动端在本页面打开,代码如下:
window.location.href=” 里面为跳转的商务通代码”;
注意:商务通代码:
316:
<script language="javascript" src="http://dft.zoosnet.net/JS/LsJS.aspx?siteid=DFT66147316&float=1&lng=cn"></script>
https://dft.zoosnet.net/LR/Chatpre.aspx?id=DFT66147316&lng=cn
409商务通:
mini弹窗:<script language="javascript" src="http://dct.zoosnet.net/JS/LsJS.aspx?siteid=dct24744409&float=1&lng=cn"></script>
跳转:http://dct.zoosnet.net/LR/Chatpre.aspx?id=dct24744409&lng=cn
749商务通:
跳转:https://pwt.zoosnet.net/lr/chatpre.aspx?id=pwt69431749
mini弹窗<script language="javascript" src="http://pwt.zoosnet.net/JS/LsJS.aspx?siteid=PWT69431749&float=1&lng=cn"></script>
472商务通:
跳转:http://pft.zoosnet.net/LR/Chatpre.aspx?id=PFT18394472&lng=cn
mini弹窗<script src="http://pft.zoosnet.net/JS/LsJS.aspx?siteid=PFT18394472&float=1&lng=cn"></script>
16952582商务通:
跳转:http://dct.zoosnet.net/LR/Chatpre.aspx?id=DCT16952582&lng=cn
mini弹窗:<script language="javascript" src="http://dct.zoosnet.net/JS/LsJS.aspx?siteid=DCT16952582&float=1&lng=cn"></script>


步骤8. 底部添加迷你弹框js代码(存放在底部body上面) 

注意:

  情况1、如添加商务通js代码后,发现不显示mini弹窗;原因(1)js代码添加不对;(2)推广部域名没有绑定商务通;

  情况2、检查商务通是否对应网站的业务类型,有注册类、会计类、学历类商务通。
  情况3、如在移动端遇到了mini弹窗样式不对,空隙过大或过小的情况。
解决:是移动端页面html设置了font-size的原因,解决方法:修改js代码,让他作用在body标签上,然后mini弹窗代码放在body外,如还存在样式问题,在body中寻找样式(一般为font-size)把它
在不影响页面的情况下删除。

步骤9. 各方面完成后,整体本地测试(界面、特效、提交、商务通、字眼) 

步骤10. 最后上线,进行整体在线测试,最好多个浏览器测试,主流浏览器:谷歌、360、搜狗、火狐 注意:若移动端链接,需要进行安卓和ios手机测试;

在浏览器上浏览新增的页面,并在控制台中检测站点加载速度。如发现加载速度过慢,有如下解决方法:
最主要的分为: 

(1)删除页面注释代码,多余累赘代码 

(2)页面css多的,需要重新建css文件并且转移至该文件

 (3)页面图片压缩,提高图片加载速度

 (4)无用的js代码删除,减少页面加载负荷量 步骤

步骤11.完成,并通知审批发起人,检查无误后评论审批。