Comment implémenter l'interaction des données sur les pages H5

Cette fois, je vais vous montrer comment mettre en œuvre l'interaction de données sur les pages H5, et quelles sont les précautions pour mettre en œuvre l'interaction de données sur les pages H5. Voici des cas pratiques, jetons un oeil.

Pour le développement actuel d'applications, les deux méthodes les plus populaires sont natives et H5. Tout comme le débat entre BS et CS parmi les programmeurs de l'industrie, il existe également de nombreuses controverses dans l'industrie à propos de H5 et du natif. Le débat sur le premier se situe du côté PC, tandis que le second se situe du côté mobile.

La technologie adaptée au développement d'une application peut être jugée principalement à travers les points suivants : <br>1. Si l'application a des exigences de texte (format gras, diversité des polices) élevées, H5 peut être très bien implémenté, mais le natif sera plus faible que H5 ; <br> 2. L'application a-t-elle des exigences élevées en matière d'interaction (changement de page, changements de section partiels), H5 a généralement des difficultés d'interaction et il est nécessaire de interaction Il s'agit essentiellement de charger une page Web, alors que nativement, c'est un processus très simple, il suffit de charger la partie modifiée <br> 3. L'APP est sensible aux exigences du réseau (mauvais réseau, s'il faut fonctionner hors ligne), nativement, elle peut être fait. Bien que H5 puisse le faire, c'est plus difficile ; <br> 4. L'APP a des exigences strictes en matière de matériel (microphone, caméra, capteur de gravité). L'implémentation native est parfaite et de nouvelles fonctions seront disponibles à l'avenir. . expansion, mais H5 est hors de portée ; <br>5. H5 est revenu pour le remplacement fréquent de certaines activités dans l'APP. H5 est très pratique à remplacer et à entretenir <br>6. et la gestion du temps Si les exigences en matière d'expérience utilisateur ne sont pas élevées, vous pouvez utiliser H5.

Donc pour résumer, pour ceux qui ont une forte interactivité, il est recommandé de développer l'écosystème d'origine, et pour ceux qui affichent une grande quantité de données, d'utiliser H5 pour l'imbriquer dans le framework natif. De cette façon, l'APP aura une bonne expérience. Dans ce cas également, le développement hybride raccourcit la période de construction pour un développement entièrement original, mais par rapport au H5, l'évolutivité future et l'expérience utilisateur sont garanties.

Basé sur le précédent blog de développement d'interface http, cet article expliquera en détail comment la page H5 appelle l'interface pour interagir avec les données et l'intégrer à l'écologie d'origine.

Tout d'abord, je vais vous montrer deux méthodes générales (format json) que j'ai écrites pour l'interface de requête et les remplir dans la page H5 après avoir analysé les données . Ils peuvent être copiés et utilisés directement Le commentaire a été écrit

//请求接口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. La fonction de requête

demande une méthode commune pour obtenir le code HTML rempli.

La méthode GetQueryString() est utilisée pour recevoir les paramètres de la requête http, facilitant ainsi l'imbrication avec l'écosystème d'origine. Par exemple, demandez l'adresse : http://127.0.0.1:8002/h5app/MyStudy.html?UserId=123456 Ensuite, la valeur de UserId sera obtenue.

ajaxForJson() Cette méthode est la méthode générale de l'interface de requête que nous venons d'écrire. La première valeur est l'adresse de l'interface, la deuxième valeur est le nom de l'interface et la troisième valeur est les données de la requête au format. spécifié par l'interface (ce Tous les articles sont au format json)

Utilisons d'abord F12 pour regarder les données renvoyées après avoir demandé à l'interface

Les données dans le tableau au format json. Y compris CourseId, CourseImage, CourseName, les deux méthodes générales que je viens d'écrire se sont révélées utiles. Grâce à eux, nous pouvons implémenter l'interface de requête , obtenir les données, les analyser et les remplir dans la page H5 , ce qui signifie que nous n'avons rien à faire pour le moment , il suffit d'aller sur la page H5 pour afficher les données.

<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>

Il y a quelques points à noter

1 Vous devez ajouter id="pMain" au p précédent, et commenter le contenu dans p

. 2. Ajoutez-en un nouveau p id="p_temp_items" display="none"

3. Copiez le contenu du commentaire dans p (un objet suffit), puis remplissez les données avec {nom de l'attribut}. Cette opération consiste principalement à coopérer avec deux méthodes courantes pour remplir les modèles HTML.

Jetons un coup d'œil à l'effet. Une simple requête est effectuée ~

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);
                    }
                });
            }

<br>

前面杂七杂八的代码可以忽略~主要是利用前面wangjifengHandler_key（）方法取到两个我们想要的值后，然后在wangjifengHandler()中post提交给接口执行修改操作，根据接口响应状态，再进行页面绑定。

删除也和这一模一样，利用wangjifengHandler_key（）取到你所需的值，于wangjifengHandler()中post提交，执行之后制动重新加载页面。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

max-width和min-width的使用技巧<br>

text-align如何实现两端对齐<br>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!