前端開(kāi)發(fā)手冊(cè)文檔

1、手機(jī)前端入門實(shí)例快速開(kāi)發(fā)指南1 文檔管理1.1 文檔信息文檔名稱手機(jī)前端入門實(shí)例開(kāi)發(fā)指南保密級(jí)別文檔版本編號(hào)制作人制作日期復(fù)審人復(fù)審日期1.2 修改記錄時(shí)間版本說(shuō)明修改人2 內(nèi)容摘要新手入門參考文檔，輔助入門。3 目的熟悉并掌握l(shuí) 前端的開(kāi)發(fā)流程l 前端的開(kāi)發(fā)規(guī)范l 通過(guò)做簡(jiǎn)單的示例完成頁(yè)面流程的開(kāi)發(fā)4 前提條件前端開(kāi)發(fā)都是基于jquery進(jìn)行開(kāi)發(fā),引入js時(shí)要先引入jquery.js文件.4.1 軟件環(huán)境1、 開(kāi)發(fā)環(huán)境：eclipse5 開(kāi)發(fā)規(guī)范一、 目錄結(jié)構(gòu)1、H5頁(yè)面文件目錄位于www/views目錄下，針對(duì)不同功能模塊，建立不同的子目錄。JS文件位于www/js/controllers

2、目錄下，與頁(yè)面相同，不同的模塊建立不同的子目錄。如以下例子：www/views/demo/demo.htmlwww/js/controllers/demo/demo.js二、 文件名要求文件名以小寫(xiě)開(kāi)頭，取有意義的英文名字，H5文件名與對(duì)應(yīng)的JS文件名相同。三、 文件格式UTF-8格式四、 頁(yè)面中id命名要求除入口頁(yè)外，一個(gè)頁(yè)面就是一個(gè)Page，每個(gè)Page有唯一ID，該ID命名以文件名開(kāi)頭，以View結(jié)尾，如demoView頁(yè)面中包含的鏈接，button，其ID以Btn結(jié)尾，如loginViewBtn五、 H5內(nèi)容要求頁(yè)面類型模塊功能入口頁(yè)以及子頁(yè)面功能模塊的入口頁(yè)，需要包含基本類庫(kù)，以及入

3、口頁(yè)對(duì)應(yīng)的JS腳本，其他子頁(yè)面只有一個(gè)Page內(nèi)容頁(yè)面只有html內(nèi)容，無(wú)任何Javascript腳本。對(duì)沒(méi)有任何業(yè)務(wù)邏輯控制的頁(yè)面，可以href的方式直接跳轉(zhuǎn)對(duì)于有業(yè)務(wù)邏輯控制的頁(yè)面，應(yīng)綁定鏈接事件方式，在事件中需要顯示loading層，轉(zhuǎn)到目標(biāo)頁(yè)面后，再隱藏loading層。（未實(shí)現(xiàn)原生loading顯示）頁(yè)頭頁(yè)尾固定在head添加如下屬性data-position="fixed" data-tap-toggle="false"六、 JS內(nèi)容要求以匿名函數(shù)創(chuàng)建并執(zhí)行的方式新建JS腳本(function()/業(yè)務(wù)邏輯在此添加 )();業(yè)務(wù)邏輯需要實(shí)現(xiàn)以

4、下：在pageinit方法中初始化頁(yè)面元素的綁定事件，頁(yè)面數(shù)據(jù)的預(yù)加載，如:驗(yàn)證碼，賬號(hào)列表$("#loginView").live("pageinit", function() $("#logonBtn").on("click", login); -對(duì)于動(dòng)態(tài)生成的數(shù)據(jù)：select下拉框，如果需要從服務(wù)器獲取數(shù)據(jù)，則通過(guò)$.mbank.pajax("queryMyEquation.do",formData1,forBalance);方法獲取，并在定義forBalance方法處理返回結(jié)果，pro

5、cessResponse: function(data) var aList = data.aList; $.each(aList, function() $('<option value="' + this.id + '">' + + '</option>').appendTo('#aSelect'); ); 對(duì)于listview，動(dòng)態(tài)生成后，需要調(diào)用listview("refresh")-Init.js中配置手機(jī)server的地址以及在開(kāi)發(fā)模式

6、設(shè)置var devMode = true;在手機(jī)server端生產(chǎn)模式修改Cperty XXX屬性為false七、 關(guān)于字典數(shù)據(jù)業(yè)務(wù)系統(tǒng)用到的字典數(shù)據(jù)在需要反顯名稱的清空下，可在mbank.utils.js定義獲取名稱的方法，如getSexName在需要的地方調(diào)用：$("#sex_name").text($.mbank.utils.getSexName($.mbank.context.sex);少數(shù)數(shù)據(jù)可在select下直接添加，另外可在數(shù)據(jù)字典dataDict.js添加數(shù)據(jù)Mbank.utils.js中有公共的方法,如果功能需要可以調(diào)用,方法描述請(qǐng)看

7、js文件八、 關(guān)于$mbank.core可獲取當(dāng)前登錄會(huì)話信息:$.mbank.customer獲取上下文提交的數(shù)據(jù)：$.mbank.context.loginName保存表單數(shù)據(jù)：$.mbank.saveFormData(當(dāng)前頁(yè)調(diào)用)填充表單數(shù)據(jù)：$.mbank.setFormData（下一頁(yè)調(diào)用）頁(yè)面導(dǎo)航:$.mbank.goPage提交請(qǐng)求到服務(wù)端:$.mbank.pajax九、 關(guān)于調(diào)用原生方法調(diào)用原生的js方法寫(xiě)在mbank.core.js文件里,js調(diào)用原生是通過(guò)cordova的插件實(shí)現(xiàn)的,但是這一步已經(jīng)經(jīng)過(guò)封裝,我們只需要知道如何調(diào)用就OK,例如關(guān)閉webview這個(gè)動(dòng)作需要js

8、去操作原生現(xiàn)在就只需要用:$.mbank.closeWindow()頁(yè)面顯示或隱藏loading層:$.mbank.showLoading/hideLoading/isLoading()調(diào)用原生的提示框:$.mbank.closeWindow()十、 關(guān)于原生插件以android為例簡(jiǎn)述插件調(diào)用的原理/mobileApp/platforms/android/res/xml/config.xml這個(gè)目錄的文件和/mobileApp/config.xml這一文件保持一致是js調(diào)用原生的基礎(chǔ).在/mobileApp/platforms/android/assets/www/cordova_plugi

9、ns.js這個(gè)文件匯總了所有的插件,標(biāo)明了js方法和java類的對(duì)應(yīng)關(guān)系,通過(guò)這個(gè)文件找到相應(yīng)的js文件.如:/mobileApp/platforms/android/assets/www/plugins/com.yuchengtech.mobileapp.plugins/www/progress.js這個(gè)文件中的方法定義了調(diào)用原生需要操作的回調(diào)函數(shù)以及傳遞給原生的參數(shù).再根據(jù)配置的java類路徑調(diào)用原生.十一、 開(kāi)發(fā)流程1、定義頁(yè)面跳轉(zhuǎn)流程。（注意，1個(gè)頁(yè)面中包含多個(gè)js腳本，需要都包含在controller中，否則無(wú)法初始化）2、新建H5頁(yè)面3、新建對(duì)應(yīng)JS腳本備注:個(gè)人認(rèn)為混合開(kāi)發(fā)大部分

10、功能性交易都是H5做的,應(yīng)該遵循這樣一種開(kāi)發(fā)流程:1,UED部門出設(shè)計(jì)行方確認(rèn)通過(guò)2,美工依據(jù)設(shè)計(jì)完成全局CSS的編寫(xiě)3,H5開(kāi)發(fā)人員依據(jù)開(kāi)發(fā)規(guī)范套用CSS進(jìn)行開(kāi)發(fā)4,搭建手機(jī)server環(huán)境,init.js修改為手機(jī)server地址進(jìn)行接口調(diào)試6 入門實(shí)例6.1 實(shí)例一:HelloWorld1、 創(chuàng)建如下工程目錄視圖工程劃分為業(yè)務(wù)層面的控制層和顯示層.views文件夾用于存放html文件,views中的每一個(gè)文件夾對(duì)應(yīng)一個(gè)業(yè)務(wù)功能,每一個(gè)業(yè)務(wù)功能有一個(gè)入口頁(yè)面,入口頁(yè)面引入了全部的js文件和css文件.如下圖所示:一個(gè)功能對(duì)應(yīng)的html:入口頁(yè)需要引入相應(yīng)的js文件和css文件,其他非入口頁(yè)

11、只需要是一個(gè)page容器不需要引入js和cssCommon文件夾存放了公共的js文件2、 頁(yè)面初始化方法一個(gè)功能頁(yè)相對(duì)應(yīng)的js文件,其中demo.js是入口頁(yè),需要注意的是入口頁(yè)初始化方法需要使用:(function()$(document).ready(function()/入口頁(yè)面初始化需要進(jìn)行的操作);)();非入口頁(yè)如login.js使用如下方法:(function()$("#頁(yè)面pageId").live("pageinit", function()/非入口頁(yè)面初始化需要進(jìn)行的操作);)();Controllers文件夾存放了控制view的js

12、代碼,mbank.action.cfg這個(gè)文件指定控制關(guān)系和加載順序.View這個(gè)文件夾存放了html頁(yè)面資源,和controller中的js是一一對(duì)應(yīng)的,方便維護(hù)3、 完成helloworld3.1 創(chuàng)建html在view文件夾下創(chuàng)建demo和demo.html,文件夾名字和文件名保持一致<!DOCTYPE HTML><html> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta cont

13、ent="text/html; charset=UTF-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport"> <meta content="telephone=no" name="format-detect

14、ion"><title>jQuery Mobile Web</title><link rel="stylesheet" href="././css/themes/default/jquery.mobile-1.4.3.min.css"> <link rel="stylesheet" href="././css/jqm-dlns.css"> <script type="text/javascript" charset="

15、;utf-8" src="././cordova.js"></script> <script type="text/javascript" charset="utf-8" src="././js/common/jquery-1.8.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="././js/core/init.j

16、s"></script> <script type="text/javascript" charset="utf-8" src="././js/common/jquery.mobile-1.4.3.js"></script> <script type="text/javascript" charset="utf-8" src="././js/dataDict.js"></script></hea

17、d> <body> <div data-role="page" id="demoView"><div data-role="header"><h1>Mobile 演示2</h1></div><div data-role="content"><li><a id="loginViewBtn" href="#">登錄</a></li> <l

18、i> <a id="registViewBtn" href="#">注冊(cè)</a></li><li><a href="about.html" >關(guān)于</a></li></div><div data-role="footer"><h4>底部</h4></div></div></body></html>3.2 配置mabnk.action

19、.cfg在mabnk.action.cfg中指定關(guān)系,如上圖.3.3 完成配置的js在controllers中創(chuàng)建demo文件夾和demo.js文件.(function()$(document).ready(function()$("#loginViewBtn").on("click",showLoginPage);$("#registViewBtn").on("click", showRegistPage););function showLoginPage()$.mbank.showLoading();$.mba

20、nk.goPage('demo/login.html'); function showRegistPage() $('#registView').remove();/清除緩存 $.mbank.showLoading();$.mbank.goPage('demo/regist.html');)();4、 實(shí)際操作用得到的方法3,如果要發(fā)送請(qǐng)求,請(qǐng)求數(shù)據(jù)并且拼接在dom中,拼接的對(duì)象還有后續(xù)的事件就這樣寫(xiě):(function()$.mbank.pajax("queryMyEquation.do",formData1,forBalance);function forBalance(data)console.log(data);var balance=$('<div class="ui-block-a" onclick=”other()”>可用余額</div>+<div class="ui-block-b">'+data.avlBal+'</div>');$("#balance").a