前端开发手册文档讲解.docx

PAGE PAGE # / 12 手机前端入门实例快速开发指南 1文档管理 1.1文档信息 文档名称 手机前端入门实例开发指南 保密级别 文档版本编号 制作人 制作日期 复审人 复审日期 1.2修改记录 时间 版本 说明 修改人 内容摘要 新手入门参考文档，辅助入门。 目的 熟悉并掌握 前端的开发流程 前端的开发规范 通过做简单的示例完成页面流程的开发 前提条件 前端开发都是基于jquery进行开发，引入js时要先引入jquery.js文件. 4.1软件环境 1、开发环境：eclipse 5开发规范 一、 目录结构 1、H5页面文件目录位于 www/views目录下，针对不同功能模块，建立不同的子 目录。JS文件位于www/js/controllers 目录下，与页面相同，不同的模块建立 不同的子目录。如以下例子： www/views/demo/demo.html www/js/c on trollers/demo/demo.js H5文件名与对应的JS文件名相同。文件名要求 H5文件名与对应的JS文件名相同。 文件名以小写开头，取有意义的英文名字, 文件格式 UTF-8格式 四、 页面中id命名要求 除入口页外，一个页面就是一个 Page,每个Page有唯一 ID，该ID命名以文件 名开头，以View结尾，如demoView 页面中包含的链接，button，其ID以Btn结尾，如log in ViewBtn 五、 H5内容要求 页面类型模块功能入口页以及子页面 功能模块的入口页，需要包含基本类库，以及入口页对应的 JS脚本，其他子页 面只有一个Page内容 页面只有html内容，无任何Javascript 脚本。 对没有任何业务逻辑控制的页面，可以 href的方式直接跳转 对于有业务逻辑控制的页面，应绑定链接事件方式，在事件中需要显示 load ing 层，转到目标页面后，再隐藏loading层。(未实现原生loading显示) 页头页尾固定在head添加如下属性 data-po siti on="fixed" data-ta p-toggle="false" 六、 JS内容要求 以匿名函数创建并执行的方式新建 JS脚本 (fun ctio n(){ //业务逻辑在此添加 })(); 业务逻辑需要实现以下: 在pageinit方法中初始化页面元素的绑定事件，页面数据的预加载，如：验证码, 账号列表 $("#logi nView").live(" pagei ni t", fun ctio n(){ $("#logo nBtnJ.on ("click", logi n); 方法获取，并在定对于动态生成的数据： select下拉框，如果需要从服务器获取数据，则通过 方法获取，并在定 $.mba nk.p ajax( "queryMyEquati on. do" ,formData1,forBala nee); 义forBala nee 方法处理返回结果， p rocessRes pon se: fun cti on( data) { var aList = data.aList; $.each(aList, fun cti on() { $('< op ti on value="' + this.id + '">' + this .n ame + '</o ptio n>').a ppen dTo('#aSelect'); }); } 对于listview ，动态生成后，需要调用listview("refresh") Init.js中配置手机server的地址以及在开发模式设置 var devMode = true ; 在手机server 端生产模式修改 Cperty XXX 属性为false 七、 关于字典数据 业务系统用到的字典数据在需要反显名称的清空下，可在 mba nk.utils.js 定义 获取名称的方法，如getSexName 在需要的地方调用： $("#sex_ name").text($.mba nk.utils.getSexName($.mba nk.c on text.sex)); 少数数据可在select下直接添加，另外可在数据字典 dataDict.js 添加数据 Mbank.utils.js 中有公共的方法，如果功能需要可以调用,方法描述请看js文件 八、 关于 $mba nk.core 可获取当前登录会话信息：$.mbank.customer 获取上下文提交的数据：$.mba nk.co ntext.logi nN ame 保存表单数据：$.mbank.saveFormData(当前页调用) 填充表单数据：$.mbank.setFormData (下一页调用) 页面导航:$.mbank