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

随机推荐

key_value 类型配置文件的解析
#include <iostream> #include <string> #include <stdint.h> #include <map> #in ...
GDB多线程调试
一.多线程调试1. 多线程调试,最重要的几个命令:info threads 查看当前进程的线程. ...
MAC下配置ZSH
Mac的Terminal出了bash还配备了zsh模式,相比于bash,zsh的界面更加简单精致,用户名直接省略,用一个小箭头代替,而且箭头的颜色还可以指示命令的对错:路径和文件名的自动补全功能也十分 ...
js实现表格信息的删除和添加
制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮 ...
[LeetCode] Pow(x, n) (二分法)
Implement pow(x, n). 刚开始没想到,后来看remlost的博客才写出来,代码很简练: class Solution { public: double pow(double x, i ...
读写ZIP&JAR文件
1. ZipEntry 是包括目录的,也就是目录也被当做是一个单独的Entry,在列出它下面的文件之前先列出这个directory entry. 这个在解压ZIP文件的的时候特别有用,我们要先创建这个 ...
iOS: 讯飞语音的使用
一.介绍: 讯飞语音做的相当不错,容错率达到90%多,如果需要做语音方面的功能,它绝对是一个不错的选择.讯飞语音的功能很多:语音听写.语音识别.语音合成等,但我们最常用的还是语音听写.讯飞语音中包含界 ...
free 命令
free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之一. 1．命令格式: free [参 ...
改变DataGrid某一行和单元格的颜色
前段时间做WPF项目,需要改变DataGrid某一行的颜色.高度,以及某个单元格的颜色.单元格字体的颜色,自然就必需取到datagrid的一行和一行的单元格,网上也是搜索了好久才找到,记录下来便于使用 ...
java进阶书籍推荐
第一部分: Java语言篇 1 <Java编程规范> 星级: 适合对象:初级,中级介绍:作者James Gosling(Java之父),所以这本书我觉得你怎么也得读一下.对基 ...

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

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

随机推荐

热门专题