對於現在APP開發來說，目前流行的兩個方式是原生和H5。就如同之前業界程序猿爭論的BS和CS之爭一樣，業界對於H5和原生也有不小的爭論。對於前者的爭論在於PC端，后者在於移動端上體現。
那一個APP適合用什么技術來開發，主要通過下面幾點來判斷：
1、APP對於文字的要求（格式加粗，字體多樣性）是否高，H5可以很好的實現，而原生則會弱於H5；
2、APP對於交互（頁面切換，部分版塊變化）的要求是否高，H5通常在交互上比較吃力，有交互的需求是基本上是在加載一個網頁，而原生來說是很簡單的一個過程，只是加載變化部分；
3、APP對於網絡的要求（網絡較差、是否離線操作）的敏感度，原生可以做到，H5雖然能做，但難度較大；
4、APP對於硬件（麥克風、攝像頭、重力感應器）時候有硬性要求，原生完美實現，未來有新的功能也能有很好的擴展，而H5望塵莫及；
5、APP對於一些活動的更換頻繁程度，對此H5扳回一局，H5對此更換十分方便，維護方便；
6、當然就是預算和對時間的要求，用戶體驗度要求不高的話，那可以用H5來做。
所以綜上所述，對於交互性較強建議原生態開發，而那些大量數據展示的，做H5嵌套進原生框架中，這樣APP會有良好的體驗。同樣在這種情況下，混合開發對於全原生態開發下來說是縮短工期，而對比H5來說，將來的可擴展性和用戶體驗得到保證。
基於上篇http接口開發的博客，這篇文章給大家詳解，H5頁面如何調用接口對數據進行交互以及與原生態鑲嵌。
首先展示兩個我自己編寫的請求接口、獲得數據解析之后填充到H5頁面的通用方法(json格式)，可以復制直接使用，已寫好注釋
//請求接口 function ajaxForJson(url, op, jsonData, array_params_list) { $.post(myConfigHost + url, { "op": op, "jsonData": encodeURIComponent(JSON.stringify(jsonData)) }, function (data) { if (typeof (array_params_list) == 'undefined' || array_params_list == "" || array_params_list==null) { ajaxForJsonCommon(data,"#div_temp_items", "#divMain", ""); } else { if (array_params_list.length > 0) { for (var p = 0; p < array_params_list.length; p++) { ajaxForJsonCommon(data,array_params_list[p]["template_id"], array_params_list[p]["show_id"], array_params_list[p]["data_name"]); } } } }); } //數據解析、模板填充 function ajaxForJsonCommon(data,template_id,show_id,data_name) { var temp_items = $(template_id).html();//獲取模板內容 var finalHTML = ""; //最終html填充好的字符串 var list = eval('(' + data + ')'); //這句固定這么寫，兼容所有瀏覽器，將字符串，轉成js的json對象，可以通過.的方式得到數組或者類對象 if (data_name != "") { list = list[data_name]; } for (var i = 0; i < list.length; i++) { //這句幾乎也是固定，后面自行封裝 var temp_item = temp_items; //每次都是用新模版，避免模版只能使用一次，用到replace函數 for (var itemKey in list[i]) { //js是有in語法的，用於提出json里的key-value if (typeof (wangjifengHandler_key) != 'undefined') { wangjifengHandler_key(itemKey, list[i], template_id); } for (var m = 0; m < 4; m++) { temp_item = temp_item.replace("{" + itemKey + "}", list[i][itemKey]); } } finalHTML += temp_item;//拼接內容 } $(show_id).html(finalHTML);//將內容填充到html模板內 if (typeof (wangjifengHandler) != 'undefined') { wangjifengHandler(template_id); } }
1.查詢功能
請求通用方法獲得已填充好的html
GetQueryString()方法用於接收http請求所帶的參數，便於與原生態進行嵌套。 例如請求地址：http://127.0.0.1:8002/h5app/MyStudy.html?UserId=123456 那么就會獲得UserId的值。
ajaxForJson()這個方法就是我們剛剛寫的請求接口通用方法,第一個值為接口地址，第二個值為接口名稱，第三個值為接口指定格式的請求數據（本篇文章都是json格式）
我們先F12看下請求接口之后返回的數據
json格式數組的數據。包含CourseId,CourseImage,CourseName，剛剛我寫的兩個通用方法派上用場了。通過他們，可以實現請求接口、獲得數據解析之后填充到H5頁面，意味着我們這個時候什么都不用做，只需要到H5頁面做數據展示就OK了。
<body> <!-- 作者：Wangjifeng 時間：2018-03-19 描述：html模版，默認隱藏，只為了讀取出里面的模版html --> <div id="div_temp_items" style="display: none;"> <div class="content"> <div id="left"><img src="{CourseImage}" width="118.5px" height="67px"></div> <div id="right">{CourseName}</div> </div> </div> <div id="divMain" class="main"> <!--<div class="content"> <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div> <div id="right">阿里前端P6架構師培養計划</div> </div> <div class="content"> <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div> <div id="right">阿里前端P6架構師培養計划</div> </div> <div class="content"> <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div> <div id="right">阿里前端P6架構師培養計划</div> </div> <div class="content"> <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div> <div id="right">阿里前端P6架構師培養計划</div> </div> <div class="content"> <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div> <div id="right">阿里前端P6架構師培養計划</div> </div> <div class="content"> <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div> <div id="right">阿里前端P6架構師培養計划王繼峰開發創建的頁面H5開發的頁面</div> </div>--> </div> </body>
有幾個注意的地方
1.需要將以前的div 添加id="divMain",div里內容注釋
2.新增一個div id="div_temp_items" display=“none”
3.將注釋內容復制到div里（一個對象就夠了），再以{屬性名稱}進行數據填寫就可以了。這樣的操作主要是為了配合兩個通用方法進行html模板填充。
我們來看看效果，一個簡單的查詢就完成了~
2.編輯功能
首先來看看頁面，兩個開關，實現對狀態的更改操作
我們要對這兩個狀態進行更改操作，那么首先進入頁面時，就要獲取到這兩個狀態的值進行開關的綁定。並且用js進行取值。先看看請求后獲得的json
EnableCourse為課程展示的值，EnableInfo為資料展示的值。ajax請求獲取到了，那么怎么利用js進行取值呢？
<script type="text/javascript">
var UserId = GetQueryString("UserId");
ajaxForJson("/user/userInfo.aspx", "myInfo", {
"UserId": UserId
});
var EnableCourse = 1; //課程展示狀態
var EnableInfo = 1; //資料展示狀態
//獲取課程展示、資料展示狀態
function wangjifengHandler_key(key, item) {
if(key == "EnableCourse") {
EnableCourse = item[key];
} else if(key == "EnableInfo") {
EnableInfo = item[key];
}
}
</script>
wangjifengHandler_key為通用方法已經編寫好的取值方法，所以直接調用,key-value的格式，這樣就可以輕易利用通用方法取你想要的值並進行存儲了，方便各種操作。
我們再回過頭看看通用方法中有一個名為wangjifengHandler（）的方法，他在數據取到並填充至html模板之后進行調用綁定。這個時候我們就可以在html里用它執行各種增刪改操作了，每次提交請求之后，這個方法都會執行
//回調函數，在模版填充完畢，自動調用 function wangjifengHandler() { //進行開關圖片的綁定 if(EnableCourse == 0) { $(".img_course").attr("src", "img/switch_close.png"); } if(EnableCourse == 1) { $(".img_course").attr("src", "img/switch_open.png"); } if(EnableInfo == 0) { $(".img_Info").attr("src", "img/switch_close.png"); } if(EnableInfo == 1) { $(".img_Info").attr("src", "img/switch_open.png"); } //綁定反復單擊事件 $(".img_course,.img_Info").click(function() { var value_scr = $(this).attr("src"); var value_src_open = $(this).attr("src_open"); var value_src_close = $(this).attr("src_close"); var value_src_type = $(this).attr("value_src_type"); var type = ""; var type_state = ""; if(value_src_type == "kczs") { //課程展示 type = "setEnableCourse"; type_state = EnableCourse; } else { //資料展示 type = "setEnableInfo"; type_state = EnableInfo; } //課程展示、資料展示狀態設置 $.post(myConfigHost + "/user/userInfo.aspx", { "op": type, "jsonData": encodeURIComponent(JSON.stringify({ "UserId": UserId, "EnableState": type_state })) }, function(data) { var dataObj = eval("(" + data + ")"); //轉換為json對象 if(type == "setEnableCourse") { EnableCourse = dataObj.State; } else { EnableInfo = dataObj.State; } }); if(value_scr == value_src_open) { $(this).attr("src", value_src_close); } else { $(this).attr("src", value_src_open); } }); }
前面雜七雜八的代碼可以忽略~主要是利用前面wangjifengHandler_key（）方法取到兩個我們想要的值后，然后在wangjifengHandler()中post提交給接口執行修改操作，根據接口響應狀態，再進行頁面綁定。
刪除也和這一模一樣，利用wangjifengHandler_key（）取到你所需的值，於wangjifengHandler()中post提交，執行之后制動重新加載頁面。
由於時間不多，文章寫得有些凌亂~諒解。主要是理解兩個通用方法，后面調用起來就很極其方便。
原創文章，轉載請注明出處。