In this lesson we mainly use jquery_mobile to implement a point-to-point movie playback website
jquery_mobile (JQM for short) is actually a set of mobile frameworks developed based on jquery to adapt to the browsing needs of the mobile client market. and experience to further improve
jquery_mobile control introduction
The syntax of jquery_mobile defines the style of each control (widget) in the form of data-role. When using it, you can directly quote it and call it suitable for mobile phones. The style of page display.
The common controls of juqery_mobile are as follows:
Without further ado, let’s start writing the first jquery_mobile template program and rename it jqm1.html , the code is as follows:
<!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/imghwm/default1.png" data-src="http://i.cnblogs.com/images/adminlogo.gif" class="lazy" style="max-width:90%" / alt="WeChat development microsite jquery_mobile case analysis" >
</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/imghwm/default1.png" data-src="http://i.cnblogs.com/images/adminlogo.gif" class="lazy" style="max-width:90%" / alt="WeChat development microsite jquery_mobile case analysis" >
</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>From the above code, we can clearly understand that our jquery_mobile can control the following list through id, a bit like adding products in the ecshop background,
What you need to pay attention to is the code inside the red border, as shown in the figure below:
Then write a fs.php program, mainly asking him to specify When users push links, the code is as follows:
<?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 '发送成功!';Then access fs.php and the effect is as follows:
Our mobile phone will receive all We can click to enter the pushed information. We can also see the effect of jquery_mobile's successful scaling by using the browser to zoom out, as shown below:
The above is the detailed content of WeChat development microsite jquery_mobile case analysis. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
SublimeText3 Linux new version
SublimeText3 Linux latest version
Dreamweaver CS6
Visual web development tools
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
