微信开发交流群: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 +
"&timestamp=" + 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的更多相关文章

  1. 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索

    本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...

  2. 微信公众号开发《三》微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索

    本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...

  3. 微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友

    之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注 ...

  4. .NET开发者如何愉快的进行微信公众号开发

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:这篇文章只是一个如何提高开发效率的简单指导和记录,不会涉及具体的微信公众号开发内容. ...

  5. Nodejs微信公众号开发

    概览 key value 项目名称 node微信公众号开发 项目描述 使用node编写接口,前后端分离获取签名数据 开发者 leinov 发布日期 2018-11-07 仓库 github地址 安装& ...

  6. python之微信公众号开发(基本配置和校验)

    前言 最近有微信公众号开发的业务,以前没有用python做过微信公众号开发,记录一下自己的学习和开发历程,共勉! 公众号类型 订阅号 普通订阅号 认证订阅号 服务号 普通服务号 认证服务号 服务方式 ...

  7. Java微信公众号开发梳理

    Java微信公众号开发梳理 现在微信公众平台的开发已经越来越普遍,这次开发需要用到微信公众平台.因此做一个简单的记录,也算是给那些没踩过坑的童鞋一些启示吧.我将分几块来简单的描述一下,之后会做详细的说 ...

  8. 微信公众号开发(一)--验证服务器地址的Java实现

    现在主流上都用php写微信公众号后台,其实作为后端语言之一的java也可以实现. 这篇文章将对验证服务器地址这一步做出实现. 参考资料:1.慕课网-<初识java微信公众号开发>,2.微信 ...

  9. C#微信公众号开发系列教程三(消息体签名及加解密)

    http://www.cnblogs.com/zskbll/p/4139039.html C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C ...

随机推荐

  1. [CodeVS1243]网络提速

    题目大意: 有n个点的连通图,有m次可以将某一条边权值减半的机会. 不同的机会可以叠加作用于同一条边. 求1~n的最短路. 思路: 拆点,记录1到每个点在使用不同次数的机会后的最短路,然后直接跑Dij ...

  2. hdu 3949 第k大异或组合

    题意: 给你一些数,其中任选一些数(大于等于一个),那么他们有一个异或和. 求所有这样的异或和的第k小. 我们可以将每一位看成一维,然后就是给我们n个60维的向量,求它们线性组合后得到的向量空间中,第 ...

  3. OpenGL ES 3.0 图元装配

    1. 前言 之前已经把纹理的渲染给弄出来了,但是又遇到一个新的问题,那就是图元装配,比如说我已经把图片给显示出来了,但是呢,并没有做到让它显示到具体的位置,而跟这个位置相关的则需要靠图元装配. 图元装 ...

  4. Codeforces Round #298 (Div. 2) B. Covered Path 物理题/暴力枚举

    B. Covered Path Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/534/probl ...

  5. oracle中的术语

    数据库:数据库是实实在在存在的文件,一个数据库文件体系中大致包含(数据文件DBF.控制文件CTL.日志文件LOG) 数据库实例:每个数据库都会有一个数据库实例与之对应,外界环境要通过与数据库实例的交互 ...

  6. Latest SQLite binary for January 2015

    Latest SQLite binary for January 2015 Well I went through quite a few threads to find an updated, de ...

  7. CentOS 5.8 上安装 systemtap-2.6 转

    http://segmentfault.com/a/1190000002541077#articleHeader1

  8. C# string byte[] Base64 常用互相转换

    参考: http://www.cnblogs.com/zxx193/p/3605238.html?utm_source=tuicool http://www.cnblogs.com/freeliver ...

  9. spring mvc 下 applicationContext 和webApplicationContext

    spring中的ApplicationContexts可以被限制在不同的作用域.在web框架中,每个DispatcherServlet有它自己的WebApplicationContext,它包含了Di ...

  10. appium+python自动化61-中文输入乱码问题解决

    前言 在夜神模拟器上输入中文,发现是乱码,将unicodeKeyboard和resetKeyboard参数设置为True了,发现还是没法解决. 打开手机设置语言和输入法,发现找不到Appium And ...