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. C#访问url地址并返回数据

    public partial class Form1 : Form { static bool isSelect = false; public Form1() { InitializeCompone ...

  2. Android OpenGL ES 开发教程 从入门到精通

    感谢,摘自:http://blog.csdn.net/mapdigit/article/details/7526556 Android OpenGL ES 简明开发教程 Android OpenGL ...

  3. Dynamics AX 从数据库二进制数据导出图片

    // andy 2014/12/10 static void SSW_Bit2ImageFile(Args _args) { Bitmap curBitmap; Image curImage; ; c ...

  4. [iOS]如何把App打包成ipa文件,然后App上架流程[利用Application Loader]

    摘自:http://www.cnblogs.com/wangqi1221/p/5240281.html 在上一篇博客已经讲过上传项目了,但是有的时候,需要我们进行打包成ipa包到别的手机上跑(但是前提 ...

  5. 5分钟弄懂Docker!

    http://www.csdn.net/article/2014-07-02/2820497-what%27s-docker 关注点:1.DOCKER和VM的架构区别 2.Docker 的容器利用了  ...

  6. centos shell编程6一些工作中实践脚本 nagios监控脚本 自定义zabbix脚本 mysql备份脚本 zabbix错误日志 直接送给bc做计算 gzip innobackupex/Xtrabackup 第四十节课

    centos   shell编程6一些工作中实践脚本   nagios监控脚本 自定义zabbix脚本 mysql备份脚本 zabbix错误日志  直接送给bc做计算  gzip  innobacku ...

  7. Sublime插件库新成员基于APICloud快速开发跨平台App

    互联网时代强调用户体验,那什么是HTML5跨平台App开发者的编程体验?“不剥夺.不替换开发者喜欢的开发工具,就是人性化的用户体验”,APICloud给出了这样的答案! 重磅发布“多开发工具支持策略” ...

  8. iOS 瀑布流的Demo

    /** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...

  9. DG - dataguard trouble shooting的相关视图

    •V$DATAGUARD_STATS:显示dataguard统计信息 备库 SQL> select * from v$dataguard_stats; NAME VALUE UNIT TIME_ ...

  10. struts标签小记

    1.<s:iterator>标签的  奇偶数行使用不同样式 <s:iterator id="list" value="#request.listq&qu ...