前端開發(fā)手冊文檔_第1頁
前端開發(fā)手冊文檔_第2頁
前端開發(fā)手冊文檔_第3頁
前端開發(fā)手冊文檔_第4頁
前端開發(fā)手冊文檔_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

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

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

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

4、下：在pageinit方法中初始化頁面元素的綁定事件，頁面數(shù)據(jù)的預加載，如:驗證碼，賬號列表$("#loginView").live("pageinit", function() $("#logonBtn").on("click", login); -對于動態(tài)生成的數(shù)據(jù)：select下拉框，如果需要從服務(wù)器獲取數(shù)據(jù)，則通過$.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'); ); 對于listview，動態(tài)生成后，需要調(diào)用listview("refresh")-Init.js中配置手機server的地址以及在開發(fā)模式

6、設(shè)置var devMode = true;在手機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)用,方法描述請看

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

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

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

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

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

12、代碼,mbank.action.cfg這個文件指定控制關(guān)系和加載順序.View這個文件夾存放了html頁面資源,和controller中的js是一一對應(yīng)的,方便維護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="#">注冊</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、 實際操作用得到的方法3,如果要發(fā)送請求,請求數(shù)據(jù)并且拼接在dom中,拼接的對象還有后續(xù)的事件就這樣寫:(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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論