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

随机推荐

sql性能优化小技巧（一）
关于sql条件匹配对执行效率影响测试首先,创建一个标量函数create function ff_test() returns int as begin declare @i int=0 while( ...
php--数据库三范式
关系数据库的几种设计范式介绍1.第一范式(1NF) 在任何一个关系数据库中,第一范式(1NF)是对关系模式的基本要求,不满足第一范式(1NF)的数据库就不是关系数据库. 所谓第一范式(1NF)是指数据 ...
用angularJS实现Bootstrap的“手风琴”
主页面代码(发现Bootstrap官网上手风琴的实例样式有问题,在这里依然使用3.0.~版本) <!DOCTYPE html> <html ng-app="ct" ...
用户交互与while循环<代码>
#用户交互1 age_oldboy = 56 guess_age = int(input(">>:")) if guess_age == age_oldboy: pri ...
[LeetCode]题解（python）：101 Symmetric tree
题目来源 https://leetcode.com/problems/symmetric-tree/ Given a binary tree, check whether it is a mirror ...
Selenium2学习-020-WebUI自动化实战实例-018-获取浏览器窗口位置大小
在 UI 自动化测试过程中,每个机器上浏览器的默认大小.默认位置不尽相同,需要截图的时候,页面元素可能显示不完全,因而我们需要知道浏览器的宽度,或者直接在启动浏览器时,设置浏览器的宽度或位置(此文暂不 ...
C# base和this
• 是否可以在静态方法中使用base和this,为什么? • base常用于哪些方面?this常用于哪些方面? • 可以base访问基类的一切成员吗? • 如果有三层或者更多继承,那么最下级派生类的b ...
如何安装sass
1.安装ruby 2. 运行ruby时输入 gem install 及sass安装文件路径. sass安装文件见文件.
ChatForFun 公众号使用说明
使用方法 2016-07-16 DennisMi ChatForFun 1,发送 #1 实现登陆,或者退出登陆 2,发送 #2 实现加入聊天,和退出聊天 3,聊天开始后,可以直接发送消息 4,如果 ...
freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式
今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

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

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

随机推荐

热门专题