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

夺命雷公狗      2022-02-08     267

关键词:

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

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

我们现在要做的是查找距离最近的“肯德基”,我们需要通过百度提供的LBS云服务定位距离您最近的肯德基,该程序需要到LBS后台进行相关设置,然后在完成程序用户在客户端输入“肯德基”公众号就会自动回复距... 查看详情

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

...YPEhtml><html><head><metacharset="utf-8"><title>夺命雷公狗之电影在线点播网</title><!--宽高禁缩 查看详情

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

这节课我们主要用到到jquery_mobile来实现一个点电影播放网站jquery_mobile(简称JQM)其实就是基于jquery开发出来的一套移动端框架,适应移动用户端市场对浏览与体验从而进一步的提升jquery_mobile控件介绍jquery_mobile的语法将各个控... 查看详情

夺命雷公狗—java---002---java开发环境搭建

夺命雷公狗—JAVA---002---java开发环境搭建JDK:JavaDeveloper'sKit,java开发工具包JDK是提供给Java开发人员使用的,其中包含了java的开发工具,也包括了JRE。所以安装了JDK,就不用在单独安装JRE了。其中的开发工具:编译工具(javac.exe)... 查看详情

夺命雷公狗—java---003---java注释

夺命雷公狗—JAVA---003---java注释JAVA注释//我是单行注释/*我是多行注释~~!*//***这个类绘制一个条形图*我是文档注释*@authorrunoob*@version1.2*/  查看详情

夺命雷公狗—java---008---println和print的区别

夺命雷公狗—JAVA---008---println和print的区别代码如下所示:classTest{publicstaticvoidmain(String[]args){System.out.println("夺命雷公狗");System.out.println(18);System.out.println('男');System.out.println("-------------"); 查看详情

夺命雷公狗—java---005---编码问题

夺命雷公狗—JAVA---005---编码问题在编写程序的时候我们是需要注意一下编码问题的,比如我们创建一个Hello.java 的文件,代码如下所示:classHello{publicstaticvoidmain(String[]args){System.out.println("你好");}}  然后我们来到文件... 查看详情

夺命雷公狗—java---010---变量

夺命雷公狗—JAVA---010---变量变量是用来存储数值(数据)在java中,变量其实就是一块存储区域,变量中存储的数据时存储在JVM内存中的。  变量三要素1,数据类型是用来存储:字符串,小数,整数,单个字符,布尔值,... 查看详情

夺命雷公狗—java---004---诞生自己的第一个java程序

夺命雷公狗—JAVA---004---诞生自己的第一个java程序首先我们来到D盘下创建一个自专门用于存放自己java的目录,如下所示:  然后我们开始创建自己的第一个java文件,第一个程序建议文件名和自己的类名一样:  java... 查看详情

夺命雷公狗----git---6---github基本使用

github不是git。git是一个版本控制系统,是一个版本控制软件,从而完善共同开发。。。github是一个网站,基于git的,主要作用是代码托管的。。。。托管的几层含义如下:1:将自己平常时候写的项目保存到github上2:可以作为git... 查看详情

夺命雷公狗---node下的一聊天室-首发

今晚感觉挺蛋疼,就用了点时间,在node下开发了个聊天室来玩玩,不过之是简单的开发了套而已,并没多做什么考虑,,但是发现了一个好处就是用node来写聊天室代码居然少得可怜,这个不佩服node都不行,效果图如下所示:&nb... 查看详情

夺命雷公狗-----react---2--组建

  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react 查看详情

夺命雷公狗—java---006---大小写问题

夺命雷公狗—JAVA---006---大小写问题1,源码文件名.java大小写的问题源码文件名不区分大小写,但是极力推荐区分大小写 2,字节码文件名(类名)严格区分大小写 3,代码中大小写严格区分大小写 温馨提示,玩JAVA基... 查看详情

夺命雷公狗----git---7---github当仓库本地使用(完)

首先我们将github上的东西克隆到本地: 然后在本地创建一个文件夹,然后进入git命令行: 成功后如下所示:将仓库里面的内容给克隆到本地了。。。然后创建一个index.html然后添加进去:  在这里push的时候要用到g... 查看详情

夺命雷公狗-----react---10--添加css样式的方法

  <!DOCTYPE><html><head><metacharset="utf-8"><title></title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react-dom.js"></scri 查看详情

夺命雷公狗-----react---1--页面的渲染

  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react 查看详情

夺命雷公狗----git---5---分支

git分支的概念相当于是添加一个属于自己的分支,别人是看不到的,等你写完自己的程序到时候在合并到团队的分支上即可。。。。我们可以查看自己git里面有什么分支,如下所示:gitbranch  在这里我们可以很明显的看到... 查看详情

夺命雷公狗-----react---3--标签的规则

 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./js/react.js"></script><scriptsrc="./js/react-dom.j 查看详情