這節(jié)課我們主要用到到jquery_mobile來實現一個點電影播放網站
jquery_mobile（簡稱JQM）其實就是基于jquery開發(fā)出來的一套移動端框架，適應移動用戶端市場對瀏覽與體驗從而進一步的提升
jquery_mobile控件介紹
jquery_mobile的語法將各個控件(widget)以data-role的形式定義好樣式，使用時直接引用，則可調用適合手機頁面顯示的樣式。
juqery_mobile的常用控件如下所示：
我們廢話不多說，開始寫第一個jquery_mobile的模版程序，改名為jqm1.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">
<!--狀態(tài)條 -->
<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 width="200px" src="http://i.cnblogs.com/images/adminlogo.gif" />
</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">
<!--狀態(tài)條 -->
<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 width="200px" src="http://i.cnblogs.com/images/adminlogo.gif" />
</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>由上面這段代碼我們可以很清楚的了解到了我們的jquery_mobile是可以通過id來控制下面的列表的，有點像ecshop后臺的添加商品那塊，
要注意的是紅色邊框里面的代碼，如下圖所示：
然后再寫個fs.php的程序，主要讓他向指定用戶推送鏈接的，代碼如下所示：
<?php
header('content-type:text/html;charset=utf-8');
require_once 'get_token.php';
require_once 'common.php';
//這時，也可以通過客戶服務接口，把這個url地址發(fā)送給用戶
$contentStr = "體驗一下jquery moible \n\n http://weixin.showtp.com/jqm1.html";
$fromUsername = 'oB1_6tw1NBlGdqSsTCl5anZ7MEU4';
//使用url編碼
$contentStr = urlencode($contentStr);
$content_arr = array('content' => "{$contentStr}");
$reply_arr = array('touser' => "{$fromUsername}", 'msgtype' => 'text', 'text' => $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 '發(fā)送成功!';然后訪問fs.php效果如下所示：
我們手機端將會接收到所推送的信息了，我們點擊進進去即可，我們也可以通過用瀏覽器縮小的形式就可以看到jquery_mobile成功縮放的效果，如下圖：
以上是微信開發(fā)微網站之jquery_mobile案例分析的詳細內容。更多信息請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
PHP微信開發(fā)：如何實現消息加密解密
May 13, 2023 am 11:40 AM
PHP是一種開源的腳本語言，廣泛應用于Web開發(fā)和服務器端編程，尤其在微信開發(fā)中得到了廣泛的應用。如今，越來越多的企業(yè)和開發(fā)者開始使用PHP進行微信開發(fā)，因為它成為了一款真正的易學易用的開發(fā)語言。在微信開發(fā)中，消息的加密和解密是一個非常重要的問題，因為它們涉及到數據的安全性。對于沒有加密和解密方式的消息，黑客可以輕松獲取到其中的數據，對用戶造成威脅
PHP微信開發(fā)：如何實現投票功能
May 14, 2023 am 11:21 AM
在微信公眾號開發(fā)中，投票功能經常被運用。投票功能是讓用戶快速參與互動的好方式，也是舉辦活動和調查意見的重要工具。本文將為您介紹如何使用PHP實現微信投票功能。獲取微信公眾號授權首先，你需要獲取微信公眾號的授權。在微信公眾平臺上，你需要配置微信公眾號的api地址、官方賬號和公眾號對應的token。在我們使用PHP語言開發(fā)的過程中，我們需要使用微信官方提供的PH
用PHP開發(fā)微信群發(fā)工具
May 13, 2023 pm 05:00 PM
隨著微信的普及，越來越多的企業(yè)開始將其作為營銷工具。而微信群發(fā)功能，則是企業(yè)進行微信營銷的重要手段之一。但是，如果只依靠手動發(fā)送，對于營銷人員來說是一件極為費時費力的工作。所以，開發(fā)一款微信群發(fā)工具就顯得尤為重要。本文將介紹如何使用PHP開發(fā)微信群發(fā)工具。一、準備工作開發(fā)微信群發(fā)工具，我們需要掌握以下幾個技術點：PHP基礎知識微信公眾平臺開發(fā)開發(fā)工具：Sub
PHP微信開發(fā)：如何實現客服聊天窗口管理
May 13, 2023 pm 05:51 PM
微信是目前全球用戶規(guī)模最大的社交平臺之一，隨著移動互聯(lián)網的普及，越來越多的企業(yè)開始意識到微信營銷的重要性。在進行微信營銷時，客服服務是至關重要的一環(huán)。為了更好地管理客服聊天窗口，我們可以借助PHP語言進行微信開發(fā)。一、PHP微信開發(fā)簡介PHP是一種開源的服務器端腳本語言，廣泛運用于Web開發(fā)領域。結合微信公眾平臺提供的開發(fā)接口，我們可以使用PHP語言進行微信
PHP微信開發(fā)：如何實現用戶標簽管理
May 13, 2023 pm 04:31 PM
在微信公眾號開發(fā)中，用戶標簽管理是一個非常重要的功能，可以讓開發(fā)者更好地了解和管理自己的用戶。本篇文章將介紹如何使用PHP實現微信用戶標簽管理功能。一、獲取微信用戶openid在使用微信用戶標簽管理功能之前，我們首先需要獲取用戶的openid。在微信公眾號開發(fā)中，通過用戶授權的方式獲取openid是比較常見的做法。在用戶授權完成后，我們可以通過以下代碼獲取用
PHP微信開發(fā)：如何實現群發(fā)消息發(fā)送記錄
May 13, 2023 pm 04:31 PM
隨著微信成為了人們生活中越來越重要的一個通訊工具，其敏捷的消息傳遞功能迅速受到廣大企業(yè)和個人的青睞。對于企業(yè)而言，將微信發(fā)展為一個營銷平臺已經成為趨勢，而微信開發(fā)的重要性也逐漸凸顯。在其中，群發(fā)功能更是被廣泛使用，那么，作為PHP程序員，如何實現群發(fā)消息發(fā)送記錄呢？下面將為大家簡單介紹一下。1.了解微信公眾號相關開發(fā)知識在了解如何實現群發(fā)消息發(fā)送記錄之前，我
使用PHP實現微信公眾號開發(fā)的步驟
Jun 27, 2023 pm 12:26 PM
如何使用PHP實現微信公眾號開發(fā)微信公眾號已經成為了很多企業(yè)推廣和互動的重要渠道，而PHP作為一種常用的Web語言，也可以用來進行微信公眾號的開發(fā)。本文將介紹一下使用PHP實現微信公眾號開發(fā)的具體步驟。第一步：獲取微信公眾號的開發(fā)者賬號在開始微信公眾號開發(fā)之前，需要先去申請一個微信公眾號的開發(fā)者賬號。具體的注冊流程可以參見微信公眾平臺的官方網
如何使用PHP進行微信開發(fā)？
May 21, 2023 am 08:37 AM
隨著互聯(lián)網和移動智能設備的發(fā)展，微信成為了社交和營銷領域不可或缺的一部分。在這個越來越數字化的時代，如何使用PHP進行微信開發(fā)已經成為了很多開發(fā)者的關注點。本文主要介紹如何使用PHP進行微信開發(fā)的相關知識點，以及其中的一些技巧和注意事項。一、開發(fā)環(huán)境準備在進行微信開發(fā)之前，首先需要準備好相應的開發(fā)環(huán)境。具體來說，需要安裝PHP的運行環(huán)境，以及微信公眾平臺提
