1. 基本規範 符合web標準, 語義化html, 結構、表現、行為分離, 相容性優良. 頁面性能方面, 代碼要求簡潔明瞭有序, 儘可能的減小伺服器負載, 保證最快的解析速度. 2. 文件規範 html, css, js, image文件均放在約定的目錄中，基本目錄結構如2.1圖，並且目錄與文件名中 ...
說明：本規範只針對電力信息來制定的開發規範，其他用戶可作參考
1. 基本規範
符合web標準, 語義化html, 結構、表現、行為分離, 相容性優良. 頁面性能方面, 代碼要求簡潔明瞭有序, 儘可能的減小伺服器負載, 保證最快的解析速度.
2. 文件規範
html, css, js, image文件均放在約定的目錄中，基本目錄結構如2.1圖，並且目錄與文件名中不能包含中文。其中style放css文件，plugins放平臺的cordova插件,index.html為應用的首頁面，icon.png為應用的圖標。（cordova.js和cordova_plugins.js為與平臺交互的js文件，必須放在根目錄下）
圖2.1
3. 書寫規範
3.1. html 規範
1. 文檔類型聲明及編碼: 統一聲明為html5，meta屬性讓網頁寬度預設等於屏幕寬度，原始縮放比例為1.0，即100%顯示。編碼統一為utf-8, 書寫時利用IDE實現層次分明的縮進
2. css和js文件外鏈儘量放置在至<head>...</head>之間
3.移動端需要在title上面加上meta,設置width=device-width, initial-scale=1, user-scalable=no 等比例視窗代碼。
例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>首頁</title>
<meta charset="utf-8" />
</head>
<body>
這裡是內容
</body>
</html>
3.2. 引用css和js
由於國網使用的是crodova,為了使各個手機系統使用同一套代碼，所以，在建立移動APPWeb項目的時候，必須先引用cordova.js，而後再引用你的其他js和css。
(友情說明：cordova_plugins.js 不需要引用，需放在跟目錄，再調用cordova.js,會自動去讀取配置，所以大家不必去在意cordova_plugins.js。)
3.3. 常用插件
3.3.1. 登錄插件
mam.navigator.loadconfig.getUserInfo(1,function login(v) {
//getUserInfo 如果是蘋果，則不需要參數1 ，直接新版本
中，不需要參數，直接一個回調函數即可。mam.navigator.loadconfig.getUserInfo（callback）
});
3.3.2. 獲取數據插件
獲取數據分為get,post,getJSON,postJSON插件，推薦使用postJSON mam.navigator.ajax.postJSON(appcode,params,appservercode, successCallbac); /** 參數說明： appcode：應用部署的環境地址(例如”DLSH”對應：http://pubtest.js.sgcc.com.cn) params: 要發送給伺服器的數據，以 Key/value 的鍵值對形式表示。如果不需要傳參數，傳遞””即可。 appservercode：具體的介面資源(例如”API”對應：/dlsh_web/ajax/api.do) successCallback:成功回調 **/
3.3.3. 返回與退出應用插件
一般來說，每個應用都有返回至上一頁或者至指定的頁面，也可以直接退出當前應用，而這個js是每個應用都用到的，下麵的代碼示例可應用到所有的移動h5頁面中。
代碼示例：
var devicePlatform;//獲取當前的設備 function onDeviceReady() { devicePlatform = device.platform; if ("iOS"== devicePlatform) { mam.navigator.appmenu.setBackButton(null, null, "1");//這裡是設置蘋果手機的返回按鈕 } document.addEventListener('backbutton', hback); } function hback() { if ("iOS" == devicePlatform) { mam.navigator.appmenu.setBackButton(null, null, "0"); } document.removeEventListener('backbutton', hback); //第一種：直接退出 mam.navigator.appmenu.exitApp(); //第二種：直接跳轉到相對應的頁面 window.location.href = "../index.html"; //第三種：直接跳轉至上一頁 History.back(-1); }
註釋：還有其他各種插件未講解的，請參考移動交互動平臺JavaScript介面設計文檔
4. IOS和安卓常見問題總結
|
報錯信息 |
報錯例子 |
解決方法 |
|
andriod可以訪問頁面 |
Index.html |
蘋果區分大小寫，所以，必須要 |
|
訪問不了插件（未獲取到插件方 |
蘋果，安卓都不可以 |
1：看cordova.js和public.js是否引用 |
|
安卓可以顯示折線圖，蘋果不顯示 |
測試時間寫死了。寫成這樣： |
如果是測試的時候，時間格式有5種，嚴格按照時間格式來，才可避免 蘋果不顯示數據的問題 或者使用public.js裡面的formatDate()方法。 |
|
後臺傳的Json字元串，前臺使用Json.Parse |
Json.Parse(v),安卓可進入，蘋果不行 |
本平臺不支持Json.Parse,解決方法：eval("("+v+")") ,最新版本已經支持，如果使用舊版本cordova，請使用eval(雖然eval特麽的很浪費記憶體，但是你也只能使用這個) |
|
蘋果手機彈出未載入插件 |
把cordova.js和cordova_plugins.js 放在 |
把cordova.js和cordova_plugins.js 放在根目錄就可以了 |
|
蘋果不載入下拉框信息 |
$("下拉框").attr("selected",true); |
寫成$("下拉框").prop("selected",true); |
4.1. 應用發佈
應用發佈時應當填寫相應的表格，見《業務應用發佈操作說明_模板.xlsx》，如果需要綁定應用賬號，則必須填寫正確的賬號認證地址，具體的，可以找平臺組姚飛索要模板。
