14年工作回顾（一）
前言
本文开始会把之前项目中遇到的一些问题进行分类整理，并得出其经验值。也许其本身在今天的技术架构中没有任何实用价值，但在项目开发中能有举一反三的作用。
关于网站cms
在14年开始的前端工作中，很大一部分工作是开发维护cms的站点项目。主要是基于javaeecms搭建的基于内容的网站栏目的管理和内容的管理。其中遇到和总结的一些经典问题进行了记录和个人简单的总结。
cms网站问题列表（一 ）
以下的问题属于网站开发中的问题：
- 添加栏目的时候必须按顺序设置栏目模型 （设置为独占一行的）内容模型 （设置必要的内容） 栏目模型全选 内容模型选择部分 内容模型的内容类型为必选的
- 添加栏目之前 要先添加对应的栏目以及页面的对应的模版 然后设置 设置样式时 设置左侧菜单 顶部菜单 列表页面 详情页面 网站地图
- 选中效果以及对应的js 可以看到对应的关联样式 其中的id必须准确的对应后台的数据
- 现在本地测试效果 然后生产添加栏目 对应的文件以及图片传到对应的地址即可
- 一级栏目是添加不了的 可以通过添加一个二级栏目 然后修改目录为顶级栏目
- 栏目中如果需要标题 则加标题图
总结：从上面的问题中可以分类总结，其核心问题是 ：网站栏目的设置教程 ； 样式与数据的对应关系 ；
cms网站问题列表（二）
1 栏目的配置流程要正确 2 必要的页面文件一定有 3 如果需要图片支持 栏目模型的文件要加上标题图 内容图 4 内容模型的内容类型一定要有 5 生产与测试的位置 图片路径是不一致的 6 configure 中配置图片路径 imgurl=/opt/apache-tomcat-test-hnsxzptcms-17055/zjkjyycms 7 u.xml 浙一网站的要配置成home目录的 /opt/apache-tomcat-test-hnsxzptcms-17055/zjkjyycms/u luence =”/opt/apache-tomcat-test-hnsxzptcms-17055/zjkjyycms/lucene 8 全文检索的功能，中，生成索引的文章目录时间不能太长
总结：从上面的问题列表中可以分析总结到： 1 栏目的配置流程问题，内容类型设置 2 页面中的必要文件，图片的使用； 3 不同环境的配置差别 4. 配置中需要增加图片部分的配置 5 个别功能点 ：比如全文检索中是有使用建议的 6 服务器配置中需要设置成对应的项目地址，这个地址和项目有关，和图片有关
cms网站问题列表（三）
1 选中高亮样式 ：
- 首页以及横向导航的样式修改 和选中的效果
- 左边切换的选中效果
- 文章列表进入文章的显示以及选中效果
- 文章内容的参数选中效果 以及上下一篇的选中效果
2 浏览器的兼容效果
3 窄屏适应问题
window.onresize = window.onload = function(){
var lw = $(window).width();
if( lw < 1024){
$( ".footall").css( "width", "1024px");
$( ".headerall").css( "width", "1024px");
$( "#banner").css( "width", "1024px");
$( ".bodytop").css( "width", "1024px");
} else if(lw>=1024){
$( ".footall").css( "width", "100%");
$( ".headerall").css( "width", "100%");
$( "#banner").css( "width", "100%");
$( ".bodytop").css( "width", "100%");
}
} 4 验证码 通用样式
<div class= "input-block" style ="overflow :hidden;width:250px;">
<input id ="code_text" type= "text" class ="inputtext" placeholder="验证码" style=" float: left; width: 150px; padding-left: 0; text-align: left; padding: 0 10px" />
<img id ="code_img2" width= "82px;" height ="36px;" style="margin-top: 0px;margin-left: 0px; float: right;" />
</div >
style="float : left;width: 150px;padding-left :10px;text-align: left;"
width="82px;" height= "36px;" style ="margin-top: 0px;margin-left : 0px;float :right;"5 站长统计：
http://tongji.cnzz.com/main.php?c=site&a=show&from=login
总结：从上面的问题列表中可以分析总结到： 1 对于一个项目中通用的交互需要总结分类，让ui、前端统一去统计，统一优化修改 2 浏览器的兼容效果是一个专题性质的，需要统一去测试，给出前端的兼容效果 3 对于宽屏窄屏，一般设计并没有做多种方案，所以这种方案建议前置提前让设计给出响应的ui交互稿，前端对应的在window.onsize或者onload方法中，进行更改样式，当然建议是通过修改类，而不是这样写一行行的样式代码。 4 对于有些常用的组件代码、样式或者功能，建议写成工具类，或者文档共享出来，没有的话，你也会像我这样复制粘贴到自己的记事本然后复制粘贴用，很低效。 5 目前比较常规的网站pv监测会是站长统计，当前也有其他更好的服务商提供，或者自己做数据埋点。（需要注意的是：如果你用了站长工具，那么对应的账号密码需要记住）
微信测试
设置运营者
路径以及规则：安全中心 里 管理员微信号 可以设置四个运营者 运营者都是可以绑定其他人的微信号 发送消息的
账号信息
需要你在一个方便的位置记录微信账号的相关信息，比如用户名，密码，appid，secret.
微信菜单的定义规则
目前自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“…”代替。
这部分主要是做需求评审的时候需要和产品统一确认沟通好，避免有风险的需求提出。
掌握健康 （微信模块）
使用原则： 互相独立，可以单独配置入口
包括了多个模块，每个模糊互相独立，有自己的业务流程，需要避免页面切换的死循环。
需要的颜色搭配
这里需要less做相关的配置，和设计统一思想。 主题颜色 、主题背景色、提示的背景颜色 、提示色、页面的背景颜色
问题小结 1
科室列表页面增加覆盖的效果\医院的网址全部用连接的形式\三星手机字体图标的解决方案 智能导诊的流程问题 \微信的地址问题\项目的更新与维护问题
问题小结 2
1抢救药物打不开 2 急救的文章标题显示不全 3 智能导诊 提示语多一个 的 4 健康咨询的加载下一页 变成手势 （带考虑）
页面显示
接口描述字段为空是否返回？ 页面判断去空后不显示与否？ 关于医生描述字段 是否需要追加其他显示字段
模块问题反馈
- 医院简介部分 医院简介中展示的医院等级没有，可能功能设计上没有设计医院等级可编辑字段。 医院简介的可自定义的编辑字段，可自定义的展示字段的名称
- 科室医生部分 分类的科室医生的，增加科室关联，科室分类表以及科室分类关联表 针对医生详情的展示字段，展示称谓，可自定义展示的字段，需要增加的字段。 其中对于小需求的变更是更改原项目页面还是说新建项目，是否做重复引用。
- 健康资讯以及健康百科的部分 健康资讯 首页做区别，针对医院id不同的时候进入的首页不同，与后台配置相关，进入的为不同的页面。 之后如果需要对首页做特殊配置，应该怎么去实现？
- 来院路线，增加百度地图以及腾讯地图的两个展示方法
第二版本参数使用说明 ：
备注 ：参数要按照标准格式填写 ；参数全部必填，设计相应的页面还需要另外的参数。
1 version_no 版本号 1.0， 1.1 等 ，默认是1.0，区别使用不同的版本。 2 hos_style_no 1-9999 医院风格编号 ， 唯一标识风格号 ，默认是0，用于某些医院定制的风格 。 3 hos_name 医院名称 需要base64 的原方法加密过的 ，需要医院名称（全名） ，默认值是”掌握健康”， 用于显示页面的标题。 4 style_color 风格颜色 ，默认值 “darkgreen”, 两种 一种是简单的医院名称首字母简拼， 为医院定制的颜色，如sxzyy ;另一种是颜色英文名称 ，如black,green等。 5 client_type 页面类型 ，默认值 01，01 手机微信版， 02 手机支付宝版 ，03 手机客户端内嵌页面， 04 ipad页面 ， 05 pc页面， 06 其他 。
地图调用腾讯地图代码（后续已经改为百度地图）
<iframe src="http://apis.map.qq.com/uri/v1/marker?marker=coord:30.257687,120.178216;title:浙大一院;addr:中国浙江省杭州市上城区庆春路79号&coord_type=2&referer=浙大一院微信" style="width: 100%;height: 100%;min-height: 500px;"></iframe>
菜单配置、样式文件生成，项目中的api转发配置
1 菜单配置地址 2 样式文件生成地址 3 配置的转发地址
<bean id= "zwjkxxx" class="xxx">
<constructor-arg name= "url" value="http://api.ucmed.cn/api/xxx" />微信菜单配置格式
最好做好备份，方便调整以及恢复，微信菜单的json格式需要牢记。（要注意连接符号 ，格式为json数据格式）
{
"button": [
{
"name": "就医指南",
"sub_button": [
{
"type": "click",
"name": "智能导诊",
"key": "ZNDZ",
"sub_button": []
}]
}]
} 掌握健康微信小结
1 需要明确各个模块的地址，配置项，通用的主题色、相关色 2 需要明确模块与医院的匹配关系 3 对于问题要定位到具体模块，每个模块可以的话都追加其专门的负责人 4 针对持续维护、优化的功能点增加版本概念，针对重复可用的皮肤追加皮肤使用效果图，已经适用的医院 5 针对通用的颜色进行统计，支持皮肤生成，支持多端的支持显示 6 对于个别模块对第三方的依赖以及使用需要明细为教程，降低使用维护成本 7 熟练掌握微信菜单配置以及其生效时间，调试方式