手机前端入门 实例快速开发指南

1 / 12

1 文档管理

1.1 文档信息

文档名称 保密级别 制作人 复审人 手机前端入门实例开发指南 文档版本编号 制作日期 复审日期 1.2 修改记录

时间 版本 说明 修改人 2 / 12

2 内容摘要

新手入门参考文档，辅助入门。

3 目的

熟悉并掌握

 前端的开发流程  前端的开发规范

 通过做简单的示例完成页面流程的开发

4 前提条件

前端开发都是基于jquery进行开发,引入js时要先引入jquery.js文件.

4.1 软件环境

1、 开发环境：eclipse

5 开发规范

一、 目录结构

1、H5页面文件目录位于www/views目录下，针对不同功能模块，建立不同的子目录。JS文件位于www/js/controllers目录下，与页面相同，不同的模块建立不同的子目录。如以下例子： www/views/demo/demo.html

www/js/controllers/demo/demo.js

二、 文件名要求

文件名以小写开头，取有意义的英文名字，H5文件名与对应的JS文件名相同。

三、 文件格式 UTF-8格式

3 / 12

四、 页面中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\ $(\"#logonBtn\").on(\"click\ }

------------------------------------------------------------------- 对于动态生成的数据：

select下拉框，如果需要从服务器获取数据，则通过

$.mbank.pajax(\"queryMyEquation.do\",formData1,forBalance);方法获取，并在定义forBalance方法处理返回结果，

processResponse: function(data) { var aList = data.aList; $.each(aList, function() {

$('' + this.name + '').appendTo('#aSelect');

4 / 12

}); }

对于listview，动态生成后，需要调用listview(\"refresh\")

-----------------------------------------------------------------

Init.js中配置手机server的地址以及在开发模式设置var devMode = true;

在手机server端生产模式修改Constans.property 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的插件实现的,但是这一步已经经过封装,我们只需要知道如何调用就OK,例如关闭webview这个动作需要js去操作原生现在就只需要用:$.mbank.closeWindow() 页面显示或隐藏loading层:$.mbank.showLoading/hideLoading/isLoading() 调用原生的提示框:$.mbank.closeWindow()

十、 关于原生插件

以android为例简述插件调用的原理

/mobileApp/platforms/android/res/xml/config.xml这个目录的文件和/mobileApp/config.xml这一文件保持一致是js调用原生的基础.

在/mobileApp/platforms/android/assets/www/cordova_plugins.js这个文件汇总了所有的插件,标明了js方法和java类的对应关系,通过这个文件找到相应的js文件.

如:/mobileApp/platforms/android/assets/www/plugins/com.yuchengtech.mobileapp.plugins/www/progress.js这个文件中的方法定义了调用原生需要操作的回调函数以及传递给原生的参数. 再根据配置的java类路径调用原生.

5 / 12

十一、 开发流程

1、定义页面跳转流程。（注意，1个页面中包含多个js脚本，需要都包含在controller中，否则无法初始化） 2、新建H5页面

3、新建对应JS脚本

备注:个人认为混合开发大部分功能性交易都是H5做的,应该遵循这样一种开发流程:

1,UED部门出设计行方确认通过 2,美工依据设计完成全局CSS的编写

3,H5开发人员依据开发规范套用CSS进行开发

4,搭建手机server环境,init.js修改为手机server地址进行接口调试

6 入门实例

6.1 实例一:HelloWorld

1、

创建如下工程目录视图

6 / 12

工程划分为业务层面的控制层和显示层.views文件夹用于存放html文件,views中的每一个文件夹对应一个业务功能,每一个业务功能有一个入口页面,入口页面引入了全部的js文件和css文件.如下图所示: 一个功能对应的html:

入口页需要引入相应的js文件和css文件,其他非入口页只需要是一个page容器不需要引入js和css

7 / 12

Common文件夹存放了公共的js文件

2、 页面初始化方法

一个功能页相对应的js文件,其中demo.js是入口页,需要注意的是 入口页初始化方法需要使用:

(function(){

$(document).ready(function(){

//入口页面初始化需要进行的操作 });

})();

非入口页如login.js使用如下方法: (function(){

$(\"#页面pageId\").live(\"pageinit\", function(){

//非入口页面初始化需要进行的操作 });

})();

8 / 12

Controllers文件夹存放了控制view的js代码,mbank.action.cfg这个文件指定控制关系和加载顺序.

View这个文件夹存放了html页面资源,和controller中的js是一一对应的,方便维护

3、 完成helloworld

3.1 创建html

在view文件夹下创建demo和demo.html,文件夹名字和文件名保持一致

9 / 12

content=\"width=device-width,

initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\" name=\"viewport\">

3.2 配置mabnk.action.cfg

10 / 12

在mabnk.action.cfg中指定关系,如上图.

3.3 完成配置的js

在controllers中创建demo文件夹和demo.js文件.

(function(){

$(document).ready(function(){

function showLoginPage(){ };

$.mbank.showLoading();

$.mbank.goPage('demo/login.html');

$(\"#loginViewBtn\").on(\"click\",showLoginPage); $(\"#registViewBtn\").on(\"click\", showRegistPage);

});

function showRegistPage(){

$('#registView').remove();//清除缓存 $.mbank.showLoading();

};

})();

$.mbank.goPage('demo/regist.html');

4、

实际操作用得到的方法

11 / 12

3,如果要发送请求,请求数据并且拼接在dom中,拼接的对象还有后续的事件就这样写: (function(){ })();

绑定到动态拼接的dom上的事件方法需要写在匿名函数外层,否则找不到 Function other(){//做一些事情}; 4,如果是动态下拉框,就使用如下写法:

$.mbank.pajax(\"queryMyEquation.do\",formData1,forBalance); function forBalance(data){

console.log(data);

var balance=$('

select下拉框，如果需要从服务器获取数据，则通过

$.mbank.pajax(\"queryMyEquation.do\",formData1,forBalance);方法获取，并在定

义forBalance方法处理返回结果， }

Function forBalance(data){

//格式化返回数据为json data=JSON.parse(data);

$.each(data,function(index, element) {

//遍历数据动态拼接option 添加到select元素

$(''+element.accountNo + '').appendTo(\"#crditNo\"); //刷新select重新渲染 };

$(\"#crditNo\").selectmenu( \"refresh\" );

});

对于listview，动态生成后，需要调用listview(\"refresh\");

12 / 12