微信公众号开发之如何使用JSSDK
微信开发交流群:148540125
欢迎留言、转发、打赏
系列文章参考地址 极速开发微信公众号
项目源码参考地址 点我点我--欢迎Start
查看公众号是否有使用JSSDK的权限
服务号、订阅号可以通过登录微信公众平台查看开发>接口权限
使用JSSDK主要包括
1、判断当前客户端版本是否支持指定JS接口、
2、分享接口(微信认证)
3、图像接口
4、音频接口
5、智能接口(识别语音并返回结果)
6、设备信息(获取网络状态)
7、地理位置
8、界面操作
9、微信扫一扫
10、微信小店(服务号必须通过微信认证)
11、微信卡券 (微信认证)
12、微信支付(服务号必须通过微信认证)
使用JSSDK步骤
步骤一:绑定域名
先登录微信公众平台进入公众号设置
的功能设置
里填写JS接口安全域名
。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
签名算法生成规则
请 官方参考文档
下面具体来讲讲 开源项目weixin_guide中的封装。
使用的时候只要在Controller方法上添加一个拦截器 JSSDKInterceptor
来实现签名验证再将wx.config
需要的参数设置对应的属性在页面上进行获取。
拦截器实现如下:
public class JSSDKInterceptor implements Interceptor{
/**
* 如果要支持多公众账号,只需要在此返回各个公众号对应的 ApiConfig 对象即可 可以通过在请求 url 中挂参数来动态从数据库中获取
* ApiConfig 属性值
*/
public ApiConfig getApiConfig() {
ApiConfig ac = new ApiConfig();
// 配置微信 API 相关常量
ac.setToken(PropKit.get("token"));
ac.setAppId(PropKit.get("appId"));
ac.setAppSecret(PropKit.get("appSecret"));
/**
* 是否对消息进行加密,对应于微信平台的消息加解密方式: 1:true进行加密且必须配置 encodingAesKey
* 2:false采用明文模式,同时也支持混合模式
*/
ac.setEncryptMessage(PropKit.getBoolean("encryptMessage", false));
ac.setEncodingAesKey(PropKit.get("encodingAesKey",
"setting it in config file"));
return ac;
}
@Override
public void intercept(Invocation inv) {
inv.invoke();
Controller controller = inv.getController();
ApiConfigKit.setThreadLocalApiConfig(getApiConfig());
JsTicket jsApiTicket = JsTicketApi.getTicket(JsApiType.jsapi);
String jsapi_ticket = jsApiTicket.getTicket();
String nonce_str = create_nonce_str();
// 注意 URL 一定要动态获取,不能 hardcode.
String url = "http://" + controller.getRequest().getServerName() // 服务器地址
// + ":"
// + getRequest().getServerPort() //端口号
+ controller.getRequest().getContextPath() // 项目名称
+ controller.getRequest().getServletPath();// 请求页面或其他地址
String qs = controller.getRequest().getQueryString(); // 参数
if (qs != null) {
url = url + "?" + (controller.getRequest().getQueryString());
}
System.out.println("url>>>>" + url);
String timestamp = create_timestamp();
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
//注意这里参数名必须全部小写,且必须有序
String str = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
String signature = HashKit.sha1(str);
System.out.println("appId " + ApiConfigKit.getApiConfig().getAppId()
+ " nonceStr " + nonce_str + " timestamp " + timestamp);
System.out.println("url " + url + " signature " + signature);
System.out.println("nonceStr " + nonce_str + " timestamp " + timestamp);
System.out.println(" jsapi_ticket " + jsapi_ticket);
System.out.println("nonce_str " + nonce_str);
controller.setAttr("appId", ApiConfigKit.getApiConfig().getAppId());
controller.setAttr("nonceStr", nonce_str);
controller.setAttr("timestamp", timestamp);
controller.setAttr("url", url);
controller.setAttr("signature", signature);
controller.setAttr("jsapi_ticket", jsapi_ticket);
}
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
}
在Controller中使用
/**
* 对整个Controller或者其中的方法添加JSSDK签名验证拦截器
*/
@Before(JSSDKInterceptor.class)
public class JSSDKController extends Controller{
//@Before(JSSDKInterceptor.class)
public void index(){
render("share.jsp");
}
public void customer(){
render("customer.jsp");
}
public void pic(){
render("pic.jsp");
}
}
JSP页面上面使用
<script type="text/javascript">
wx.config({
debug: true,
appId:'${appId}',
timestamp: '${timestamp}',
nonceStr: '${nonceStr }',
signature: '${signature}',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
...
]
});
</script>
测试结果
在AppConfig 中添加路由me.add("/jssdk", JSSDKController.class,"/view");
手机中访问 http://域名[/项目名称]/jssdk
,如果设置了 debug= true
成功了就会弹出
如果出现 {"errorMsg":"config:invalid url domian"}
请检查步骤一:绑定域名 与你访问的域名是否在安全域名列表当中
步骤四:通过ready接口处理成功验证
config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.ready(function(){
// 1 判断当前版本是否支持指定 JS 接口,支持批量判断
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
//下面就可以写一系列的接口了
......
});
步骤五:通过error接口处理失败验证
wx.error(function (res) {
alert(res.errMsg);
});
步骤六:接口调用
拦截器具体实现 参考地址 点这里
js 接口调用参考地址 点这里
以上就是JSSDK使用的介绍。
欢迎留言、转发、打赏项目
源码参考地址 点我点我--欢迎Start
微信公众号开发之如何使用JSSDK的更多相关文章
- 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索
本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...
- 微信公众号开发《三》微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索
本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...
- 微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友
之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注 ...
- .NET开发者如何愉快的进行微信公众号开发
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:这篇文章只是一个如何提高开发效率的简单指导和记录,不会涉及具体的微信公众号开发内容. ...
- Nodejs微信公众号开发
概览 key value 项目名称 node微信公众号开发 项目描述 使用node编写接口,前后端分离获取签名数据 开发者 leinov 发布日期 2018-11-07 仓库 github地址 安装& ...
- python之微信公众号开发(基本配置和校验)
前言 最近有微信公众号开发的业务,以前没有用python做过微信公众号开发,记录一下自己的学习和开发历程,共勉! 公众号类型 订阅号 普通订阅号 认证订阅号 服务号 普通服务号 认证服务号 服务方式 ...
- Java微信公众号开发梳理
Java微信公众号开发梳理 现在微信公众平台的开发已经越来越普遍,这次开发需要用到微信公众平台.因此做一个简单的记录,也算是给那些没踩过坑的童鞋一些启示吧.我将分几块来简单的描述一下,之后会做详细的说 ...
- 微信公众号开发(一)--验证服务器地址的Java实现
现在主流上都用php写微信公众号后台,其实作为后端语言之一的java也可以实现. 这篇文章将对验证服务器地址这一步做出实现. 参考资料:1.慕课网-<初识java微信公众号开发>,2.微信 ...
- C#微信公众号开发系列教程三(消息体签名及加解密)
http://www.cnblogs.com/zskbll/p/4139039.html C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C ...
随机推荐
- 【洛谷】4310: 绝世好题【二进制DP】
P4310 绝世好题 题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 输入输出格式 输入格式: 输入文件共2行 ...
- poj3268 Silver Cow Party(农场派对)
题目描述 原题来自:USACO 2007 Feb. Silver N(1≤N≤1000)N (1 \le N \le 1000)N(1≤N≤1000) 头牛要去参加一场在编号为 x(1≤x≤N)x(1 ...
- MyTalkStuffHomeIcon-2
圆形.高清头像素材专用-2
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- Python学习笔记(一):Python基础学习
总结的内容: 1.变量的命名 2.脚本的注释 3.运算符 4.用户输入语句 一.变量的命名 1.变量用于引用在程序中可能会变化的值.它们被称为变量是因为它们可能引用存储在内存中的不同的值. 2.变量的 ...
- flash 跨域加载 二次加载
var url2:String = "http://thirdapp0.qlogo.cn/qzopenapp/fa5d80ebf9fc89aaa1d7ddb0e1b861e58d77b409 ...
- Python threads synchronization: Locks, RLocks, Semaphores, Conditions, Events and Queues(Forwarding)
This article describes the Python threading synchronization mechanisms in details. We are going to s ...
- SCSI Pass-Through Interface Tool
http://code.msdn.microsoft.com/SCSI-Pass-Through-a906ceef/sourcecode?fileId=59048&pathId=1919073 ...
- C++回调函数(callback)的使用
什么是回调函数(callback) 模块A有一个函数foo,他向模块B传递foo的地址,然后在B里面发生某种事件(event)时,通过从A里面传递过来的foo的地址调用foo,通知A发生了什么事 ...
- 使用静态库的一些问题 -all_load
1.使用类目在我们的静态库中涉及到 类目 catagory的使用时,会崩溃:此时我们需要设置project的Info里面的Link Flag处,增加-all_load,这样会链接所以存在的symbol ...