1. JSSDK接口

微信提供了很多JSSDK接口，包括基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇、界面操作、扫一扫、微信支付接口等等。

这些接口我们可以通过JS轻松的调用，方便我们开发微信相关业务。

2. 基础接口

基础接口用来判断，当前用户使用的微信，是否支持指定的接口。由于微信也是有很多历史版本的，在不同版本的更新过程中，逐渐支持更多的JSSDK，所以一些老版本的微信是不支持部分JSSDK接口的。

这就要求我们在使用前，先调用基础接口判断一下是否可以使用具体的JSSDK接口。

3. 开发流程

3.1 绑定域名

调用JSSDK的网页，需要在公众号的【JS接口安全域名】列表内，我们登录公众号，依次点击【设置与开发】-【公众号设置】-【功能设置】。为了方便开发，我们可以将【业务域名】、【JS接口安全域名】、【网页授权域名】都设置上，这样微信就会给域名网页开发的各种权限了。
在这里插入图片描述

3.2 引入JS文件

既然要调用JSSDK，首先得引入JSSDK所在的JS文件，所以在resources/static/wxpage.html页面编码如下：

<html>
<head>
<meta charset="utf-8">
</head>
<body>hello<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</body>
</html>

3.3 通过config接口注入权限验证配置

注意JSSDK接口不是随便就能调用的，在页面初始化阶段，需要注入接口权限验证，上一篇我们其实已经实现了，即如下方法：

	/*** 第三步,获取JSSDK配置信息*/@GetMapping("/wxJsapiSignature")@ResponseBodypublic WxJsapiSignature wxJsapiSignature(String url) throws Exception {return wxMpService.createJsapiSignature(url);}

所以我们在html页面修改：

	$(function() {// 向后端请求配置信息$.ajax({type : "GET",url : "/wx-server/wxJsapiSignature",data : {url : location.href.split('#')[0]},dataType : "json",success : function(res) {configInfo(res);}});});// 通过wx.config注入配置信息function configInfo(res) {wx.config({debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId : res.appId, // 必填，公众号的唯一标识timestamp : res.timestamp, // 必填，生成签名的时间戳nonceStr : res.nonceStr, // 必填，生成签名的随机串signature : res.signature,// 必填，签名jsApiList : [ 'checkJsApi' ]// 必填，需要使用的JS接口列表});// 处理成功后回调wx.ready(function() {console.log("处理成功:");});// 处理失败后回调wx.error(function(err) {console.log("处理失败:", err);});}

3.5 调用基础接口

接下来我们可以调用基础接口checkJsApi，测试可否使用chooseImage接口(拍照接口)了，注意代码需要放入wx.ready。

	// 通过wx.config注入配置信息function configInfo(res) {wx.config({debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId : res.appId, // 必填，公众号的唯一标识timestamp : res.timestamp, // 必填，生成签名的时间戳nonceStr : res.nonceStr, // 必填，生成签名的随机串signature : res.signature,// 必填，签名jsApiList : [ 'checkJsApi', 'updateAppMessageShareData' ]// 必填，需要使用的JS接口列表});// 处理成功后回调wx.ready(function() {console.log("处理成功:");wx.checkJsApi({jsApiList : [ 'chooseImage' ],success : function(checkRes) {console.log("checkRes:", checkRes);}});});// 处理失败后回调wx.error(function(err) {console.log("处理失败:", err);});}