H5頁面基於接口實現數據交互


對於現在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提交,執行之后制動重新加載頁面。

 

由於時間不多,文章寫得有些凌亂~諒解。主要是理解兩個通用方法,后面調用起來就很極其方便。

原創文章,轉載請注明出處。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM