夺命雷公狗---微信开发57----微网站之jquery

这节课我们主要用到到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成功缩放的效果，如下图：

夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例的更多相关文章

夺命雷公狗---微信开发62----所以memcache对access_token进行全局缓存优化
公众号调用接口并不是无限制的,为了防止公众号的程序错误而引发微信服务器负载异常,默认情况下, 每个公众号调用接口都不能超过一定限制,当超过一定限制时,调用对应接口会收到错误信息,造成调用失败. 我们也 ...
夺命雷公狗---微信开发17----自定义菜单的事件推送，响应菜单的CLICK
废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...
夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器
我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...
夺命雷公狗---微信开发55----微信js-sdk接口开发（2）接口功能介绍之签名算法
我们JS-SDK里面其实有不少的接口 startRecord---录音 stopRecord---停止录音 playVoice---播放 pauseVoice---暂停播放 uploadImage-- ...
夺命雷公狗---微信开发58----微网站之jquery_mobile之控件介绍
我们上一节课里面介绍了基本的jqm是如何用的了,那么这一节课我们就开始玩玩他的控件 1...布局网格 <!DOCTYPE html> <html> <head> & ...
夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能
按照上节课程里面的介绍,我们可以先将刚才在signatrue.php里获取到的信息填写进jssdk.htm模版文件里填写各个权限的参数 jssdk.htm代码如下: <!DOCTYPE html ...
夺命雷公狗---微信开发54----微信js-sdk接口开发（1）之快速入门
js-sdk基本介绍除去服务号的九大接口外,微信提供了JS-SDK接口,所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置, (比如隐藏右上角的菜单)获取用户状态(比如地理位置 ...
夺命雷公狗---微信开发53----网页授权（oauth2.0）获取用户基本信息接口（3）实现世界留言版
前面两节课我们讲的是base型的授权了,那么现在我们开始Userinfo型授权, 先来看下我们的原理图我们这节课来做一个世界留言版系统 1..首先我还是在微信测试平台那里设置好回调页面的域名 2 ...
夺命雷公狗---微信开发51----网页授权（oauth2.0）获取用户基本信息接口（1）
如果用户在微信客户端访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,从而实现业务逻辑. 一般我们用来“数据采集”,“市场调查”,“投票”,只要授权了第三方网页,微信用户无需注册就可 ...

随机推荐

strcpy之代码的健壮性与可维护性
strcpy 函数的原型是: char * strcpy(char * strDest,const char * strSrc); 功能:把从strSrc地址开始且含有NULL结束符的字符串 ...
【python】numpy array特殊数据统一处理
array中的某些数据坏掉,想要统一处理,找到了这个方法,做个笔记. 比如,把数组中所有小于0的数字置为0 import numpy as np t = np.array([-2, -1, 0, 1, ...
Failed to load PDF in chrome/Firefox/IE
笔者的公司搭建了一个Nexus服务器,用来管理我们自己的项目Release构件和Site文档. 今天的问题是当用户访问一个Site里的PDF文件的时候,报错说“detected that the ne ...
Oracle 如何对时间进行简单加减运算
在我们用dbms_job包进行定时Job的时候,需要设置时间间隔,所以需要知道时间的基本加减方法. SQL> alter session set nls_date_format='yyyy-mm ...
Python-S13-day2-之购物车
Python-S13-day2 需求: 1.写一个购物小程序,用户开始先输入自己的工资,然后可以不断的买东西并加入购物车,如果钱不够了提示余额不足,用户中途可以选择查看自己购物车里面的商品,以及余额, ...
How to read the HTML DTD
Contents How to read the HTML DTD 1. DTD Comments 2. Parameter Entity definitions 3. Element declara ...
Virtio：针对 Linux 的 I/O 虚拟化框架
Virtio:针对 Linux 的 I/O 虚拟化框架 --http://www.ibm.com/developerworks/cn/linux/l-virtio/#ibm-pcon 使用 KVM 和 ...
IE、chrome、火狐中如何调试javascript脚本
1. IE中点击"F12",在弹出页面中调试javascript脚本 2. chrome中点击"F12",在弹出页面中调试javascript脚本 3. 火 ...
ArcBruTile 0.2.2
在ArcGIS中加载OpenStreetMap和Google.Bing的影像是不是很酷?用ArcBruTile 0.2.2可以实现.安装注册步骤如下.
IDisplayTransformation
IDisplayTransformation Bounds Full extent in world coordinates. The Bounds property controls the ful ...

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

夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例的更多相关文章

随机推荐

热门专题