對(duì)于現(xiàn)在APP開(kāi)發(fā)來(lái)說(shuō)，目前流行的兩個(gè)方式是原生和H5。就如同之前業(yè)界程序猿爭(zhēng)論的BS和CS之爭(zhēng)一樣，業(yè)界對(duì)于H5和原生也有不小的爭(zhēng)論。對(duì)于前者的爭(zhēng)論在于PC端，后者在于移動(dòng)端上體現(xiàn)。
那一個(gè)APP適合用什么技術(shù)來(lái)開(kāi)發(fā)，主要通過(guò)下面幾點(diǎn)來(lái)判斷：
1、APP對(duì)于文字的要求（格式加粗，字體多樣性）是否高，H5可以很好的實(shí)現(xiàn)，而原生則會(huì)弱于H5；
2、APP對(duì)于交互（頁(yè)面切換，部分版塊變化）的要求是否高，H5通常在交互上比較吃力，有交互的需求是基本上是在加載一個(gè)網(wǎng)頁(yè)，而原生來(lái)說(shuō)是很簡(jiǎn)單的一個(gè)過(guò)程，只是加載變化部分；
3、APP對(duì)于網(wǎng)絡(luò)的要求（網(wǎng)絡(luò)較差、是否離線操作）的敏感度，原生可以做到，H5雖然能做，但難度較大；
4、APP對(duì)于硬件（麥克風(fēng)、攝像頭、重力感應(yīng)器）時(shí)候有硬性要求，原生完美實(shí)現(xiàn)，未來(lái)有新的功能也能有很好的擴(kuò)展，而H5望塵莫及；
5、APP對(duì)于一些活動(dòng)的更換頻繁程度，對(duì)此H5扳回一局，H5對(duì)此更換十分方便，維護(hù)方便；
6、當(dāng)然就是預(yù)算和對(duì)時(shí)間的要求，用戶體驗(yàn)度要求不高的話，那可以用H5來(lái)做。
所以綜上所述，對(duì)于交互性較強(qiáng)建議原生態(tài)開(kāi)發(fā)，而那些大量數(shù)據(jù)展示的，做H5嵌套進(jìn)原生框架中，這樣APP會(huì)有良好的體驗(yàn)。同樣在這種情況下，混合開(kāi)發(fā)對(duì)于全原生態(tài)開(kāi)發(fā)下來(lái)說(shuō)是縮短工期，而對(duì)比H5來(lái)說(shuō)，將來(lái)的可擴(kuò)展性和用戶體驗(yàn)得到保證。
基于上篇http接口開(kāi)發(fā)的博客，這篇文章給大家詳解，H5頁(yè)面如何調(diào)用接口對(duì)數(shù)據(jù)進(jìn)行交互以及與原生態(tài)鑲嵌。
首先展示兩個(gè)我自己編寫(xiě)的請(qǐng)求接口、獲得數(shù)據(jù)解析之后填充到H5頁(yè)面的通用方法(json格式)，可以復(fù)制直接使用，已寫(xiě)好注釋
//請(qǐng)求接口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,"#p_temp_items", "#pMain", "");
} 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"]);
}
}
}
});
}//數(shù)據(jù)解析、模板填充function ajaxForJsonCommon(data,template_id,show_id,data_name)
{ var temp_items = $(template_id).html();//獲取模板內(nèi)容
var finalHTML = ""; //最終html填充好的字符串
var list = eval('(' + data + ')'); //這句固定這么寫(xiě)，兼容所有瀏覽器，將字符串，轉(zhuǎn)成js的json對(duì)象，可以通過(guò).的方式得到數(shù)組或者類(lèi)對(duì)象
if (data_name != "") {
list = list[data_name];
} for (var i = 0; i < list.length; i++) { //這句幾乎也是固定，后面自行封裝
var temp_item = temp_items; //每次都是用新模版，避免模版只能使用一次，用到replace函數(shù)
for (var itemKey in list[i]) { //js是有in語(yǔ)法的，用于提出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;//拼接內(nèi)容 }
$(show_id).html(finalHTML);//將內(nèi)容填充到html模板內(nèi)
if (typeof (wangjifengHandler) != 'undefined') {
wangjifengHandler(template_id);
}
}1.查詢功能
請(qǐng)求通用方法獲得已填充好的html
GetQueryString()方法用于接收http請(qǐng)求所帶的參數(shù)，便于與原生態(tài)進(jìn)行嵌套。 例如請(qǐng)求地址：http://127.0.0.1:8002/h5app/MyStudy.html?UserId=123456 那么就會(huì)獲得UserId的值。
ajaxForJson()這個(gè)方法就是我們剛剛寫(xiě)的請(qǐng)求接口通用方法,第一個(gè)值為接口地址，第二個(gè)值為接口名稱(chēng)，第三個(gè)值為接口指定格式的請(qǐng)求數(shù)據(jù)（本篇文章都是json格式）
我們先F12看下請(qǐng)求接口之后返回的數(shù)據(jù)
json格式數(shù)組的數(shù)據(jù)。包含CourseId,CourseImage,CourseName，剛剛我寫(xiě)的兩個(gè)通用方法派上用場(chǎng)了。通過(guò)他們，可以實(shí)現(xiàn)請(qǐng)求接口、獲得數(shù)據(jù)解析之后填充到H5頁(yè)面，意味著我們這個(gè)時(shí)候什么都不用做，只需要到H5頁(yè)面做數(shù)據(jù)展示就OK了。
<body>
<!--
作者：Wangjifeng
時(shí)間：2018-03-19
描述：html模版，默認(rèn)隱藏，只為了讀取出里面的模版html -->
<p id="p_temp_items" style="display: none;">
<p class="content">
<p id="left"><img src="{CourseImage}" width="118.5px" height="67px"></p>
<p id="right">{CourseName}</p>
</p>
</p>
<p id="pMain" class="main">
<!--<p class="content">
<p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
<p id="right">阿里前端P6架構(gòu)師培養(yǎng)計(jì)劃</p>
</p>
<p class="content">
<p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
<p id="right">阿里前端P6架構(gòu)師培養(yǎng)計(jì)劃</p>
</p>
<p class="content">
<p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
<p id="right">阿里前端P6架構(gòu)師培養(yǎng)計(jì)劃</p>
</p>
<p class="content">
<p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
<p id="right">阿里前端P6架構(gòu)師培養(yǎng)計(jì)劃</p>
</p>
<p class="content">
<p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
<p id="right">阿里前端P6架構(gòu)師培養(yǎng)計(jì)劃</p>
</p>
<p class="content">
<p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
<p id="right">阿里前端P6架構(gòu)師培養(yǎng)計(jì)劃王繼峰開(kāi)發(fā)創(chuàng)建的頁(yè)面H5開(kāi)發(fā)的頁(yè)面</p>
</p>-->
</p>
</body>有幾個(gè)注意的地方
1.需要將以前的p 添加id="pMain",p里內(nèi)容注釋
2.新增一個(gè)p id="p_temp_items" display=“none”
3.將注釋內(nèi)容復(fù)制到p里（一個(gè)對(duì)象就夠了），再以{屬性名稱(chēng)}進(jìn)行數(shù)據(jù)填寫(xiě)就可以了。這樣的操作主要是為了配合兩個(gè)通用方法進(jìn)行html模板填充。
我們來(lái)看看效果，一個(gè)簡(jiǎn)單的查詢就完成了~
2.編輯功能
首先來(lái)看看頁(yè)面，兩個(gè)開(kāi)關(guān)，實(shí)現(xiàn)對(duì)狀態(tài)的更改操作
我們要對(duì)這兩個(gè)狀態(tài)進(jìn)行更改操作，那么首先進(jìn)入頁(yè)面時(shí)，就要獲取到這兩個(gè)狀態(tài)的值進(jìn)行開(kāi)關(guān)的綁定。并且用js進(jìn)行取值。先看看請(qǐng)求后獲得的json
EnableCourse為課程展示的值，EnableInfo為資料展示的值。ajax請(qǐng)求獲取到了，那么怎么利用js進(jìn)行取值呢？
<script type="text/javascript"> var UserId = GetQueryString("UserId");
ajaxForJson("/user/userInfo.aspx", "myInfo", { "UserId": UserId
}); var EnableCourse = 1; //課程展示狀態(tài)
var EnableInfo = 1; //資料展示狀態(tài)
//獲取課程展示、資料展示狀態(tài)
function wangjifengHandler_key(key, item) { if(key == "EnableCourse") {
EnableCourse = item[key];
} else if(key == "EnableInfo") {
EnableInfo = item[key];
}
}</script>wangjifengHandler_key為通用方法已經(jīng)編寫(xiě)好的取值方法，所以直接調(diào)用,key-value的格式，這樣就可以輕易利用通用方法取你想要的值并進(jìn)行存儲(chǔ)了，方便各種操作。我們?cè)倩剡^(guò)頭看看通用方法中有一個(gè)名為wangjifengHandler（）的方法，他在數(shù)據(jù)取到并填充至html模板之后進(jìn)行調(diào)用綁定。這個(gè)時(shí)候我們就可以在html里用它執(zhí)行各種增刪改操作了，每次提交請(qǐng)求之后，這個(gè)方法都會(huì)執(zhí)行
//回調(diào)函數(shù)，在模版填充完畢，自動(dòng)調(diào)用
function wangjifengHandler() { //進(jìn)行開(kāi)關(guān)圖片的綁定
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");
} //綁定反復(fù)單擊事件
$(".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;
} //課程展示、資料展示狀態(tài)設(shè)置
$.post(myConfigHost + "/user/userInfo.aspx", { "op": type, "jsonData": encodeURIComponent(JSON.stringify({ "UserId": UserId, "EnableState": type_state
}))
}, function(data) { var dataObj = eval("(" + data + ")"); //轉(zhuǎn)換為json對(duì)象
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（）方法取到兩個(gè)我們想要的值后，然后在wangjifengHandler()中post提交給接口執(zhí)行修改操作，根據(jù)接口響應(yīng)狀態(tài)，再進(jìn)行頁(yè)面綁定。
刪除也和這一模一樣，利用wangjifengHandler_key（）取到你所需的值，于wangjifengHandler()中post提交，執(zhí)行之后制動(dòng)重新加載頁(yè)面。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！
推薦閱讀：
max-width和min-width的使用技巧
text-align如何實(shí)現(xiàn)兩端對(duì)齊
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
