正文

夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例

夺命雷公狗  2022-02-09  519

关键词：

这节课我们主要用到到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>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">
        <!--状态条 --> 
        <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地址发送给用户
    $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成功缩放的效果，如下图：

夺命雷公狗---微信开发60----在线点播电影网2之电影网整体完工

...YPEhtml><html><head><metacharset="utf-8"><title>夺命雷公狗之电影在线点播网</title><!--宽高禁缩查看详情

夺命雷公狗---微信开发38----临时二维码

我们要做一个临时的二维码，就类似超市的最后抢购30秒。临时二维码手册的查找方式几乎差不了什么第一步都是需要先申请到一个ticket值，然后通过ticket值去换取二维码，temp_qrcode.php代码如下： <?phpheader("Content-T... 查看详情

夺命雷公狗---微信开发47----获取用户地理位置接口

我们现在要做的是查找距离最近的“肯德基”，我们需要通过百度提供的LBS云服务定位距离您最近的肯德基，该程序需要到LBS后台进行相关设置，然后在完成程序用户在客户端输入“肯德基”公众号就会自动回复距... 查看详情

夺命雷公狗---dedecms----4快速入门之栏目页报错之快速解决

我们dedecms是分3级或者3层的，如下图所示：点击“玄幻小说”后发现出了错，如下图所示：我们的dedecms是分3层的，他们分别是：网站首页网站的栏目页面（多级）---》栏目页面是需要我们手动生成... 查看详情

夺命雷公狗---node.js---15之加密

node其实也给我们留下了密码的加密发送，不过一般都是用cmd5加密其实也是够了，但是sha1加密也要提下： /***Createdbyleigoodon2016/8/31.*/varcrypto=require(‘crypto‘);varmd5=crypto.createHash(‘md5‘);varpass=‘admin888‘;md5.update(pass 查看详情

夺命雷公狗—java---002---java开发环境搭建

夺命雷公狗—JAVA---002---java开发环境搭建JDK：JavaDeveloper'sKit，java开发工具包JDK是提供给Java开发人员使用的，其中包含了java的开发工具，也包括了JRE。所以安装了JDK，就不用在单独安装JRE了。其中的开发工具：编译工具(javac.exe)... 查看详情

夺命雷公狗---dedecms----24dedecms让网站头部分离

我们这里来做一个让网站头部分离的工作，我们先看下index.htm的模版，这里很明显就是用了一个div包围着而已，那么我们在模版目录下创建一个head.htm，如下所示：然后我们再将刚才div里面包含的div给弄出来放到head.htm... 查看详情

夺命雷公狗---node.js---14之dns

node下如果想域名解析是需要通过apache或者ng的反向版定才可以实现的，但是他也给我们留下了哟套DNS操作方法： /***Createdbyleigoodon2016/8/30.*///1resolve()--决定域名转换成ip（dns的记录）//2reverse()--颠倒ip转换成域名lookup()vardns=... 查看详情

夺命雷公狗mongodb之----mongodb---3---比较操作符

$lt < lessthan小于$lte <= lessthanandequal小于等于$gt > greaterthan大于$gte >= greanterthanandequal大于等于$ne &n 查看详情

夺命雷公狗-----react---21--小案例之心情留言板

这个功能如果是用传统型的jquery来写都要花费很多时间才可以完成的案例，亲测jquery配合bootstrap来写和bootstrap配合react.js来写，不知不觉中有点震惊。。。 jquery版本代码如下：<!DOCTYPEhtml><htmllang="en"><head><m... 查看详情

夺命雷公狗----git---6---github基本使用

github不是git。git是一个版本控制系统，是一个版本控制软件，从而完善共同开发。。。github是一个网站，基于git的，主要作用是代码托管的。。。。托管的几层含义如下：1：将自己平常时候写的项目保存到github上2：可以作为git... 查看详情

夺命雷公狗---node下的一聊天室-首发

今晚感觉挺蛋疼，就用了点时间，在node下开发了个聊天室来玩玩，不过之是简单的开发了套而已，并没多做什么考虑，，但是发现了一个好处就是用node来写聊天室代码居然少得可怜，这个不佩服node都不行，效果图如下所示：&nb... 查看详情

夺命雷公狗-----react---27--小案例之react经典案例todos（清除已完成）

这个功能其实也是很简单的，就只是让todos里面的内isDown进行取反即可然后在Zong里面进行下修改即可效果如下所示：代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><... 查看详情

夺命雷公狗—java---003---java注释

夺命雷公狗—JAVA---003---java注释JAVA注释//我是单行注释/*我是多行注释~~！*//***这个类绘制一个条形图*我是文档注释*@authorrunoob*@version1.2*/ 查看详情

夺命雷公狗-----react---22--小案例之react经典案例todos（上）

在很多前端框架中todos都是一个小的参考例子，在react中当然也是不例外的，先来看看最终的效果先。。。这个就是官方的例子，我们先来分析下他是由那及格组建组合成的。。。再来分析下他是的数据最终是由那些地方过... 查看详情

夺命雷公狗-----react---26--小案例之react经典案例todos（统计部分的完成）

这一个其实是比较容易的，只需要统计他的总数和已完成的即可，效果如下所示：代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./j 查看详情

夺命雷公狗---node.js---21之项目的构建在node+express+mongo的博客项目6之数据的遍历

首先还是来链接数据库，然后就查找，如下所示： /***Createdbyleigoodon2016/8/31.*/varexpress=require(‘express‘);varrouter=express.Router();//引入mongodb模块varMongoClient=require(‘mongodb‘).MongoClient;varDB_STR= 查看详情

夺命雷公狗—java---008---println和print的区别

夺命雷公狗—JAVA---008---println和print的区别代码如下所示：classTest{publicstaticvoidmain(String[]args){System.out.println("夺命雷公狗");System.out.println(18);System.out.println('男');System.out.println("-------------"); 查看详情