微信開發微網站之jquery_mobile案例分析
這堂課我們主要用到jquery_mobile來實現一個點電影播放網站
jquery_mobile（簡稱JQM）其實就是基於jquery開發出來的一套行動裝置框架，適應行動用戶端市場對瀏覽與體驗從而進一步的提升
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">
<!--状态条 -->
<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 id="header">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 id="页面脚注">页面脚注</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1 id="header">header2</h1>
</div>
<div data-role="content">
<img src="/static/imghw/default1.png" data-src="http://i.cnblogs.com/images/adminlogo.gif" class="lazy" style="max-width:90%" / alt="微信開發微網站之jquery_mobile案例分析" >
</div>
<div data-role="footer">
<h1 id="页面脚注">页面脚注</h1>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1 id="header">header3</h1>
</div>
<div data-role="content">
内容3
</div>
<div data-role="footer">
<h1 id="footer">footer3</h1>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1 id="header">header4</h1>
</div>
<div data-role="content">
<b>内容4</b>
</div>
<div data-role="footer">
<h1 id="footer-nbsp-nbsp-nbsp-nbsp">footer4 </h1>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="header">
<h1 id="header">header5</h1>
</div>
<div data-role="content">
<h1 id="内容">内容5</h1>
</div>
<div data-role="footer">
<h1 id="footer">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 id="header">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 id="页面脚注">页面脚注</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1 id="header">header2</h1>
</div>
<div data-role="content">
<img src="/static/imghw/default1.png" data-src="http://i.cnblogs.com/images/adminlogo.gif" class="lazy" style="max-width:90%" / alt="微信開發微網站之jquery_mobile案例分析" >
</div>
<div data-role="footer">
<h1 id="页面脚注">页面脚注</h1>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1 id="header">header3</h1>
</div>
<div data-role="content">
内容3
</div>
<div data-role="footer">
<h1 id="footer">footer3</h1>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1 id="header">header4</h1>
</div>
<div data-role="content">
<b>内容4</b>
</div>
<div data-role="footer">
<h1 id="footer-nbsp-nbsp-nbsp-nbsp">footer4 </h1>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="header">
<h1 id="header">header5</h1>
</div>
<div data-role="content">
<h1 id="内容">内容5</h1>
</div>
<div data-role="footer">
<h1 id="footer">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地址发送给用户
$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 '发送成功!';然後存取fs.php效果如下所示：
我們手機端將會接收到所推送的訊息了，我們點擊進去即可，我們也可以透過用瀏覽器縮小的形式就可以看到jquery_mobile成功縮放的效果，如下圖：
以上是微信開發微網站之jquery_mobile案例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PHP微信開發：如何實作訊息加密解密
May 13, 2023 am 11:40 AM
PHP是一種開源的腳本語言，廣泛應用於網頁開發和伺服器端編程，尤其在微信開發中得到了廣泛的應用。如今，越來越多的企業和開發者開始使用PHP進行微信開發，因為它成為了真正的易學易用的開發語言。在微信開發中，訊息的加密和解密是一個非常重要的問題，因為它們涉及資料的安全性。對於沒有加密和解密方式的消息，駭客可以輕鬆取得其中的數據，對用戶造成威脅
用PHP開發微信群發工具
May 13, 2023 pm 05:00 PM
隨著微信的普及，越來越多的企業開始將其作為行銷工具。而微信群發功能，則是企業進行微信行銷的重要手段之一。但是，如果只依靠手動發送，對於行銷人員來說是一件極為費時費力的工作。所以，開發一款微信群發工具就顯得格外重要。本文將介紹如何使用PHP開發微信群發工具。一、準備工作開發微信群發工具，我們需要掌握以下幾個技術點：PHP基礎知識微信公眾平台開發開發工具：Sub
PHP微信開發：如何實現使用者標籤管理
May 13, 2023 pm 04:31 PM
在微信公眾號開發中，使用者標籤管理是一個非常重要的功能，可以讓開發者更了解和管理自己的使用者。本篇文章將介紹如何使用PHP實作微信使用者標籤管理功能。一、取得微信用戶openid在使用微信用戶標籤管理功能之前，我們首先需要取得用戶的openid。在微信公眾號開發中，透過使用者授權的方式取得openid是比較常見的做法。在使用者授權完成後，我們可以透過以下程式碼取得用
PHP微信開發：如何實作群發訊息傳送記錄
May 13, 2023 pm 04:31 PM
隨著微信成為了人們生活中越來越重要的通訊工具，其敏捷的訊息傳遞功能迅速受到廣大企業和個人的青睞。對企業而言，將微信發展為一個行銷平台已經成為趨勢，而微信開發的重要性也逐漸凸顯。在其中，群發功能更是被廣泛使用，那麼，作為PHP程式設計師，如何實現群發訊息發送記錄呢？以下將為大家簡單介紹一下。 1.了解微信公眾號相關開發知識在了解如何實現群發訊息發送記錄之前，我
PHP微信開發：如何實現投票功能
May 14, 2023 am 11:21 AM
在微信公眾號開發中，投票功能經常被運用。投票功能是讓使用者快速參與互動的好方式，也是舉辦活動和調查意見的重要工具。本文將為您介紹如何使用PHP實作微信投票功能。在取得微信公眾號授權首先，你需要取得微信公眾號的授權。在微信公眾平台上，你需要設定微信公眾號碼的api地址、官方帳號和公眾號碼對應的token。在我們使用PHP語言開發的過程中，我們需要使用微信官方提供的PH
使用PHP實現微信公眾號開發的步驟
Jun 27, 2023 pm 12:26 PM
如何使用PHP實現微信公眾號開發微信公眾號已經成為了許多企業推廣和互動的重要管道，而PHP作為常用的Web語言，也可以用來進行微信公眾號的開發。本文將介紹使用PHP實現微信公眾號開發的具體步驟。第一步：取得微信公眾號的開發者帳號在開始微信公眾號開發之前，需要先去申請一個微信公眾號的開發者帳號。具體的註冊流程可參考微信公眾平台的官方網
PHP微信開發：如何實現客服聊天視窗管理
May 13, 2023 pm 05:51 PM
微信是目前全球用戶規模最大的社群平台之一，隨著行動網路的普及，越來越多的企業開始意識到微信行銷的重要性。在進行微信行銷時，客服服務是至關重要的一環。為了更好地管理客服聊天窗口，我們可以藉助PHP語言進行微信開發。一、PHP微信開發簡介PHP是一種開源的伺服器端腳本語言，廣泛用於Web開發領域。結合微信公眾平台提供的開發接口，我們可以使用PHP語言進行微信
如何使用PHP進行微信開發？
May 21, 2023 am 08:37 AM
隨著網路和行動智慧型裝置的發展，微信成為了社交和行銷領域不可或缺的一部分。在這個越來越數位化的時代，如何使用PHP進行微信開發已經成為了許多開發者的關注點。本文主要介紹如何使用PHP進行微信發展的相關知識點，以及其中的一些技巧和注意事項。一、開發環境準備在進行微信開發之前，首先需要準備好對應的開發環境。具體來說，需要安裝PHP的運作環境，以及微信公眾平台提
