微信公众号--JS-SDK
JS-SDK
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
JS-SDK使用步骤
l 步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
l 步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件, http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
l 步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。
wx.config({
debug: true, //
开启调试模式
,
调用的所有
api
的返回值会在客户端
alert
出来,若要查看传入的参数,可以在
pc
端打开,参数信息会通过
log
打出,仅在
pc
端时才会打印。
appId: '', //
必填,公众号的唯一标识
timestamp: , //
必填,生成签名的时间戳
nonceStr: '', //
必填,生成签名的随机串
signature: '',//
必填,签名
jsApiList: [] //
必填,需要使用的
JS
接口列表
});
l 步骤四:通过ready接口处理成功验证
wx.ready(function(){
// config
信息验证后会执行
ready
方法,所有接口调用都必须在
config
接口获得结果之后,
config
是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在
ready
函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在
ready
函数中。
});
l 步骤五:通过error接口处理失败验证
wx.error(function(res){
// config
信息验证失败会执行
error
函数,如签名过期导致验证失败,具体错误信息可以打开
config
的
debug
模式查看,也可以在返回的
res
参数中查看,对于
SPA
可以在这里更新签名。
});
l 接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
- success:接口调用成功时执行的回调函数。
- fail:接口调用失败时执行的回调函数。
- complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
- cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
- trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:
调用成功时:"xxx:ok" ,其中xxx为调用的接口名
用户取消时:"xxx:cancel",其中xxx为调用的接口名
调用失败时:其值为具体错误信息
具体调用接口信息请参考
微信公众平台(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)
代码示例
<?php
$appId="your appid";
$appSecret="your appSecret";
// 获取 access_token
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".appId."&secret=".appSecret;
$res = json_decode(httpGet($url));
$accessToken = $res->access_token;
// 获取 jsapi_ticket
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=".$accessToken;
$res = json_decode(httpGet($url));
$jsapiTicket = $res->ticket;
// 注意 URL 一定要动态获取,不能 hardcode.
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$timestamp = time();
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$nonceStr = "";
for ($i = 0; $i < $length; $i++) {
$nonceStr .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=".$jsapiTicket."&noncestr=".$nonceStr."×tamp=".$timestamp."&url=".$url;
$signature = sha1($string);
$signPackage = array(
"appId"
=> appId,
"nonceStr"
=> $nonceStr,
"timestamp" => $timestamp,
"signature" => $signature
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
/*
* 注意:
* 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
* 邮箱地址:weixin-open@qq.com
* 邮件主题:【微信JS-SDK反馈】具体问题
* 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
*/
wx.config({
debug: true,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
]
});
wx.ready(function () {
// 在这里调用 API
});
wx.error(function(res){
//
config信息验证失败会执行error函数
});
</script>
</html>
微信公众号--JS-SDK的更多相关文章
- SAE微信公众号PHP SDK, token一直验证失败
用的是SAE,创建的是微信公众号PHP SDK框架,里面example文件夹下有server.php用来验证token的.但是问题来了,无论我怎么输入URL和token,一直告诉我token验证失败. ...
- VopSdk一个高逼格微信公众号开发SDK(源码下载)
看之前回复很多说明大家很有热情&文章被误删掉了,不想让有的朋友错失这个高逼格的东西,现在重新发布,这次就直接放出源码,文章最末下载地址. 看之前回复很多说明大家很有热情&文章被误删掉了 ...
- VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启)
VopSdk一个高逼格微信公众号开发SDK(源码下载) VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启) 针对第一版,我们搞了第二版本,老规矩先定个目标. 一 我们的目标 a.移 ...
- 微信JS-SDK]微信公众号JS开发之卡券领取功能详解
js sdk: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.952-.E6 ...
- VopSdk一个高逼格微信公众号开发SDK
一.我们的目标 分离基础参数和业务参数. 具有高重用和扩展性. 轻量级. 二.实现目标 (一)分离基础参数和业务参数 仔细分析所有接口,抽离出每个模块接口的公共参数. A.针对微信公众号所有接口分析( ...
- 最新微信公众平台js sdk整合PHP版
由于没有持续关注微信公众平台相关的开发,所以看到这个东西时,都没有耐心看完开发文档,或者不知道重点. 重点在哪呢?重点在示例代码:http://mp.weixin.qq.com/wiki/7/aaa1 ...
- 微信公众号 - js传入时间戳换算(以前几天、几小时...)
// 获取当前时间戳 function timestamps() { return Math.round(new Date().getTime() / 1000).toString() } // 距离 ...
- 使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
- 使用开源库MAGICODES.WECHAT.SDK进行微信公众号支付开发
概要 博客使用Word发博,发布后,排版会出现很多问题,敬请谅解.可加群获取原始文档. 本篇主要讲解微信支付的开发流程,相关业务基于MAGICODES.WECHAT.SDK实现.通过本篇教程,您可以很 ...
- 利用OpenShift托管Node.js Web服务进行微信公众号开发
最近写了一个微信的翻译机器人.用户只要关注该公众号,发送英文的消息,就能收到中文翻译的回复.有兴趣的读者可以扫描下面的二维码关注该公众号,尝试发送英文单词试试看.(有时候第一次发送单词会收到“该公众号 ...
随机推荐
- 在一个服务中实现 多个契约 和终结点 z
一个服务作为一系列终结点被定义的.每个终结点都有一个地址,绑定和契约.契约就是暴露终结点能力的.地址就是这些应用或服务从网络的哪个地址可找到,契约是关于如何访问他们的. 在终结点和契约间有一对多的关系 ...
- Python 列表排序方法reverse、sort、sorted操作方法
python语言中的列表排序方法有三个:reverse反转/倒序排序.sort正序排序.sorted可以获取排序后的列表.在更高级列表排序中,后两中方法还可以加入条件参数进行排序. reverse() ...
- 将springboot打包成的jar文件做成windows服务
1.在idea中用maven将程序打成jar,放到运行的目录中. 2.去github上面下载winsw: https://github.com/kohsuke/winsw/releases 3. 将W ...
- IOS 连接服务器(socket)
// // ViewController.m // 05.聊天室 // // Created by apple on 14/12/5. // Copyright (c) heima. All righ ...
- Android(java)学习笔记19:Java中InetAddress类概述和使用
1. 要想让网络中的计算机能够互相通信,必须为每台计算机指定一个标识号,通过这个标识号来指定要接受数据的计算机和识别发送的计算机. 在TCP/IP协议中,这个标识号就是IP地址. 那么,我们如果获取和 ...
- js面向对象 继承
1.类的声明 2.生成实例 3.如何实现继承 4.继承的几种方式 1.类的声明有哪些方式 <script type="text/javascript"> //类的声明 ...
- POJ 2195 Going Home 【二分图最小权值匹配】
传送门:http://poj.org/problem?id=2195 Going Home Time Limit: 1000MS Memory Limit: 65536K Total Submis ...
- Linux云主机 监控方案浅析
1.为何需要监控 监控是运维工程师的眼睛,它可帮助运维工程师第一时间发现系统的问题. 对于服务器的整个生命周期,都要和监控打交道: 当有服务器上架,都需要加入比如CPU负载.内存.网络.磁盘等基础监控 ...
- Android学习笔记_26_多媒体之拍照
一.配置文件: 需要引入摄像头权限,sdcard读写权限. <?xml version="1.0" encoding="utf-8"?> <m ...
- WPF中 ItemsSource 和DataContext不同点
此段为原文翻译而来,原文地址 WPF 中 数据绑定 ItemSource和 DataContext的不同点: 1.DataContext 一般是一个非集合性质的对象,而ItemSource 更期望数据 ...