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

1、手機(jī)前端入門(mén)實(shí)例快速開(kāi)發(fā)指南1/ 121 文檔管理1.1 文檔信息文檔名稱手機(jī)前端入門(mén)實(shí)例開(kāi)發(fā)指南保密級(jí)別文檔版本編號(hào)制作人制作日期復(fù)審人復(fù)審日期1.2 修改記錄時(shí)間版本說(shuō)明修改人2/ 122 內(nèi)容摘要新手入門(mén)參考文檔，輔助入門(mén)。3 目的熟悉并掌握前端的開(kāi)發(fā)流程前端的開(kāi)發(fā)規(guī)范通過(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

2、/js/controllers 目錄下，與頁(yè)面相同，不同的模塊建立不同的子目錄。如以下例子：www/views/demo/demo.htmlwww/js/controllers/demo/demo.js二、文件名要求文件名以小寫(xiě)開(kāi)頭，取有意義的英文名字，H5文件名與對(duì)應(yīng)的JS 文件名相同。三、文件格式UTF-8 格式3/ 12四、頁(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è)

3、面類型模塊功能入口頁(yè)以及子頁(yè)面功能模塊的入口頁(yè)，需要包含基本類庫(kù)，以及入口頁(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 腳本(funct

4、ion()/ 業(yè)務(wù)邏輯在此添加)();業(yè)務(wù)邏輯需要實(shí)現(xiàn)以下：在 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é)果，processResponse: function(data)

5、 var aList = data.aList;$.each(aList, function() $( + + ).appendTo(#aSelect);4/ 12);對(duì)于 listview，動(dòng)態(tài)生成后，需要調(diào)用listview(refresh)-Init.js 中配置手機(jī)server 的地址以及在開(kāi)發(fā)模式設(shè)置vardevMode =true;在手機(jī) server端生產(chǎn)模式修改Cperty XXX屬性為 false七、關(guān)于字典數(shù)據(jù)業(yè)務(wù)系統(tǒng)用到的字典數(shù)據(jù)在需要反顯名稱的清空下，可在mbank.utils.js定義獲取名稱的方法，如 getSexName在

6、需要的地方調(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)看 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.s

7、etFormData （下一頁(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 去操作原生現(xiàn)在就只需要用 : $.mbank. closeWindow()頁(yè)面顯示或隱藏loading層: $.mbank.showLoading/hideLoading/isLoading()調(diào)用原生的提示框 : $.mbank. cl

8、oseWindow()十、關(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_plugins.js這個(gè)文件匯總了所有的插件 , 標(biāo)明了 js 方法和 java 類的對(duì)應(yīng)關(guān)系 , 通過(guò)這個(gè)文件找到相應(yīng)的 js 文件 .如 :/mobileApp/platforms/android/assets/w

9、ww/plugins/com.yuchengtech.mobileapp.plugins/www/progress.js 這個(gè)文件中的方法定義了調(diào)用原生需要操作的回調(diào)函數(shù)以及傳遞給原生的參數(shù) .再根據(jù)配置的 java 類路徑調(diào)用原生 .5/ 12十一、開(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ā)大部分功能性交易都是H5 做的 ,應(yīng)該遵循這樣一種開(kāi)發(fā)流程 :1,UED 部門(mén)出設(shè)計(jì)行方確認(rèn)通過(guò)2,美工依據(jù)設(shè)計(jì)完成全局CSS的編寫(xiě)3,H5 開(kāi)發(fā)人員

10、依據(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 入門(mén)實(shí)例6.1 實(shí)例一 :HelloWorld1、創(chuàng)建如下工程目錄視圖6/ 12工程劃分為業(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è)只需要是一個(gè) page 容器不需要引入 js 和 css7/ 12Common 文

11、件夾存放了公共的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)行的操作);)();8/ 12Controllers 文件夾存放了控制 view 的 js 代碼 ,mbank.action.cfg 這個(gè)文件指定控制關(guān)系

12、和加載順序 .View 這個(gè)文件夾存放了html 頁(yè)面資源 ,和 controller 中的 js 是一一對(duì)應(yīng)的,方便維護(hù)3、完成 helloworld3.1 創(chuàng)建 html在 view 文件夾下創(chuàng)建demo 和 demo.html, 文件夾名字和文件名保持一致9/ 12jQuery Mobile WebMobile演示 2登錄 注冊(cè) 關(guān)于 底部 3.2 配置 mabnk.action.cfg10/12在 mabnk.action.cfg 中指定關(guān)系 ,如上圖 .3.3 完成配置的 js在 controllers 中創(chuàng)建 demo 文件夾和demo.js 文件 .( function()$(d

13、ocument).ready(function()$( #loginViewBtn).on(click,showLoginPage);$( #registViewBtn).on(click, showRegistPage););functionshowLoginPage()$.mbank.showLoading();$.mbank.goPage(demo/login.html);functionshowRegistPage()$( #registView).remove();/ 清除緩存$.mbank.showLoading();$.mbank.goPage(demo/regist.html)

14、;)();4、實(shí)際操作用得到的方法11/ 123, 如果要發(fā)送請(qǐng)求, 請(qǐng)求數(shù)據(jù)并且拼接在dom 中 , 拼接的對(duì)象還有后續(xù)的事件就這樣寫(xiě):( function()$.mbank.pajax(queryMyEquation.do,formData1,forBalance);functionforBalance(data)console.log(data);var balance=$(可用余額+data.avlBal+);$( #balance).append(balance);$( #balance).css(display, block);)();綁定到動(dòng)態(tài)拼接的dom 上的事件方法需要寫(xiě)在匿名函數(shù)外層, 否則找不到Function other()/做一些事情 ;4, 如果是動(dòng)態(tài)下拉框, 就使用如下寫(xiě)法:select下拉框，如果需要從服務(wù)器獲取數(shù)據(jù)，則通過(guò)$.mbank.pajax(queryMyEquation.do,formData1,forBalance);方法獲取，并在定義 forBalance方法處理返回結(jié)果，F(xiàn)unction forBalance(data)/ 格式化返回?cái)?shù)據(jù)為