微信开发交流群：148540125
欢迎留言、转发、打赏
系列文章参考地址 极速开发微信公众号
项目源码参考地址 点我点我--欢迎Start
查看公众号是否有使用JSSDK的权限
服务号、订阅号可以通过登录微信公众平台查看开发>接口权限
使用JSSDK主要包括
1、判断当前客户端版本是否支持指定JS接口、
2、分享接口（微信认证）
3、图像接口
4、音频接口
5、智能接口（识别语音并返回结果）
6、设备信息（获取网络状态）
7、地理位置
8、界面操作
9、微信扫一扫
10、微信小店（服务号必须通过微信认证）
11、微信卡券 （微信认证）
12、微信支付（服务号必须通过微信认证）
使用JSSDK步骤
步骤一：绑定域名
先登录微信公众平台进入公众号设置的功能设置里填写JS接口安全域名。
JS接口安全域名.png
步骤二：引入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 成功了就会弹出
JSSDK 签名验证.png
如果出现 {"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
网友评论