夺命雷公狗---微信开发54----微信js-sdk接口开发(1)之快速入门

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----------------(显示右上角菜单)

时间: 2024-10-09 14:10:09

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

夺命雷公狗---微信开发23----客服消息接口基础和推送文本

我们这边课程里面一共用到了三个文件,分别是WeChat.class.php和common.php以及index.php 我们在写这个功能之前也要学会查手册,手册我们可以在微信开发这里找到,如下所示: 点击进去后我们将会看到客服接口,我们可以点击下进去看看里面有什么动动 这里有一个发送文本消息的,我们点击进去看下 这里很明显就看到文本消息是通过一个json数据来进行实现的,废话不多说,开工 这里我们先来写一个WeChat.php的文件,这里作用主要适用于封装一个CURL上传类的,代码如下所示: <

夺命雷公狗---微信开发27----客服消息接口基础和推送图文消息

按照25课的套路在改下index.php即可实现,代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; //这里是引入curl发送函数的类 require_once 'WeChat.class.php'; define("TOKEN", "twgdh"); //这里让这个类继承了curl发送参数的类 class wechat

夺命雷公狗---微信开发39----微信语言识别接口1

语音识别接口的基本介绍 注意: 由于客户端缓存,开发者开启或者关闭语音识别功能,对新关注者立即生效,对已关注用户需要24小时生效,开发者可以从新关注帐号进行测试. 我们可以在测试号下方的体验接口权限表里面找到“接收语音识别结果”,如下图所示 现在这里是显示的关闭,就是开启,如果想使用,那么就必“关闭”. 点击一下开启后,他就会问你是否关闭,所以这里的意思是相反的,如图所示: 然后再点击一下确定即可关闭. 不过我们现在要对他进行开发所以这里就要显示关闭这两个字,然后点击“接收语音识别结果”即可进入

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

废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; define("TOKEN", "twgdh"); $wechatObj = new wechatCallbackapiTest(); //当接入成功后,请注销这句话,否则,会反复验证. //$wechatObj->valid();

夺命雷公狗---微信开发47----获取用户地理位置接口(2)

我们现在要做的是查找距离最近的“肯德基”,我们需要通过百度提供的LBS云服务定位距离您最近的肯德基,该程序需要到LBS后台进行相关设置,然后在完成程序 用户在客户端输入“肯德基”公众号就会自动回复距离用户最近的”肯德基“ 废话不多说,我们先到http://developer.baidu.com/里面找到LBS云------再到服务接口--------再到LBS云,如下图所示: 点击进来后,我们首先要获取一个密钥, 然后出了红色框部分填下数据即可,别的地方都不用改,直接提交即可 上面的0.0.0.

夺命雷公狗---微信开发26----客服消息接口基础和推送视频

我们按照上一课的套路继续改写下index.php即可实现,代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; //这里是引入curl发送函数的类 require_once 'WeChat.class.php'; define("TOKEN", "twgdh"); //这里让这个类继承了curl发送参数的类 class we

夺命雷公狗---微信开发25----客服消息接口基础和推送语音

按照23课的部署,我们再进行改造下WeChat.class.php文件,将get_token.php的代码封装到WeChat类中去,WeChat.class.php代码如下: <?php class WeChat{ //我把请求内容封装到类里面 protected function http_request($url, $data=null){ //我们使用curl函数 //初始化 $ch = curl_init(); //设置变量 curl_setopt($ch, CURLOPT_URL,$u

夺命雷公狗---微信开发60----在线点播电影网2之电影网整体完工

我们上一节课介绍了电影网的核心部分ckplayer播放器,那么我们按照上一节课的基础上来完成这个电影网. 我们先来穿件一个index.html,代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>夺命雷公狗之电影在线点播网</title> <!--宽高禁缩放 --> <meta name="viewpor

夺命雷公狗---微信开发40----微信语言识别接口2(点歌系统)

语音识别时候记住一定要加上中文的“!”号噢,否则一定不会成功 点歌系统开工,index.php代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; //这里是引入curl发送函数的类 require_once 'WeChat.class.php'; define("TOKEN", "twgdh"); //这里让这个类继承了c

夺命雷公狗---微信开发48----获取用户地理位置接口(3)

这节课程我们来做一个游戏,这个游戏的名字叫“寻找美女做老婆”, 用户该游戏后,每隔5s(秒)会收到他距离未来老婆的信息,如果找到美女后,输入“老婆”即可成功. 这次我们涉及到一个车联网API,我们先来看下他在哪,张成什么样. http://lbsyun.baidu.com/index.php?title=car 找到接口说明,里面有一个测距,如下所示: 我们可以看到这就是他的接口 参数说明以及返回的参数如下所示: 很明显他就是返回一个XML或者是json格式的数据,默认返回的是一个XML格式的数