js-sdk基本介绍

除去服务号的九大接口外，微信提供了JS-SDK接口，所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置，

（比如隐藏右上角的菜单）获取用户状态（比如地理位置）甚至调用微信的录音功能上传下载和扫描等功能，

由于需要用到JS代码，因此该接口只能在开发模式下使用。

我们还是照老规矩，先查看手册

JS-SDK快速入门体验案例：

我们来实现一个简单的小功能，通过js-sdk接口，灵活的控制右上角菜单的显示和隐藏

我们先来看看手册：

我们将上一节课的dream.php代码稍微的进行修改一下，代码如下所示：

<?php

    require_once "common.php";

    //获取code，得到access_token和appid

    $code = $_GET['code'];

    //公众号的appid

    $appid = "wxed89d8f74fa6fc51";

    //公众号的appsecret

    $appsecret = 'd4624c36b6795d1d99dcf0547af5443d';

    $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$appsecret}&code={$code}&grant_type=authorization_code";

    $res = http_request($url,null);

    //json解码

    $res = json_decode($res);

    //获取openid和access_token

    $openid = $res->openid;

    $access_token = $res->access_token;

    //这里是请求过去拉取用户信息这和基本接口的获取是不一样的，详情可以参考手册上的第四步

    $url = "https://api.weixin.qq.com/sns/userinfo?access_token={$access_token}&openid={$openid}";

    $res = http_request($url,null);

    //他是通过json返回用户的基本信息的

    $res = json_decode($res);

    $nickname = $res->nickname;  //用户昵称

    $headimgurl = $res->headimgurl; //用户头像

    //因为他放回http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46

    //所以要处理以下后面的46

    $small_head_imgurl = substr($headimgurl,0,-1).'132'; //小头像的地址

    //通过access_token和openid获取该用户的详细信息

?>

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>世界留言板</title>

        <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0, maximum-scale=1.0,user-scalable=no;">

        <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">

        <link href="./jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">

        <script src="./jquery-1.6.4.min.js" type="text/javascript"></script>

        <script src="./jquery.mobile-1.0.min.js" type="text/javascript"></script>

        <!--加入JS-SDK的代码-->

        <script>

            //加一个监听事件来调用js-sdk接口

            document.addEventListener('WeixinJSBridgeReady',function onBridgeReady(){

                WeixinJSBridge.call('hideOptionMenu'); //意思是调用这个函数去隐藏菜单

            });

            //通过函数来直接调用

            function test1(){

                WeixinJSBridge.call('hideOptionMenu'); //意思是隐藏右上角菜单

                alert('成功关闭右上角菜单');

            }

            function test2(){

                WeixinJSBridge.call('showOptionMenu');  //意思是显示右上角的菜单嘛

                alert("成功显示右上角菜单");

            }

            //使用jquery的绑定方式来进行调用js-sdk接口

            $(document).ready(function(){

                $('#test3').click(function(){

                    WeixinJSBridge.call('hideOptionMenu');

                    alert('成功关闭右上角菜单');

                });

            });

            $(document).ready(function(){

                $('#test4').click(function(){

                    WeixinJSBridge.call('showOptionMenu');

                    alert('成功显示右上角菜单');

                });

            });

        </script>

    </head>

    <body>

        <div data-role="page" id="page3">

            <div data-role="header">

                <h1>世界留言板</h1>

            </div>

            <div data-role="content">

                <form action="post_dream.php" method="post" data-ajax="false" >

                    <div data-role="fieldcontain">

                        <label for="textarea"><?php echo $nickname; ?>, 请说出您对世界心声:</label>

                        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

                    </div>

                    <!--通过隐藏表单发送我们会用到的参数-->

                    <input type="hidden" name="openid" value="<?php echo $openid; ?>" />

                    <input type="hidden" name="nickname" value="<?php echo $nickname; ?>" />

                    <input type="hidden" name="small_head_imgurl" value="<?php echo $small_head_imgurl; ?>" />

                    <div class="ui-grid-a">

                        <div class="ui-block-a">

                            <button type="submit" data-role="button" >提交心声</button>

                        </div>

                        <div class="ui-block-b">

                            <button type="reset" data-role="button">重输心声</button>

                        </div>

                    </div>

                </form>

                <div class="ui-block-a">

                    <button onclick="test1()" data-role="button" >关闭右上角</button>

                </div>

                <div class="ui-block-a">

                    <button onclick="test2()" data-role="button" >显示右上角</button>

                </div>

                <!--通过id来调用js-sdk-->

                <div class="ui-block-a">

                    <button id="test3" data-role="button" >JQ关闭右上角</button>

                </div>

                <div class="ui-block-a">

                    <button id="test4" data-role="button" >JQ显示右上角</button>

                </div>

            </div>

        </div>

    </body>

</html>

我们这节课主要用了2个js-sdk的接口

1...hideOptionMenu-----------------（隐藏右上角菜单）

2...showOptionMenu----------------（显示右上角菜单）

夺命雷公狗---微信开发54----微信js-sdk接口开发（1）之快速入门的更多相关文章

  1. 夺命雷公狗---微信开发62----所以memcache对access_token进行全局缓存优化

    公众号调用接口并不是无限制的,为了防止公众号的程序错误而引发微信服务器负载异常,默认情况下, 每个公众号调用接口都不能超过一定限制,当超过一定限制时,调用对应接口会收到错误信息,造成调用失败. 我们也 ...

  2. 夺命雷公狗---微信开发17----自定义菜单的事件推送，响应菜单的CLICK

    废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...

  3. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

  4. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  5. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  6. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  8. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  10. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Prism&MEF构建开发框架

    系统框架构想效果图 平台简单由左侧菜单和右侧内容区以及顶部系统和用户信息区构成 菜单根据系统模块动态加载 右侧,根据左侧选中菜单动态加载子模块,子模块集合以tab选项卡方式布局 系统模块划分为Shel ...

  2. js严格模式“use strict”

    js的严格模式会放弃js中的一些不正规的写法,参考 http://www.cnblogs.com/God-Shell/p/3139329.html: 使用声明"use  strict&quo ...

  3. Photoshop：通过图片理解通道原理

    电脑上的图像通过色光三原色RGB表现,不同颜色存储在不同的通道,所以RGB模式下有3条通道,CMYK模式有4条通道等等 打开一张照片,查看通道 可以看出,显示越白的地方,对应的原色越深. 默认phot ...

  4. 创建第一个ArcGIS API for Silverlight应用

    原文:创建第一个ArcGIS API for Silverlight应用 在完成前面的开发环境搭建以后,接下来实现我们的第一个ArcGIS API forSilverlight应用程序. 接下来我们一 ...

  5. 关于lnmp下搭thinkPHP无法找到指定静态页面

    我在lnmp 下架了一个thinkPHP框架,非常奇怪,在环境都配置好后,我在url里输入localhost:10007/index.php/member/login,正常来说应该显示login.ht ...

  6. 二代身份证阅读器（XZX）

    问题一 解决方法: 通常我把所有的dll复制到system32文件夹,64位系统复制到sysWOW64文件夹,而且编译选项CPU要选择X86 问题二 解决方法: 图片路径默认是C:\,对C:\没有写的 ...

  7. iOS 支付 [支付宝、银联、微信]（转载）

    资料 支付宝 //文档idk都包含了安卓.iOS版 银 联 银联官网资料 Demo Demo给了一个订单号,做测试使用,若出现支付失败什么的,可能是已经被别人给支付了,或者是服务器订单过期了 ~ 一. ...

  8. Java遇见HTML——JSP篇之JSP指令与动作元素

    一.include指令(如:<%@include file="..."%> ) 示例: Date.jsp <%@page import="java.te ...

  9. [算法]Comparison of the different algorithms for Polygon Boolean operations

    Comparison of the different algorithms for  Polygon Boolean operations. Michael Leonov 1998 http://w ...

  10. [转载]WGS84坐标与Web墨卡托坐标互转

    //经纬度转Wev墨卡托 dvec3 CMathEngine::lonLat2WebMercator(dvec3 lonLat) { dvec3 mercator; ; +lonLat.y)*PI/) ...