H5 ページにデータインタラクションを実装する方法-jsチュートリアル-php.cn

今回は、H5 ページでデータインタラクションを実装する方法と、H5 ページでデータインタラクションを実装する方法の注意事項について説明します。以下は実際のケースです。見てみましょう。

現在のアプリ開発では、ネイティブと H5 の 2 つの一般的な方法が使用されます。業界のプログラマーの間で BS と CS の間で議論されているのと同様に、業界では H5 とネイティブについても多くの議論が行われています。前者に関する議論は PC 側にあり、後者はモバイル側にあります。

どのテクノロジーが APP の開発に適しているかは、主に次の点によって判断できます: 1. APP に高いテキスト要件 (太字形式、フォントの多様性) があるかどうか、H5 はそれを十分に達成でき、ネイティブはそれを実現します。 2. アプリのインタラクション要件は高いですか (ページの切り替え、部分的なセクションの変更)。H5 のインタラクション要件は、基本的に Web ページの読み込みです。変更された部分をロードするだけの非常に単純なプロセスです。 3. APP はネットワーク要件に影響されます (ネットワークが貧弱であるか、オフラインで動作するかどうか)。 APP にはハードウェア (マイク、カメラ、重力センサー) に対する厳しい要件があり、ネイティブ実装は将来的に新しい機能で十分に拡張できる可能性がありますが、H5 では一部の変更が加えられます。ある程度、H5 は交換とメンテナンスに非常に便利です。もちろん、ユーザーエクスペリエンスが高くない場合は、H5 を使用できます。

まとめると、インタラクティブ性が強い人には独自のエコシステムを開発することをお勧めし、大量のデータを表示する人には H5 をネイティブフレームワークにネストして、APP が良い経験ができるでしょう。この場合もハイブリッド開発により、フルオリジナル開発に比べて工期は短縮されますが、H5に比べて将来的な拡張性やユーザーエクスペリエンスが保証されます。前回の http インターフェイス開発ブログに基づいて、この記事では、H5 ページがインターフェイスを呼び出してデータと対話し、それを元のエコロジーに埋め込む方法について詳しく説明します。

まず、私が作成した 2 つのリクエストインターフェイスと、データを解析した後に 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,"#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"]);
                }
            }
        }
    });
}//数据解析、模板填充function ajaxForJsonCommon(data,template_id,show_id,data_name)
{    var temp_items = $(template_id).html();//获取模板内容
    var finalHTML = ""; //最终html填充好的字符串
    var list = eval(&#39;(&#39; + data + &#39;)&#39;); //这句固定这么写，兼容所有浏览器，将字符串，转成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) != &#39;undefined&#39;) {
                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) != &#39;undefined&#39;) {
        wangjifengHandler(template_id);
    }
}

ログイン後にコピー

1. クエリ関数は、埋め込まれた HTML を取得するための一般的なメソッドをリクエストします

GetQueryString() メソッドは、http リクエストによって運ばれるパラメータを受け取るために使用され、ネストを容易にします本来の生態系とともに。たとえば、リクエストアドレス: http://127.0.0.1:8002/h5app/MyStudy.html?UserId=123456 すると、UserId の値が取得されます。

ajaxForJson() このメソッドは、先ほど作成したリクエストインターフェイスの一般的なメソッドです。最初の値はインターフェイスのアドレス、2 番目の値はインターフェイス名、3 番目の値はインターフェイスで指定された形式のリクエストデータです。 (この記事は全てjson形式です)

まずはインターフェース

json形式の配列データをリクエストした後に返されるデータをF12で見てみましょう。 CourseId、CourseImage、CourseName を含む、今書いた 2 つの一般的なメソッドが役に立ちます。これらを通じて、リクエストインターフェイスを実装し、データを取得して解析し、H5 ページ

に入力することができます。つまり、現時点では何もする必要はなく、データを表示する H5 ページ。

<body>
        <!--
            作者：Wangjifeng
            时间：2018-03-19
            描述：html模版，默认隐藏，只为了读取出里面的模版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架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划王继峰开发创建的页面H5开发的页面</p>
            </p>-->
        </p>
    </body>

ログイン後にコピー

注意すべき点がいくつかあります1. 前の p に id="pMain" を追加し、p のコンテンツに注釈を付ける必要があります

2 新しい p id="p_temp_items" display= を追加します。 "none"

3 . コメントの内容を p にコピーし (オブジェクトは 1 つで十分です)、データに {属性名} を入力します。この操作は主に、HTML テンプレートを埋めるための 2 つの一般的な方法を連携させます。

簡単なクエリが完了したので、効果を見てみましょう~

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>

ログイン後にコピー

<span style="color: #ff0000">wangjifengHandler_key为通用方法已经编写好的取值方法，所以直接调用,key-value的格式，这样就可以轻易利用通用方法取你想要的值并进行存储了，方便各种操作。<br><span style="color: #000000"><br>我们再回过头看看通用方法中有一个名为</span>wangjifengHandler（）<span style="color: #000000">的方法，他在数据取到并填充至html模板之后进行调用绑定。这个时候我们就可以在html里用它执行各种增删改操作了，</span></span><strong><span style="color: #ff0000">每次提交请求之后，这个方法都会执行</span></strong>

ログイン後にコピー

            //回调函数，在模版填充完毕，自动调用
            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);
                    }
                });
            }

ログイン後にコピー