夺命雷公狗---微信开发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）
如果用户在微信客户端访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,从而实现业务逻辑. 一般我们用来“数据采集”,“市场调查”,“投票”,只要授权了第三方网页,微信用户无需注册就可 ...

随机推荐

Linq&Lumbda (2)
"Lambda表达式"是一个匿名函数,它可以包含表达式和语句,并且可用于创建委托或表达式树类型. Lambda 运算符: => 该运算符读为"goes to&quo ...
Android HttpHeader的坑
昨天遇到一个问题,代码如下: private String getSessionId(HttpResponse response) { // TODO Auto-generated method st ...
pod setup》error: RPC failed; result=18, HTTP code = 200
Try reducing the postBuffer size in the remote repository config. Follow the steps below Go to remot ...
C# 时间与时间戳互转 13位
/// <summary> /// 将c# DateTime时间格式转换为Unix时间戳格式 /// </summary> /// <param name="t ...
strlen
char c1[] = "sdfa";//系统自动添加结束字符 \0 char c2[] = {'1','2','3'};//这样赋值的话,要自己加上结束字符 \0 printf( ...
Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)
PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的Vie ...
linux 入门
php php -v ------------------ 阿帕奇 apachectl -v httpd -v ----------------------------- mys ...
selenium 基本了解
Selenium的界面白色:还未执行浅青色:动作成功深青色:判断成功浅粉红色:判断失败,但不影响测试案例的运行深粉红色:判断失败,且测试案例无法正常运行 Command 存在的命令 Acti ...
Ajax.ActionLink()方法的使用
第一句话都会这么去写:程序猿就是苦逼,除了开发还要会写博文!哎,今天就和大家一起讨论下Ajax的辅助方法ActionLink的使用,如果有讲的不好的地方或错的地方,请大家务必扔板砖,要投准哦,砸死我算 ...
WebService之Axis2(5)：会话（Session）管理
WebService给人最直观的感觉就是由一个个方法组成,并在客户端通过SOAP协议调用这些方法.这些方法可能有返回值,也可能没有返回值.虽然这样可以完成一些工具,但这些被调用的方法是孤立的,当一个方 ...

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

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

随机推荐

热门专题