前端开发手册文档..docVIP

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