suchen

Heim >WeChat-Applet >WeChat-Entwicklung >Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile

Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile

高洛峰
高洛峰Original
2017-03-24 14:27:531916Durchsuche

In dieser Lektion verwenden wir hauptsächlich jquery_mobile, um eine Website zu implementieren, die Filme abspielt.

jquery_mobile (kurz JQM) ist eigentlich eine Reihe mobiler Frameworks, die auf Basis von jquery entwickelt wurden, um sich an die Browsing-Anforderungen des mobilen Clients anzupassen Markt und Erfahrung zur weiteren Verbesserung

Einführung in die jquery_mobile-Steuerung

Die Syntax von jquery_mobile definiert den Stil jedes Steuerelements (Widgets) in Form einer Datenrolle Zitieren Sie es direkt und nennen Sie es den Stil der Seitenanzeige.

Die allgemeinen Steuerelemente von juqery_mobile sind wie folgt:

Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile

Ohne weitere Umschweife beginnen wir mit dem Schreiben des ersten jquery_mobile-Vorlagenprogramms und benennen es in jqm1.html um Der Code lautet wie folgt: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--宽高禁缩放 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <!--类webapp--> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!--状态条 --> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--电话号码不是链接 --> 
        <meta name="format-detection" content="telephone=no">
        <title>jQuery Mobile Web 应用程序</title>
        <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
        <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <h1>header</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                    <li><a href="#page1">第一页</a></li>
                    <li><a href="#page2">第二页</a></li>
                    <li><a href="#page3">第三页</a></li>
                    <li><a href="#page4">第四页</a></li>
                    <li><a href="#page5">第五页</a></li>
                </ul>
            </div>
            <div data-role="footer">
                <h1>页面脚注</h1>
            </div>
        </div>
        
        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>header2</h1>
            </div>
            <div data-role="content">
                <img     style="max-width:90%" src="http://i.cnblogs.com/images/adminlogo.gif" / alt="Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile" >
            </div>
            <div data-role="footer">
                <h1>页面脚注</h1>
            </div>
        </div>
        
        <div data-role="page" id="page3">
            <div data-role="header">
                <h1>header3</h1>
            </div>
            <div data-role="content">
                内容3
            </div>
            <div data-role="footer">
                <h1>footer3</h1>
            </div>
        </div>
        
        <div data-role="page" id="page4">
            <div data-role="header">
                <h1>header4</h1>
            </div>
            <div data-role="content">
                <b>内容4</b>
            </div>
            <div data-role="footer">
                <h1>footer4    </h1>
            </div>
        </div>
        
        <div data-role="page" id="page5">
            <div data-role="header">
                <h1>header5</h1>
            </div>
            <div data-role="content">
                <h1>内容5</h1>
            </div>
            <div data-role="footer">
                <h1>footer5</h1>
            </div>
        </div>
    </body>
<html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--宽高禁缩放 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <!--类webapp--> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!--状态条 --> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--电话号码不是链接 --> 
        <meta name="format-detection" content="telephone=no">
        <title>jQuery Mobile Web 应用程序</title>
        <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
        <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <h1>header</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                    <li><a href="#page1">第一页</a></li>
                    <li><a href="#page2">第二页</a></li>
                    <li><a href="#page3">第三页</a></li>
                    <li><a href="#page4">第四页</a></li>
                    <li><a href="#page5">第五页</a></li>
                </ul>
            </div>
            <div data-role="footer">
                <h1>页面脚注</h1>
            </div>
        </div>
        
        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>header2</h1>
            </div>
            <div data-role="content">
                <img     style="max-width:90%" src="http://i.cnblogs.com/images/adminlogo.gif" / alt="Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile" >
            </div>
            <div data-role="footer">
                <h1>页面脚注</h1>
            </div>
        </div>
        
        <div data-role="page" id="page3">
            <div data-role="header">
                <h1>header3</h1>
            </div>
            <div data-role="content">
                内容3
            </div>
            <div data-role="footer">
                <h1>footer3</h1>
            </div>
        </div>
        
        <div data-role="page" id="page4">
            <div data-role="header">
                <h1>header4</h1>
            </div>
            <div data-role="content">
                <b>内容4</b>
            </div>
            <div data-role="footer">
                <h1>footer4    </h1>
            </div>
        </div>
        
        <div data-role="page" id="page5">
            <div data-role="header">
                <h1>header5</h1>
            </div>
            <div data-role="content">
                <h1>内容5</h1>
            </div>
            <div data-role="footer">
                <h1>footer5</h1>
            </div>
        </div>
    </body>
<html>

Aus dem obigen Code können wir klar verstehen, dass unser jquery_mobile die folgende Liste über die ID steuern kann, ähnlich wie das Hinzufügen des Ecshop-Backends für Produkte,

sollte auf den Code innerhalb des roten Rahmens achten, wie unten gezeigt:

Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile

Schreiben Sie dann ein fs.php-Programm. Es ermöglicht ihm hauptsächlich, Links zu bestimmten Zielen zu verschieben Benutzer. Der Code lautet wie folgt: 

<?php
    header(&#39;content-type:text/html;charset=utf-8&#39;);
    require_once &#39;get_token.php&#39;;
    require_once &#39;common.php&#39;;
    //这时，也可以通过客户服务接口，把这个url地址发送给用户
    $contentStr = "体验一下jquery moible \n\n http://weixin.showtp.com/jqm1.html";
    $fromUsername = &#39;oB1_6tw1NBlGdqSsTCl5anZ7MEU4&#39;;
    //使用url编码
    $contentStr = urlencode($contentStr);
    $content_arr = array(&#39;content&#39; => "{$contentStr}");
    $reply_arr = array(&#39;touser&#39; => "{$fromUsername}", &#39;msgtype&#39; => &#39;text&#39;, &#39;text&#39; => $content_arr);
    //编码成json格式
    $post = json_encode($reply_arr);
    //url解码
    $post = urldecode($post);
    $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token={$access_token}";
    http_request($url, $post);
    echo &#39;发送成功!&#39;;

Dann greifen Sie auf fs.php zu und der Effekt ist wie folgt:

Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile

Wir Das Mobiltelefon wird empfangen Wir können hineinklicken. Wir können den Effekt der erfolgreichen Skalierung von jquery_mobile auch sehen, indem wir den Browser zum Herauszoomen verwenden, wie unten gezeigt:

Fallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile

Das obige ist der detaillierte Inhalt vonFallanalyse der WeChat-Entwicklungs-Microsite jquery_mobile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie die Web-API, um ein öffentliches WeChat-Konto zu entwickeln, um die Turing-Roboterschnittstelle aufzurufenNächster Artikel：So verwenden Sie die Web-API, um ein öffentliches WeChat-Konto zu entwickeln, um die Turing-Roboterschnittstelle aufzurufen

In Verbindung stehende Artikel

Mehr sehen